@font-face {
    font-family: title;
    src: url(/src/fonts/Montserrat_Alternates/MontserratAlternates-Bold.ttf);
}

@font-face {
    font-family: head;
    src: url(/src/fonts/UbuntuMono-Regular.ttf);
}

@font-face {
    font-family: writing;
    src: url(/src/fonts/pencilant/PencilantScript.otf);
}


@font-face {
    font-family: body;
    src: url(/src/fonts/Montserrat_Alternates/MontserratAlternates-Bold.ttf);
    font-weight: bold;
}
/* @font-face {
    font-family: body;
    src: url(/src/fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf);
} */

@font-face {
    font-family: body;
    src: url(/src/fonts/Montserrat-VariableFont_wght.ttf);
}

:root {
    /* -- Font -- */
    --title: 'title', sans-serif;
    --head: 'head', monospace, sans-serif;
    --body: 'body', sans-serif;
    --writing: 'writing', sans-serif;

    /* -- Format -- */
    --bold: 800;

    /* -- Sizing -- */
    font-size: 18px;
    --max-w: 1300px;

    --h1: 50px;
    --h2: 47px;
    --h3: 40px;
    --h4: 30px;
    --h5: 25px;
    --h6: 22px;

    /* -- Colors -- */
    --root: #fff;
    --root-invert: #000;

    /* Background */
    --bg-h: 220;
    --bg-s: 100%;
    --bg-l: 95%;

    --bg-2-h: 210;
    --bg-2-s: 100%;
    --bg-2-l: 87%;

    --bg-3-h: 216;
    --bg-3-s: 70%;
    --bg-3-l: 95%;

    --bg: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
    --bg-2: hsl(var(--bg-2-h), var(--bg-2-s), var(--bg-2-l));
    --bg-3: hsl(var(--bg-3-h), var(--bg-3-s), var(--bg-3-l));

    /* Foreground */
    --fg-h: 202;
    --fg-s: 100%;
    --fg-l: 37%;

    --fg-2-h: 221;
    --fg-2-s: 100%;
    --fg-2-l: 80%;

    --fg-3-h: 221;
    --fg-3-s: 100%;
    --fg-3-l: 90%;

    --fg: hsl(var(--fg-h), var(--fg-s), var(--fg-l));
    --fg-2: hsl(var(--fg-2-h), var(--fg-2-s), var(--fg-2-l));
    --fg-3: hsl(var(--fg-3-h), var(--fg-3-s), var(--fg-3-l));

    /* Accent */
    --accent-h: 202;
    --accent-s: 92%;
    --accent-l: 42%;

    --accent-2-h: 200;
    --accent-2-s: 80%;
    --accent-2-l: 60%;

    --accent-3-h: 220;
    --accent-3-s: 30%;
    --accent-3-l: 50%;

    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-2: hsl(var(--accent-2-h), var(--accent-2-s), var(--accent-2-l));
    --accent-3: hsl(var(--accent-3-h), var(--accent-3-s), var(--accent-3-l));

    /* Text */
    --txt-h: 200;
    --txt-s: 80%;
    --txt-l: 5%;

    --txt-2-h: 220;
    --txt-2-s: 100%;
    --txt-2-l: 5%;

    --txt-3-h: 300;
    --txt-3-s: 80%;
    --txt-3-l: 5%;

    --txt: hsl(var(--txt-h), var(--txt-s), var(--txt-l));
    --txt-2: hsl(var(--txt-2-h), var(--txt-2-s), var(--txt-2-l));
    --txt-3: hsl(var(--txt-3-h), var(--txt-3-s), var(--txt-3-l));
}