:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    color-scheme: light dark;
}
@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

/* https://mastodon.social/@simevidas/110703373956065210 */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    margin: 2.75rem min(4rem, 9.25svw);
}

.hello {
    --l: 70%;
    --c: 0.2;
    animation: color 10s linear infinite;
    font-size: min(6rem, 14svw);
    font-weight: 450;
}

footer {
    white-space: nowrap;
    font-size: 3rem;
    font-weight: 400;
    margin: 3.5rem 4rem;
}
@media screen and (max-width: 42rem) {
    header {
        align-self: center;
        margin: calc(7svw - 0.25rem) auto;
    }
    footer {
        margin: calc((7svw - 0.25rem) * (3.5/2.75)) min(4rem, 9.25svw);
    }
}
@media screen and (max-width: 35.75rem) {
    footer {
        /* font-size: min(3rem, calc(8.548svw - 0.075rem)); */
        font-size: min(3rem, calc(8.66svw - 0.1rem));
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        color: white;
        background: black;
    }
    .hello {
        --l: 80%;
    }
}