@font-face {
    font-family: milker;
    src: url("../fonts/Milker.otf");
}
@font-face {
    font-family: typewriter;
    src: url("../fonts/JMH Typewriter.otf");
}
@font-face {
    font-family: "comic sans";
    src: url("../fonts/ComicNeueSansID.ttf");
}
@font-face {
    font-family: "jetbrains mono";
    src: url("../fonts/JetBrainsMono-Regular.ttf");
}
@font-face {
    font-family: "old london";
    src: url("../fonts/OldLondon.ttf");
}
@font-face {
    font-family: "minecraft";
    src: url("../fonts/Minecraft.ttf");
}
@font-face {
    font-family: "horror";
    src: url("../fonts/HelpMe.ttf");
}
@font-face {
    font-family: "capture it";
    src: url("../fonts/Capture\ it.ttf");
}
@font-face {
    font-family: "super mario";
    src: url("../fonts/SuperMario256.ttf");
}

:root {
    --color-main: rgb(217, 29, 29);
    --color-title: rgb(182, 23, 23);
    --color-border: rgb(137,16,16);
    --color-shadow: rgb(175, 21, 21);
    --color-shadow2: rgba(137,16,16, 0.75);
    --color-progressCircle: red;

    --font-main: typewriter;
    --font-title: milker;
    --font-input: monospace;
}

body {
    perspective: 500px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    color: #f0f0f0;
    user-select: none;
    font-family: monospace;
    background-color: black;

    /* Background pattern from Toptal Subtle Patterns */
    background: url("../img/backgrounds/default.webp");
}

#guide {
    position: absolute;
    left: 10px;
    bottom: 45px;
    opacity: 0.6;
    color: white;
}
.outline {
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    padding: 5px 9px;
}
.thin-space {
    margin: 0 10px;
}