header {
    animation: navSlideDown 1.45s ease-in-out forwards;
    /*animation: navSlideDown2 0.9s ease-in-out forwards;*/
    will-change: transform;
    z-index: 1;
}

.spotify-web-container {
    animation: profileMusic 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
    opacity: 0;
}

.top1 {
    animation: text 1.5s ease-in-out;
    will-change: transform;
}

.top2 {
    animation: text2 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    will-change: transform, opacity;
    transform-origin: top center;
    display: inline-block;
}

.top3 {
    animation: text3 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.3s;
    will-change: transform, opacity;
    transform-origin: top center;
    opacity: 0;
}

@keyframes text {
    from {
        opacity: 0;
        transform: translateY(20pt) scale(0.98);
    }

    40% {
        opacity: 0.8;
        transform: translateY(-2pt) scale(1.01);
    }

    70% {
        opacity: 0.95;
        transform: translateY(1pt) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes text2 {
    0% {
        opacity: 0;
        transform: translateY(-10pt) scale(0.98);
    }

    40% {
        opacity: 0.6;
        transform: translateY(3pt) scale(1.02);
    }

    70% {
        opacity: 0.9;
        transform: translateY(-1pt) scale(0.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes text3 {
    0% {
        opacity: 0;
        transform: translateY(-20pt) scale(0.95);
    }

    30% {
        opacity: 0.4;
        transform: translateY(3pt) scale(1.02);
    }

    60% {
        opacity: 0.8;
        transform: translateY(-1pt) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes navSlideDown {
    from {
        transform: translate(-50%, -20%) scale(0.95);
        transform-origin: 50% 50%;
        opacity: 0.8;
        border-radius: 35px;
    }

    40% {
        transform: translate(-50%, 22%) scale(1.01);
        border-radius: 45px;
    }

    70% {
        transform: translate(-50%, 19%) scale(0.99);
        border-radius: 48px;
    }

    to {
        transform: translate(-50%, 20%) scale(1);
        border-radius: 49px;
        opacity: 1;
    }
}

#nav {
    width: 96%;
}

#nav.folded {
    width: 20%;
    animation: navFold 1.5s ease-in-out forwards;
    transition: all 0.8s ease-in-out;
}

/*#nav.unfolded {*/
/*    width: 96%;*/
/*    animation: navUnFold 1.5s ease-in-out forwards;*/
/*    transition: all 0.8s ease-in-out;*/
/*}*/

.hiddenonmob.folded {
    display: none;
}

@keyframes profileMusic {
    0% {
        opacity: 0;
        transform: translateY(-15pt) scale(0.95);
    }

    30% {
        opacity: 0.4;
        transform: translateY(3pt) scale(1.02);
    }

    60% {
        opacity: 0.8;
        transform: translateY(-1pt) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}