@font-face {
    font-family: 'Diplomata SC';
    src: url('/css/diplomata_sc.ttf');
}

:root {
    color-scheme: light dark;
    cursor: url('/img/rainbow.cur'), auto;
}

body {
    margin: 0;
}

@media (prefers-color-scheme: light) {
    :root:has(#darkmode:checked) {
        color-scheme: only dark;
    }
}

@media (prefers-color-scheme: dark) {
    :root:has(#darkmode:checked) {
        color-scheme: only light;
    }
}

img {
    image-rendering: pixelated;
}

a {
    color: hsl(195, 100%, 30%);
}

a:visited {
    color: hsl(310, 100%, 30%);
}

@media (prefers-color-scheme: light) {
    :root:has(#darkmode:checked) {
        a {
            color: hsl(180, 100%, 77%);
        }

        a:visited {
            color: hsl(312, 100%, 83.33%);
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root:has(#darkmode:not(:checked)) {
        a {
            color: hsl(180, 100%, 77%);
        }

        a:visited {
            color: hsl(312, 100%, 83.33%);
        }
    }
}

.center-text {
    text-align: center;
}

.image-txt-container {
    padding-top: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.comic {
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "Brush Script MT", sans-serif;
}

#copyright {
    margin: 0 auto;
    padding: 0.5em 0;
}

#copyright p {
    margin: 0.2em auto 0;
}

#copyright img {
    height: 1em;
}

.epic {
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "Brush Script MT", sans-serif;
    text-align: center;
    font-size: 4.5em;
    animation: rainbow 3s linear infinite;
    padding-right: .25em;
    padding-bottom: .25em;
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    :root:has(#movebg:not(:checked)) {
        .epic {
            animation: rainbow 0s linear infinite;
            animation-fill-mode: both;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .epic {
        animation: rainbow 0s linear infinite;
        animation-fill-mode: both;
    }

    :root:has(#movebg:not(:checked)) {
        .epic {
            animation: rainbow 3s linear infinite;
        }
    }
}

@keyframes rainbow {
    from {
        text-shadow: 0.04em 0.04em #ff0000,
        0.08em 0.08em #ff7f00,
        0.12em 0.12em #ffff00,
        0.16em 0.16em #00ff00,
        0.20em 0.20em #0000ff,
        0.24em 0.24em #4b0082,
        0.28em 0.28em #8f00ff;
    }
    15% {
        text-shadow: 0.04em 0.04em #8f00ff,
        0.08em 0.08em #ff0000,
        0.12em 0.12em #ff7f00,
        0.16em 0.16em #ffff00,
        0.20em 0.20em #00ff00,
        0.24em 0.24em #0000ff,
        0.28em 0.28em #4b0082;
    }
    30% {
        text-shadow: 0.04em 0.04em #4b0082,
        0.08em 0.08em #8f00ff,
        0.12em 0.12em #ff0000,
        0.16em 0.16em #ff7f00,
        0.20em 0.20em #ffff00,
        0.24em 0.24em #00ff00,
        0.28em 0.28em #0000ff;
    }
    45% {
        text-shadow: 0.04em 0.04em #0000ff,
        0.08em 0.08em #4b0082,
        0.12em 0.12em #8f00ff,
        0.16em 0.16em #ff0000,
        0.20em 0.20em #ff7f00,
        0.24em 0.24em #ffff00,
        0.28em 0.28em #00ff00;
    }
    60% {
        text-shadow: 0.04em 0.04em #00ff00,
        0.08em 0.08em #0000ff,
        0.12em 0.12em #4b0082,
        0.16em 0.16em #8f00ff,
        0.20em 0.20em #ff0000,
        0.24em 0.24em #ff7f00,
        0.28em 0.28em #ffff00;
    }
    75% {
        text-shadow: 0.04em 0.04em #ffff00,
        0.08em 0.08em #00ff00,
        0.12em 0.12em #0000ff,
        0.16em 0.16em #4b0082,
        0.20em 0.20em #8f00ff,
        0.24em 0.24em #ff0000,
        0.28em 0.28em #ff7f00;
    }
    90% {
        text-shadow: 0.04em 0.04em #ff7f00,
        0.08em 0.08em #ffff00,
        0.12em 0.12em #00ff00,
        0.16em 0.16em #0000ff,
        0.20em 0.20em #4b0082,
        0.24em 0.24em #8f00ff,
        0.28em 0.28em #ff0000;
    }
    to {
        text-shadow: 0.04em 0.04em #ff0000,
        0.08em 0.08em #ff7f00,
        0.12em 0.12em #ffff00,
        0.16em 0.16em #00ff00,
        0.20em 0.20em #0000ff,
        0.24em 0.24em #4b0082,
        0.28em 0.28em #8f00ff;
    }
}


/* From https://codepen.io/jurbank/pen/DbpBKB */

:root {
    --fogTopLight: #aff;
    --fogBottomLight: #afa;
    --nodeStreakLight: #fff;

    --fogTopDark: #335;
    --fogBottomDark: #355;
    --nodeStreakDark: #000;
}

#background {
    width: 100%;
    height: 100%;
    perspective: 360px;
    z-index: -1;
    overflow: hidden;
    position: fixed;
}

#top-plane, #bottom-plane {
    width: 200%;
    height: 130%;
    position: fixed;
    bottom: -30%;
    left: -50%;
    background-size: 100px 100px, 100px 100px;
    background-position: -1px -1px, -1px -1px;
}

