:root{
    --rotate-scroll-left: 10deg;
    --rotate-scroll-right: -5deg;
    --translateY-scroll-f: -30px;
    --translateY-scroll-s: -15px;

    --shadow-color: black;
}
:root[theme='dark'] {
    --shadow-color: white;
}

@keyframes shadow {
    0%, 20%, 50%, 80%, 100% {
        -webkit-filter: blur(3px);
    }
    40% {
        -webkit-filter: blur(10px);
    }
    60% {
        -webkit-filter: blur(10px);
    }

}

.shadow {
    -webkit-animation: shadow 2s linear forwards;
    -moz-animation: shadow 2s linear forwards;
    -ms-animation: shadow 2s linear forwards;
    -o-animation: shadow 2s linear forwards;
    animation: shadow 2s linear forwards;
}

.blur {
    -webkit-animation: blur 0.5s linear forwards;
    -moz-animation: blur 0.5s linear forwards;
    -ms-animation: blur 0.5s linear forwards;
    -o-animation: blur 0.5s linear forwards;
    animation: blur 0.5s linear forwards;
}

@-webkit-keyframes blur {
    to {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
}
@-moz-keyframes blur {
    to {
        -moz-filter: blur(10px);
        filter: blur(10px);
    }
}
@keyframes blur {
    to {
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        filter: blur(10px);
    }
}

#scroll-up-shadow {
    background: var(--shadow-color);
    opacity: 0.5;
    height: 20px;
    width: 40px;
    border-radius: 100%;
    position: relative;
    -webkit-filter: blur(3px);
    transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    margin: auto;
    transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
}

@keyframes bounceIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        rotate: 0deg;
    }
    40% {
        rotate: var(--rotate-scroll-left);
        transform: translateY(var(--translateY-scroll-f));
    }
    60% {
        rotate: var(--rotate-scroll-right);
        transform: translateY(var(--translateY-scroll-s));
    }
}

#scroll-up-container {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    top: 66vh;
    left: 85vw;
    width: 10vw;
    position: fixed;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    -webkit-transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    -o-transition: opacity 1.5s ease-in-out;
}


@media (max-aspect-ratio:  4/3) {
    #scroll-up-container {
        position: sticky !important;
    }
    #scrollUp {
        width: 10vh !important;
    }
}

#scrollUp {
    width: 10vw;
    animation: none;
    animation: bounceIn 2s;
    z-index: 2;
}

#scrollUp:hover {
    filter: drop-shadow(2px 4px 6px #2969FF);
    animation: bounceIn 2s;
}