:root {
    --interval: 1000ms;
    --axis-PNTS: 0;
    --axis-ORNT: 0;
    --axis-ROTN: 1000;
    --axis-PATH: 1000;
    --padding: 1rem;
    --main-fontsize: 12px;
    --main-color: black;
}

@font-face {
    font-family: "DS";
    src: url("./fonts/DS-academy-var-testVF.ttf");
}

@font-face {
    font-family: "IBM Plex Mono Regular";
    src: url("./fonts/IBMPlexMono-Regular.woff2");
}

@font-face {
    font-family: "IBM Plex Mono Light";
    src: url("./fonts/IBMPlexMono-Light.woff2");
}

@font-face {
    font-family: "IBM Plex Mono Thin";
    src: url("./fonts/IBMPlexMono-Thin.woff2");
}

.debug {
    display: none;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: var(--main-fontsize);
}

body {
    color: var(--main-color);
    font-family: "IBM Plex Mono Regular", monospace;
    width: 100%;
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--padding);
}

nav {
    text-align: right;
}

nav > a {
    text-decoration: none;
}

hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 1em 0;

}


.logo {
    font-family: "DS", sans-serif;
    color: rgba(var(--color_green), var(--color_red), var(--color_blue), 1);
    font-size: 32vw;
    line-height: 0.94;
    font-variation-settings: "PNTS" var(--axis-PNTS), "ORNT" var(--axis-ORNT), "ROTN" var(--axis-ROTN), "PATH" var(--axis-PATH);
    text-decoration: none;
    color: var(--main-color);
    display: block;
    /* Prevent Variable font artifacts */
    /*margin-top: -2rem;
    margin-left: -2rem;
    padding: 2rem;
    padding-bottom: 3rem;*/
}

.logo.animate {
    transition: font-variation-settings var(--interval);;
}