:root {
    --green: #23646E;
    --pink: #E6649B;
    --orange: #FFB400;
    --violet: #975FDB;
    --yellow: #FFFEBE;

    --blue-dark: #001964;
    --blue-light: #3773B4;
    --blue-vibrant: #3DADEA;
    --blue-light-tint: #ABD1FA;
    --blue-lightest-tint: #DBEDFF;

    --text-white: rgba(255,255,255,1);
    --text-black: rgba(0,0,0,.8);

    --fs-body-s: 15px; --lh-body-s: 23px;
    --fs-body-m: 18px; --lh-body-m: 26px;

    --fs-heading-drawn-m: 30px; --lh-heading-drawn-m: 30px;
    --fs-heading-drawn-l: 80px; --lh-heading-drawn-l: 80px;

    --fs-heading-s: 22px; --lh-heading-s: 30px;
    --fs-heading-m: 28px; --lh-heading-m: 35px;
    --fs-heading-l: 48px; --lh-heading-l: 52px;
    --fs-heading-xl: 70px; --lh-heading-xl: 70px;

    --font-heading: "Obviously", sans-serif;
    --font-heading-drawn: "Atomic Marker", sans-serif;
    --font-body: "Inter", sans-serif;

    --site-padding: 15px;

    /* Border radius */
    --br-s: 8px;
    --br-m: 20px;
    --br-l: 50px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-white);
    background-color: var(--blue-dark);
}

/* Kill the double-tap-to-zoom gesture on tappable things — rapid taps on a
   button shouldn't zoom the page. Pinch zoom stays available. */
a,
button,
label,
summary,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

@media screen and (min-width: 1024px) {
    :root {
        --fs-body-s: 18px; --lh-body-s: 26px;
        --fs-body-m: 20px; --lh-body-m: 30px;

        --fs-heading-drawn-m: 40px; --lh-heading-drawn-m: 40px;
        --fs-heading-drawn-l: 120px; --lh-heading-drawn-l: 120px;

        --fs-heading-s: 25px; --lh-heading-s: 34px;
        --fs-heading-m: 38px; --lh-heading-m: 45px;
        --fs-heading-l: 70px; --lh-heading-l: 70px;
        --fs-heading-xl: 120px; --lh-heading-xl: 120px;

        --br-s: 10px;
        --br-m: 30px;
        --br-l: 70px;
    }    
}

.text-s {
    font-family: var(--font-body);
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    margin: 0;
}

.heading-s {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 490;
    font-size: var(--fs-heading-s);
    line-height: var(--lh-heading-s);
    letter-spacing: 0.75px;
    margin: 0;
}

.heading-drawn-m {
    font-family: var(--font-heading-drawn);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-heading-drawn-m);
    line-height: var(--lh-heading-drawn-m);
    margin: 0;
}

.heading-drawn-l {
    font-family: var(--font-heading-drawn);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-heading-drawn-l);
    line-height: var(--lh-heading-drawn-l);
    margin: 0;
}

.text-m {
    font-family: var(--font-body);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    margin: 0;
}

.heading-m {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 490;
    font-size: var(--fs-heading-m);
    line-height: var(--lh-heading-m);
    margin: 0;
}

.heading-l {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 490;
    font-size: var(--fs-heading-l);
    line-height: var(--lh-heading-l);
    margin: 0;
}

.heading-xl {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 490;
    font-size: var(--fs-heading-xl);
    line-height: var(--lh-heading-xl);
    margin: 0;
}