#backdrop{
    animation: animateBanner 1.5s cubic-bezier(.39,.58,.57,1) forwards;
}

#backdrop img{
    animation: animateBannerLogo 1s cubic-bezier(.22,.61,.36,1) forwards;
}

#streaming div{
    flex-direction: column;
    gap: 15px;
}

#shows div{
    background-color: var(--secondaryBackgroundColor);
    padding: 10px;
}

#socials div{
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 5px;
    overflow-y: hidden;
    scrollbar-width: thin;
}

#socials div a{
    padding: 8px;
}

#socials div .social-icons{
    height: 40px;
    width: 40px;
    fill: var(--primaryColor);
    display: block;
    transition: all cubic-bezier(0.4,0,0.2,1) 0.15s;
    scale: 1;
}

#socials div a:hover .social-icons{
    scale: 1.075;
}

#contact div{
    padding: 20px;
}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

}

@keyframes animateBanner{
    0% {
        background-color: #000;
    }
    100% {
        background-color: rgba(0,0,0,0.5);
    }
}

@keyframes animateBannerLogo{
    0% {
        scale: 1.3;
        opacity: 0;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}