@font-face {
    font-family: "Shigoto";
    src: url("/resources/fonts/shigoto.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Fira Small Caps";
    src: url("/resources/fonts/fira_sans_condensed_bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

:root {
    /* Measurements */
    --m: 10px;
    --hm: 5px;
    --toolbar: 2.5em;
    --m-top: calc(var(--m) + var(--toolbar));
    --column-height: calc(100vh - var(--m-top));
    --footer-height: calc(6em + var(--m));
    --modal-width: 750px;

    /* Colors */
    --color-accent: #2196f3;
    --color-main-bg: #eeeeee;
    --color-footer-bg-0: #eeeeeeff;
    --color-footer-bg-1: #eeeeee00;
    --color-settings-bg: #bbbbbb;
    --color-modal-bg: white;
    --color-settings-window-bg: white;
    --color-toggle-slider: white;

    color: black;

    /* Misc */
    --filter-column-footer: grayscale(1);
    --filter-modal-logo: contrast(0.15) brightness(2) grayscale(100%) contrast(0.9);
    --opacity-modal-logo: 0.35;

    scrollbar-width: none;
}

:root.dark {
    /* Colors */
    --color-main-bg: #222222;
    --color-footer-bg-0: #222222ff;
    --color-footer-bg-1: #22222200;
    --color-settings-bg: #1a1a1a;
    --color-modal-bg: #3a3a3a;
    --color-settings-window-bg: #2a2a2a;
    --color-toggle-slider: #333333;

    color: white;

    /* Misc */
    --filter-column-footer: brightness(2) grayscale(1);
    --filter-modal-logo: brightness(2) grayscale(100%) contrast(0.3);
    --opacity-modal-logo: 0.15;
}

:root::-webkit-scrollbar {
    display: none;
}

body {
    margin: var(--m);
    margin-top: var(--m-top);
    margin-bottom: 0;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 300;
    background-color: var(--color-main-bg);
    transition: background 0.33s ease;
}

h1 {
    font-weight: 900;
    font-style: italic;
}

.reduced-animations * {
    transition: none !important;
    animation: none !important;
}

a {
    color: currentColor;
    text-decoration: none;
    font-weight: bold;
    font-family: "Fira Small Caps", "Fira Sans Condensed", sans-serif;
    font-variant: small-caps;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: unset;
}

a:active {
    color: var(--color-accent);
}