@font-face {
    font-family: "title";
    src: url(/src/fonts/gidolinya/Gidolinya-Regular.otf) format("opentype");
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "head";
    src: url(/src/fonts/maven-pro/MavenPro-Regular.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "head";
    src: url(/src/fonts/maven-pro/MavenPro-Black.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "body";
    src: url(/src/fonts/gidolinya/Gidolinya-Regular.otf) format("opentype");
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "mont";
    src: url(/src/fonts/Montserrat-VariableFont_wght.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

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

    /* -- Sizing -- */
    font-size: 18px;
    --max-w: 700px;
    --max-w-2: 1000px;
    --whole-w: 2000px;

    --h1: 100px;
    --h2: 60px;
    --h3: 50px;
    --h4: 30px;
    --h5: 24px;
    --h6: 20px;

    --side-pad: 0px;
    --line-height: 1.6;

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

    /* Background */
    --bg-h: 180;
    --bg-s: 20%;
    --bg-l: 99%;

    --bg-2-h: 200;
    --bg-2-s: 15%;
    --bg-2-l: 90%;

    --bg-3-h: 190;
    --bg-3-s: 40%;
    --bg-3-l: 85%;

    --bg: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
    --bg-dim: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) - 5%));
    --bg-dark: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) - 10%));
    --bg-light: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) + 5%));
    --bg-bright: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) + 10%));

    --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: 180;
    --fg-s: 40%;
    --fg-l: 85%;

    --fg-2-h: 180;
    --fg-2-s: 40%;
    --fg-2-l: 60%;

    --fg-3-h: 180;
    --fg-3-s: 50%;
    --fg-3-l: 50%;

    --fg: hsl(var(--fg-h), var(--fg-s), var(--fg-l));
    --fg-dim: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) - 10%));
    --fg-dark: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) - 20%));
    --fg-darkest: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) - 35%));
    --fg-light: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) + 5%));
    --fg-bright: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) + 10%));

    --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: 187;
    --accent-s: 54%;
    --accent-l: 40%;

    --accent-2-h: 90;
    --accent-2-s: 35%;
    --accent-2-l: 90%;

    --accent-3-h: 318;
    --accent-3-s: 46%;
    --accent-3-l: 90%;

    --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: 180;
    --txt-s: 80%;
    --txt-l: 20%;

    --txt-2-h: 180;
    --txt-2-s: 80%;
    --txt-2-l: 5%;

    --txt-3-h: 180;
    --txt-3-s: 50%;
    --txt-3-l: 40%;

    --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));

    --txt-invert: var(--bg);
}