@font-face {
  font-family: "JetBrains Mono";
  src: url("https://delta.twoexem.com/jetbrains.ttf") format("truetype");
}

$bg-dark: #1e232b;
$bg: #222831;
$bg-bright: #242a34;
$bg-brighter: #2c3440;

$fg-dark: #8893a5;
$fg: #dfe2e7;
$fg-bright: #e2e4e9;

$red: #db504a;
$red-bright: #de615c;
$green: #47e2b1;
$green-bright: #59e4b8;
$yellow: #f5ad44;
$yellow-bright: #f6b556;
$blue: #448bf5;
$blue-bright: #5696f6;
$pink: #f786aa;
$pink-bright: #f792b2;
$cyan: #45e1df;
$cyan-bright: #57e3e2;

@media only screen and (max-width: 1080px) {
    body {
        font-size: 2em;
    }
    
    main {
        padding: 2em 1em 4em !important;
    }
}

* {
    font-family: "JetBrains Mono" !important;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: $bg;
    position: relative;
    color: $fg;
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

html {
    scrollbar-width: none;
}

a, a:link, a:visited {
    color: inherit;
    text-underline-offset: 2px;
}

a:focus, a:hover {
    color: $yellow;
}

a:active {
    color: $yellow-bright;
}

main {
    padding: 2em 1em 0em;
    height: 100%;
    text-align: center;
    
    li {
        margin-top: 1em;
    }
    
    footer {
        width: calc(100% - 4em);
        bottom: 0.5em;
        position: absolute;
        padding: 4px;
        color: $fg-dark;
        font-size: 0.8em;
    }
}

hr {
    color: $fg-dark;
    height: 1px;
    background-color: $fg-dark;
    width: 80%;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
}