@font-face {
    font-family: 'Anybody';
    src: url('/fonts/anybody-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 150%;
    font-display: swap;
}

* { box-sizing: border-box; }
:root {
    color-scheme: dark;
    --background: #141814;
    --glow: #242b21;
    --text: #eeeae0;
    --soft-text: #eeeae0cc;
    --control-text: #eeeae0b3;
    --control-background: #141814e6;
    --border: #eeeae022;
    --dark-logo: block;
    --light-logo: none;
}
:root[data-theme='light'] {
    color-scheme: light;
    --background: #f5f3ec;
    --glow: #ffffff;
    --text: #242b21;
    --soft-text: #242b21cc;
    --control-text: #242b21cc;
    --control-background: #f5f3ece6;
    --border: #242b2122;
    --dark-logo: none;
    --light-logo: block;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --background: #f5f3ec;
        --glow: #ffffff;
        --text: #242b21;
        --soft-text: #242b21cc;
        --control-text: #242b21cc;
        --control-background: #f5f3ece6;
        --border: #242b2122;
        --dark-logo: none;
        --light-logo: block;
    }
}
html {
    background: var(--background);
    color: var(--text);
    font-family: 'Anybody', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body {
    margin: 0;
    min-height: 100svh;
    background: radial-gradient(ellipse at 50% 30%, var(--glow), var(--background) 75%);
}
.field { position: fixed; inset: 0; width: 100%; height: 100%; }
main { position: relative; min-height: 100svh; pointer-events: none; }
.identity {
    position: absolute;
    left: 50%;
    top: 9svh;
    width: min(78vw, 65rem);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
}
.identity img { display: block; width: 100%; height: auto; }
.identity .logo-dark { display: var(--dark-logo); }
.identity .logo-light { display: var(--light-logo); }
.message {
    position: absolute;
    top: 64svh;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    margin: 0;
    text-align: center;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 380;
    letter-spacing: 0.025em;
    color: var(--soft-text);
}
@media (max-width: 640px) {
    .identity { top: 20svh; width: min(92vw, 38rem); }
    .message { top: 62svh; }
}
@media (max-height: 500px) and (min-width: 641px) {
    .identity { top: 4svh; width: min(65vw, 38rem); }
    .message { top: 70svh; }
}