:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    @supports (font-variation-settings: normal) {
        font-family: InterVariable, sans-serif;
    }
}

html {
    background: url("assets/clouds.png"), linear-gradient(180deg, hwb(230 20% 0%) 0%, hwb(230 90% 0%) 110%);
    background-repeat: no-repeat;
    background-size: cover, cover;
}

body {
    height: 100dvh;
    padding: 20px;
}

* {
    font-style: italic;
    color: white;
    font-weight: 300;
}

.heavy {
    font-weight: 400;
}

.heavier {
    font-weight: 500;
}

p, a, li, ul {
    font-size: 20px;
    @media (max-width: 1024px) {
        font-size: 40px;
    }
}

.big {
    font-size: 24px;
    @media (max-width: 1024px) {
        font-size: 48px;
    }
}

/* tailwind lite */
:root { --space: 4px; }

.flex { display: flex; width: fit-content; }
.flex-col { flex-direction: column; }

.gap-2 { gap: calc(var(--space) * 2); }
.gap-4 { gap: calc(var(--space) * 4); }
.gap-8 { gap: calc(var(--space) * 8); }

.mt-4 { margin-top: calc(var(--space) * 4); }

.max-w-md {
    max-width: calc(var(--space) * 160);
    @media (max-width: 1024px) {
        max-width: calc(var(--space) * 320);
    }
}

.self-start { align-self: flex-start; }
/* tailwind lite */

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

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

.img {
    object-fit: contain;
    align-self: flex-start;
    max-height: 64px;
    @media (max-width: 1024px) {
        max-height: 128px;
    }
}

ul {
    list-style-type: "» ";
    padding-left: 1.2em;
}