body {
    height: 100vh;
    background: url("clouds_test.png"), linear-gradient(180deg, hwb(224 30% 0%) 0%, hwb(226 90% 0%) 100%);
    background-repeat: no-repeat;
    background-size: cover, cover;
    padding: 20px;
}

* {
    font-family: Inter, sans-serif;
    color: white
}

p, a {
    font-size: 20px;
    @media (max-width: 1024px) {
        font-size: 30px
    }
    font-style: italic;
}

p {
    font-weight: 300;
}

a {
    font-weight: 400;
}

.flex {
    display: flex;
    width: fit-content;
}

.flex-col {
    flex-direction: column;
}

:root { --space: 4px }
.gap-1 { gap: calc(var(--space) * 1); }
.gap-2 { gap: calc(var(--space) * 2); }
.gap-3 { gap: calc(var(--space) * 3); }
.gap-4 { gap: calc(var(--space) * 4); }

.pop {
    display: inline-block;
    transform-origin: left center;
    transition: transform 0.1s ease;
}

.pop:hover {
    transform: scale(1.25);
}