#top-plane {
    transform: rotateX(85deg);
}

#bottom-plane {
    transform: rotateX(-85deg);
    top: -30%;
}

@media (prefers-color-scheme: light) {
    #background {
        background: linear-gradient(
                var(--fogTopLight) 25%,
                var(--nodeStreakLight) 50%,
                var(--nodeStreakLight) 50%,
                var(--fogBottomLight) 100%
        ) fixed;
    }

    #top-plane, #bottom-plane {
        background-image: linear-gradient(var(--nodeStreakLight) 2px, transparent 2px),
        linear-gradient(to left, var(--nodeStreakLight) 2px, transparent 2px);
    }

    :root:has(#darkmode:checked) {
        #background {
            background: linear-gradient(
                    var(--fogTopDark) 25%,
                    var(--nodeStreakDark) 50%,
                    var(--nodeStreakDark) 50%,
                    var(--fogBottomDark) 100%
            ) fixed;
        }

        #top-plane, #bottom-plane {
            background-image: linear-gradient(var(--nodeStreakDark) 2px, transparent 2px),
            linear-gradient(to left, var(--nodeStreakDark) 2px, transparent 2px);
        }
    }
}

@media (prefers-color-scheme: dark) {
    #background {
        background: linear-gradient(
                var(--fogTopDark) 25%,
                var(--nodeStreakDark) 50%,
                var(--nodeStreakDark) 50%,
                var(--fogBottomDark) 100%
        ) fixed;
    }

    #top-plane, #bottom-plane {
        background-image: linear-gradient(var(--nodeStreakDark) 2px, transparent 2px),
        linear-gradient(to left, var(--nodeStreakDark) 2px, transparent 2px);
    }

    :root:has(#darkmode:checked) {
        #background {
            background: linear-gradient(
                    var(--fogTopLight) 25%,
                    var(--nodeStreakLight) 50%,
                    var(--nodeStreakLight) 50%,
                    var(--fogBottomLight) 100%
            ) fixed;
        }

        #top-plane, #bottom-plane {
            background-image: linear-gradient(var(--nodeStreakLight) 2px, transparent 2px),
            linear-gradient(to left, var(--nodeStreakLight) 2px, transparent 2px);
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root:has(#movebg:checked) {
        #top-plane {
            animation: planeMoveTop 3s infinite linear;
        }

        #bottom-plane {
            animation: planeMoveBot 3s infinite linear;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    :root:has(#movebg:not(:checked)) {
        #top-plane {
            animation: planeMoveTop 3s infinite linear;
        }

        #bottom-plane {
            animation: planeMoveBot 3s infinite linear;
        }
    }
}

/*noinspection CssRedundantUnit*/
@keyframes planeMoveTop {
    from {
        background-position: 0px -100px, 0px 0px;
    }
    to {
        background-position: 0px 0px, 100px 0px;
    }
}

/*noinspection CssRedundantUnit*/
@keyframes planeMoveBot {
    from {
        background-position: 0px 0px, 0px 0px;
    }
    to {
        background-position: 0px -100px, 100px 0px;
    }
}

@media (max-height: 350px) {
    .wrap {
        perspective: 210px;
    }
}