/* Palette: https://colorhunt.co/palette/453c676d67e446c2cbf2f7a1 */
/* Font: https://fonts.google.com/specimen/Montserrat */
:root {
    /* Black with red https://colorhunt.co/palette/171717444444da0037ededed */
    --BGDark: rgb(23, 23, 23);
    --BGLight: rgb(68, 68, 68);
    --BGAccent: rgb(218, 0, 55);
    --Text: rgb(237, 237, 237);
    --Text_Highlight: rgb(0, 0, 0);

    --I_BGDark: rgb(232, 232, 232);
    --I_BGLight: rgb(187, 187, 187);
    --I_BGAccent: rgb(37, 255, 200);
    --I_Text: rgb(18, 18, 18);
    --I_Text_Highlight: rgb(255, 255, 255);
    --animation_duration: 30s;
}
/* NOTE: do not use animations as a background. It will treat your selection as an image (?) its stupid but it works like that */
::-moz-selection { /* Code for Firefox */
    background: var(--BGAccent);
}
::selection {
    background: var(--BGAccent);
}

* {
    color: var(--Text);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: var(--BGDark)!important;
    /*height: 100vh;*/
}

.animation {
    background: linear-gradient(-45deg, var(--BGDark), var(--BGLight));
    background-size: 400% 400%;
    animation: gradient var(--animation_duration) ease infinite;
}

.animation_reverse {
    background: linear-gradient(-45deg, var(--BGDark), var(--BGLight));
    background-size: 400% 400%;
    animation: gradient var(--animation_duration) ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.container::before {
    /* scanline effect, credits Cyuucat and Zusier*/
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);
    background-size: 100% 5px;
    z-index: 9999;
    pointer-events: none;
    animation: scanlines-anim 1.0s linear infinite;
}

@keyframes scanlines-anim {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px 15px;
    }
}

@media only screen and (orientation: portrait) {
    .container::before {
        background-size: 100% 4px;
    }
}

.title {
    font-size: 5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0%;
    margin-top: 0%;
    color: var(--I_Text);
    text-shadow: 3px 3px var(--I_BGAccent);
}

.subtitle {
    color: var(--BGAccent);
    margin-top: 0%;
    margin-bottom: 0%;
    font-size: 150%;
    opacity: 50%;
}

.hidden {
    opacity: 0;
}

.invert {
    filter: invert(100%);
}

.combar {
    font-size: large;
    position: relative;
    top: 1%;
}

.combar span {
    /* background-color: var(--BGAccent); */
    background: linear-gradient(-45deg, var(--BGLight), var(--BGAccent));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: var(--Text);
    border-radius: 15px 0px 15px 0px;
    /* padding: 0.5em 1em; */
}
.combar a {
    padding: 0.25em;
    margin: 0.25em;
}

.combar a:hover {
    /* background-color: var(--Text);
    color: var(--BGAccent);*/
    color: var(--Text_Highlight)!important;
    cursor: pointer!important;
    transition: color ease-in-out 0s!important;
}


a {
    color: var(--Text)!important;
    text-decoration: none!important;
}

a:hover {
    color: var(--BGAccent)!important;
    cursor: pointer!important;
    transition: color ease-in-out 0.3s!important;
}