*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

:root {
    color-scheme: light dark;
    --color-background: light-dark(oklch(100% 0 0), oklch(22.2% 0 0));
    --color-text: light-dark(oklch(17.8% 0 0), oklch(98.5% 0 0));
    --color-text-hover: light-dark(oklch(45.7% 0 0), oklch(78% 0 0));
    --color-selection: light-dark(oklch(91.5% 0 0), oklch(31.4% 0 0));

    --font-sans: 'Timeless Sans Grotesk', system-ui, -apple-system, sans-serif;

    --content-max-width: 31.25rem;  /* 500px */
}

/* variable file: wght 300-800, plus an ital axis and a STYL axis
   (0 Grotesk, 100 Sans) that both default to 0, so it renders as upright Grotesk */
@font-face {
    font-family: 'Timeless Sans Grotesk';
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/TimelessSansVF.woff2') format('woff2');
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-text);
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 420;  /* the family's Regular */
    font-size: 1rem;  /* 16px */
    line-height: 1.5;
    letter-spacing: -0.00625em;  /* -0.1px at 16px */
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: 100svh;
    display: grid;
    place-items: center;
    width: min(var(--content-max-width), 100% - 3rem);
    margin-inline: auto;
    padding-block: 3rem;
}

/* same color as body text, no underline, so weight alone marks a link */
a {
    color: inherit;
    font-weight: 550;
    text-decoration: none;
    transition: color 120ms ease-in-out;
}

a:hover,
a:focus-visible {
    color: var(--color-text-hover);
}

a:focus-visible {
    outline: 0.0625rem dashed var(--color-text-hover);
    outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
    main {
        animation: slideUpBlur 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
}

@keyframes slideUpBlur {
    from {
        opacity: 0;
        translate: 0 1rem;
        filter: blur(5px);
    }
}