body {

    background-color: #120007;

    color: #ff0066;

    margin: auto;

    max-width: 2000px;

    overflow: hidden;

    animation: TextboxAnim 1.5s linear 0s 1 normal forwards;

    filter: drop-shadow(0px 0px 0px #63003a);

    filter: saturate(0%) drop-shadow(0px 0px 0px #63003a);

    transition: filter 1s ease 0s;

}

body:hover {

    filter: saturate(100%) drop-shadow(15px 15px 15px #63003a);
}

header {

    font: 150% "font", cursive;

    text-align: center;

    color: #ff0066;

    outline: 2px solid #830035;

    border-radius: 8px;

    width: 80%;

    margin-top: 0%;

    margin-left: 10%;

    transition: font 1s ease 0s;



}

header:hover {

    font: 250% "bradley hand", cursive;

    cursor: context-menu;

}

#ouroborosimg {

    outline: 2px solid #830035;

    width: 20%;

    border-radius: 8px;

    margin-left: 10%;

    transition: width 1s ease 0s;

}

#ouroborosimg:hover {

    width: 23%;

}

.text-box {

    font: 150% "Jura";

    text-align: center;

    margin-right: 10%;

    float: right;

    width: 55%;

    border-radius: 8px;

    outline: 2px solid #830035;

}


#linkButtons {
    float: left;
    margin-top: 3%;
    margin-left: 10%;
}

#github-image:hover, #discord-image:hover, #modrinth-image:hover, #quotes-image:hover {

    width: 15%;

}

#github-image, #discord-image, #modrinth-image, #quotes-image {

    width: 10%;

    transition: width 1s ease 0s;

}



.parallax-container {

    width: 100%;

    height: 100vh;

    overflow: hidden;

    perspective: 1000px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.parallax-content {

    transform-style: preserve-3d;

    backface-visibility: hidden;

    transition: transform 0.2s ease-out;

    max-width: 80%;

}

@keyframes TextboxAnim {

    0% {

        animation-timing-function: ease-in;

        opacity: 1;

        transform: translateY(-45px);

    }



    24% {

        opacity: 1;

    }



    40% {

        animation-timing-function: ease-in;

        transform: translateY(-24px);

    }



    65% {

        animation-timing-function: ease-in;

        transform: translateY(-12px);

    }



    82% {

        animation-timing-function: ease-in;

        transform: translateY(-6px);

    }



    93% {

        animation-timing-function: ease-in;

        transform: translateY(-4px);

    }



    25%,

    55%,

    75%,

    87% {

        animation-timing-function: ease-out;

        transform: translateY(0px);

    }



    100% {

        animation-timing-function: ease-out;

        opacity: 1;

        transform: translateY(0px);

    }

}