@font-face {
    font-family: FT88-Regular;
    src: url(../assets/fonts/FT88-Regular.woff);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: FT88-Regular;
    src: url(../assets/fonts/FT88-Bold.woff);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: FT88-Regular;
    src: url(../assets/fonts/FT88-Expanded.woff);
    font-width: expanded;
    font-stretch: expanded;
}

@font-face {
    font-family: FT88-Regular;
    src: url(../assets/fonts/FT88-Italic.woff);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: FT88-Serif;
    src: url(../assets/fonts/FT88-Serif.woff);
}

@font-face {
    font-family: FT88-Serif;
    src: url(../assets/fonts/FT88-Bold.woff);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: FT88-Serif;
    src: url(../assets/fonts/FT88-Expanded.woff);
    font-width: expanded;
    font-stretch: expanded;
}

@font-face {
    font-family: FT88-Serif;
    src: url(../assets/fonts/FT88-Italic.woff);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: FT88-Gothique;
    src: url(../assets/fonts/FT88-Gothique.woff);
}

@font-face {
    font-family: FT88-School;
    src: url(../assets/fonts/FT88-School.woff);
}

:root {
    --smolc-text-color: #f5f0ec;
    --smolc-warning-color: #fd8a44;
    --smolc-okay-color: #4989ec;
    --smolc-danger-color: #ff0612;
    --smolc-intense-purple: #6800ff;
    --smolc-intense-raspberry: #ff0078;
    --smolc-tarnished-gold: #ead24b;
    --smolc-flat-metal: #3e3c3c;
    --smolc-paper-color: #f5f0ec;
    --smolc-blue-ink-color: #0028cc;
    --smolc-red-ink-color: #d90000;
    /* turn black into dark blue */
    --smolc-blue-ink-filter: invert(0.5) sepia(1) hue-rotate(200deg) saturate(40) brightness(0.7);
    /* red */
    --smolc-red-ink-filter: invert(0.5) sepia(1) hue-rotate(-40deg) saturate(40) brightness(0.85);
    /* green */
    --smolc-green-ink-filter: invert(0.5) sepia(1) hue-rotate(120deg) saturate(20) brightness(0.6);
    /* green */
    --smolc-orange-filter: invert(0.5) sepia(1) hue-rotate(10deg) saturate(40) brightness(0.85);
    --smolc-lines-color: rgba(243, 182, 50, 0.7);
    --smolc-thin-lines-color: rgba(240, 223, 73, 0.6);
    --smolc-graph-paper:
        /* thick lines */
        linear-gradient(var(--smolc-lines-color) 5%,
            transparent 5%), linear-gradient(90deg,
            var(--smolc-lines-color) 5%,
            transparent 5%),
        /* vertical thin lines */
        linear-gradient(90deg,
            transparent 10%,
            var(--smolc-thin-lines-color) 10%,
            var(--smolc-thin-lines-color) 12%,
            transparent 12%), linear-gradient(90deg,
            transparent 20%,
            var(--smolc-thin-lines-color) 20%,
            var(--smolc-thin-lines-color) 22%,
            transparent 22%), linear-gradient(90deg,
            transparent 30%,
            var(--smolc-thin-lines-color) 30%,
            var(--smolc-thin-lines-color) 32%,
            transparent 32%), linear-gradient(90deg,
            transparent 40%,
            var(--smolc-thin-lines-color) 40%,
            var(--smolc-thin-lines-color) 42%,
            transparent 42%), linear-gradient(90deg,
            transparent 50%,
            var(--smolc-lines-color) 50%,
            var(--smolc-lines-color) 52%,
            transparent 52%), linear-gradient(90deg,
            transparent 60%,
            var(--smolc-thin-lines-color) 60%,
            var(--smolc-thin-lines-color) 62%,
            transparent 62%), linear-gradient(90deg,
            transparent 70%,
            var(--smolc-thin-lines-color) 70%,
            var(--smolc-thin-lines-color) 72%,
            transparent 72%), linear-gradient(90deg,
            transparent 80%,
            var(--smolc-thin-lines-color) 80%,
            var(--smolc-thin-lines-color) 82%,
            transparent 82%), linear-gradient(90deg,
            transparent 90%,
            var(--smolc-thin-lines-color) 90%,
            var(--smolc-thin-lines-color) 92%,
            transparent 92%),
        /* horizontal lines */
        linear-gradient(0deg,
            transparent 10%,
            var(--smolc-thin-lines-color) 10%,
            var(--smolc-thin-lines-color) 12%,
            transparent 12%), linear-gradient(0deg,
            transparent 20%,
            var(--smolc-thin-lines-color) 20%,
            var(--smolc-thin-lines-color) 22%,
            transparent 22%), linear-gradient(0deg,
            transparent 30%,
            var(--smolc-thin-lines-color) 30%,
            var(--smolc-thin-lines-color) 32%,
            transparent 32%), linear-gradient(0deg,
            transparent 40%,
            var(--smolc-thin-lines-color) 40%,
            var(--smolc-thin-lines-color) 42%,
            transparent 42%), linear-gradient(0deg,
            transparent 50%,
            var(--smolc-lines-color) 50%,
            var(--smolc-lines-color) 52%,
            transparent 52%), linear-gradient(0deg,
            transparent 60%,
            var(--smolc-thin-lines-color) 60%,
            var(--smolc-thin-lines-color) 62%,
            transparent 62%), linear-gradient(0deg,
            transparent 70%,
            var(--smolc-thin-lines-color) 70%,
            var(--smolc-thin-lines-color) 72%,
            transparent 72%), linear-gradient(0deg,
            transparent 80%,
            var(--smolc-thin-lines-color) 80%,
            var(--smolc-thin-lines-color) 82%,
            transparent 82%), linear-gradient(0deg,
            transparent 90%,
            var(--smolc-thin-lines-color) 90%,
            var(--smolc-thin-lines-color) 92%,
            transparent 92%);
}

html {
    font-family: FT88-Regular;
    font-size: 20px;
    text-shadow: 0 0 0.15em var(--smolc-text-color);
    color: var(--smolc-text-color);
    background-color: #242023;
}

div#root {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    height: 50lh;
    justify-content: center;
    box-sizing: border-box;
    padding: 1em;
    padding-left: 3em;
    overflow-x: hidden;
    /* scroll-snap-type: y proximity; */
}

.smolc-red-text {
    color: var(--smolc-red-ink-color);
}

.smolc-green-text {
    color: #008c8c;
}

@media only screen and (max-width: 840px) {
    html {
        font-size: 10px;
    }
}