/* VARIABLES */

:root {
    --font: 'Figtree', Helvetica, Arial, sans-serif;
    --gray-5: hsl(200, 15%, 95%);
    --gray-85: hsl(200, 15%, 15%);
}

/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

a {
    color: inherit;
}

/* BODY */

body {
    position: relative;
    background: var(--gray-5);
    top: 4rem;
    opacity: 0;
    animation: fade-in 1s cubic-bezier(.1,.8,.5,1) 0.25s 1 forwards;
}

@keyframes fade-in {
    from {opacity: 0; top: 2rem;}
    to {opacity: 1; top: 0;}
}

/* CONTAINER */

.container {
    margin: auto;
    padding: 8rem;
    max-width: 960px;
}

/* TYPOGRAPHY */

.body-1 {
    font: 3rem/125% var(--font);
    color: var(--gray-85);
}

/* RESPONSIVE */

@media (prefers-color-scheme: dark) {
    body {background: var(--gray-85);}
    .body-1 {color: var(--gray-5);}
}

@media screen and (max-width: 1023px) {
    .container {padding: 4rem;}
    .body-1 {font-size: 2.5rem;}
}

@media screen and (max-width: 424px) {
    .container {padding: 2rem;}
    .body-1 {font-size: 2rem;}
}