@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/RobotoCondensed.woff2) format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
    border: 1px solid #ffffff11;
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 6px;
    box-sizing: border-box;

    scrollbar-gutter: stable;
}

#content::-webkit-scrollbar,
#footer-links::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

#content::-webkit-scrollbar-track,
#footer-links::-webkit-scrollbar-track {
    background: transparent;
}

#content::-webkit-scrollbar-thumb,
#footer-links::-webkit-scrollbar-thumb {
    background: #ffffff22;
    border-radius: 4px;
}

#content::-webkit-scrollbar-thumb:hover,
#footer-links::-webkit-scrollbar-thumb:hover {
    background: #ffffff33;
}

#content,
#footer-links {
    scrollbar-width: thin;
    scrollbar-color: #ffffff transparent;
}

#footer {
    padding: 4px 24px;
    text-align: left;
}

body[data-theme='dark'] {
    --main-back: #090b0c;
    --main-fore: #fefefe;
    --main-alt: #43c76f;
}

body[data-theme='light'] {
    --main-back: #fefefe;
    --main-fore: #060606;
    --main-alt: #43c76f;
}

body {
    background-color: var(--main-back);
    transition: background-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

body {
    margin-top: 24px;
    margin-left: 20%;
    margin-right: 20%;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1,
p,
span,
li,
a,
#marquee-container {
    margin: 0;
    font-family:
        'Roboto Condensed',
        Segoe UI,
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;
    color: var(--main-fore);
    font-size: 24px;
    transition: color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

h1:not(.nobg),
p:not(.nobg),
:not(li) > span:not(.nobg),
:not(#footer-links):not(li) > a:not(.nobg),
ul:not(.nobg),
#marquee-container:not(.nobg) {
    background-color: #080708aa;
}

body[data-snow-enabled='true'] h1:not(.nobg),
body[data-snow-enabled='true'] p:not(.nobg),
body[data-snow-enabled='true'] :not(li) > span:not(.nobg),
body[data-snow-enabled='true'] :not(#footer-links):not(li) > a:not(.nobg),
body[data-snow-enabled='true'] ul:not(.nobg),
body[data-snow-enabled='true'] #marquee-container:not(.nobg) {
    backdrop-filter: blur(3px);
}

sup {
    font-size: 16px;
}

a:not(.disabled) {
    text-decoration: none;
    color: var(--main-alt);
}

img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

li a svg {
    vertical-align: middle;
}

li {
    list-style: none;
    display: flex;
    align-items: center;
}

li .icon {
    margin-right: 8px;
    display: flex;
    align-items: center;
    color: var(--main-fore);
}

.footer,
.footer > a {
    font-size: 16px;
    align-self: center;
}

.footer > i {
    color: #888;
}

.footer {
    margin-left: auto;
    margin-right: 8px;
}

#footer-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0px;
}

@media (max-width: 900px) {
    body {
        margin-left: max(8%, 56px);
        margin-right: max(8%, 16px);
    }

    #footer > span {
        flex-wrap: wrap;
    }

    .footer {
        margin-left: auto;
        margin-right: 8px;
    }
}

@media (max-width: 600px) {
    body {
        margin-left: 8px;
        margin-right: 8px;
    }

    #snow-toggle {
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
    }
}