/* ended with a alternate gradient background, these colours fit the vibe of the TBOI planetarium music better */
body {

    overflow: scroll;
    background: linear-gradient(-45deg, #161C36, #0D1120, #181E3A, #263151, #1E2545, #18203C);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.scanlines {
    overflow: hidden;
    position: static;
}

.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}

.scanlines:before {
    width: 1000%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}

/* 32 bit unsigned limit for the z-index was totally neccasary */
/* You can tell i copy-pasted the scanlines code from my main page because the comment is the exact same */
.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom,
            transparent 50%,
            rgba(0, 0, 0, 0.3) 51%);
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

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

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

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

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


@keyframes staticbg {
    100% {
        background-position: 50% 0, 60% 50%
    }
}

.games {
    padding-left: 9%;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-content: center;
}

img {
    width: 75%;
    margin-top: 5em;
}


.ror2 {
    animation: hover alternate infinite 3s ease-in-out;
}

.ror2:hover {
    box-shadow: 0px 0px 5px black;
    transition-duration: 0.5s;
    animation: breath 4s infinite alternate ease-in-out;
}

.d2 {
    animation: hover alternate infinite 3s ease-in-out;
}

.d2:hover {
    box-shadow: 0px 0px 5px black;
    transition-duration: 0.5s;
}

.d2:hover {
    animation: breath 4s infinite alternate ease-in-out;
}

.hm {
    animation: hover alternate infinite 3s ease-in-out;
}

.hm:hover {
    box-shadow: 0px 0px 5px black;
    transition-duration: 0.5s;
}

.hm:hover {
    animation: breath 4s infinite alternate ease-in-out;
}

.tboi {
    animation: hover alternate infinite 3s ease-in-out;
}

.tboi:hover {
    box-shadow: 0px 0px 5px black;
    transition-duration: 0.5s;
}

.tboi:hover {
    animation: breath 4s infinite alternate ease-in-out;
}

a {
    color: rgba(0, 0, 0, 0);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: White;
}
/* 😭 THIS SHIT IS SO ASS WHAT WAS I DOINGGGGGGGGGGGGGGG */
a p {

    font-size: 3em;
}

@keyframes breath {
    0% {
        rotate: -0.5deg;
        width: 75%;
    }

    100% {
        rotate: 0.5deg;
        width: 80%;
    }
}

@keyframes hover {
    0% {
        transform: translateY(0.2em);
    }

    100% {
        transform: translateY(-0.2em);
    }
}

/* Felt like this could be nice, plus it covered my second font req */
footer {
    font-family: "Coming Soon", cursive;
    font-weight: 400;
    font-style: normal;
    color: white;
    position: fixed;
    top: 90%;
    left: -1%;
    background-image: url(assets/popup.png);
    background-size: cover;
    padding: 1em;
}