/* css/media.css */
/* MEDIA */


/* CIRCLES */
/* COLORS */
.circle:nth-child(1) {background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 212, 255, 1) 100%);}
.circle:nth-child(2) {background: linear-gradient(90deg, rgba(0, 0, 0, 1) 43%, rgba(227, 5, 59, 1) 100%);}
.circle:nth-child(3) {background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(86, 255, 0, 1) 100%);}
.circle:nth-child(4) {background: linear-gradient(90deg, rgba(139, 3, 249, 1) 0%, rgba(0, 0, 0, 1) 100%);}
.circle:nth-child(5) {background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(233, 152, 11, 1) 100%);}
.circle:nth-child(6) {background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(2, 0, 36, 1) 100%);}

/* ANIMATIONS */
.circle:nth-child(1) {animation: circle-1 4s ease alternate infinite;}
.circle:nth-child(2) {animation: circle-2 4s ease alternate infinite;}
.circle:nth-child(3) {animation: circle-3 4s ease alternate infinite;}
.circle:nth-child(4) {animation: circle-4 4s ease alternate infinite;}
.circle:nth-child(5) {animation: circle-5 4s ease alternate infinite;}
.circle:nth-child(6) {animation: circle-6 4s ease alternate infinite;}

/* PULSE */
@keyframes pulse {
    0% {transform: scale(.15) rotate(180deg);}
    100% {transform: scale(1);}
}

@keyframes circle-1 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-35px, -50px);}
}

@keyframes circle-2 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(35px, 50px);}
}

@keyframes circle-3 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-60px, 0);}
}

@keyframes circle-4 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(60px, 0);}
}

@keyframes circle-5 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-35px, 50px);}
}

@keyframes circle-6 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(35px, -50px);}
}

/* ROTATE */
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
/* CIRCLES - END */


/* BREATHE */
.breathe {transition: opacity 0.2s ease;}

/* FADE */
.fade-out {opacity: 0;}

/* GROW */
.inhale {animation: inhaleText 4s linear forwards;}

/* SHRINK */
.exhale {animation: exhaleText 4s linear forwards;}

@keyframes inhaleText {
    from { transform: scale(0.9); }
    to   { transform: scale(1.2); }
}

@keyframes exhaleText {
    from { transform: scale(1.2); }
    to   { transform: scale(0.9); }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* BREATHE - END */



/* RESPONSIVE */
/* 871 */
@media only screen and (max-width: 871px) {

    #background {
        min-height: 100vh;
        padding: 2rem;
        background-attachment: scroll; /* Prevents gaps caused by fixed backgrounds on mobile */
    }

    .hamburger { 
        display: block; 
        position: fixed;
        left: -45%;
        top: 0;
        z-index: 999; 
        cursor: pointer;
        position: relative;
    }

    .bar {
        background-color: white;
        display: block;
    }
    
    .navbar {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 998;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        background-color: rgb(0, 0, 0);
        width: 100%;
        height:100vh;
        text-align: center;
        border-radius: 0 0 10px 10px;
        padding: 3rem;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .navbar.active { left: 0; }
    .navbar li { 
        max-width: 100%;
        min-width: 250px;
    }

    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .main-container {
        flex-direction: column;
        align-items: center;
        gap: 6rem;
    } 

    .left-column, .right-column {
        flex: none; 
        width: 75%;
        max-width: 75%;
        height: auto; 
    } 

    .left-column { min-height: 310px; }

    .music-container { margin-top: 2rem; }

    .music-info {
        width: calc(100% + 4px);
        left: -2px;
        padding: 40px 60px 0px 60px;
    }

    .main-container {padding-bottom: 10rem;}

    footer {padding: 10rem 0 6rem 0;}


}





/* 576 */
@media only screen and (max-width: 576px) {
    .music-img-container img { bottom: 63px; }
    
    .music-img-container::after {
        bottom: 209%;
        left: 56px;
    }



     #background {
        min-height: 100vh;
        padding: 1rem;
        background-attachment: scroll; /* Prevents gaps caused by fixed backgrounds on mobile */
    }

    .hamburger { 
        display: block; 
        position: relative;
        left: auto;
        z-index: 999; 
        cursor: pointer;
        margin: 3rem 0;
    }
    
    .navbar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: start;
        padding: 9rem;
    }

    .navbar.active {
        left: 0;
    }

    .left-column, .right-column {
        width: 90%;
        max-width: 100%;
    }


    .music-info {
        padding: 60px 50px 1px 180px;
         left: -2px;
    width: 101.3%;
    }



    footer {
        padding: 10rem 0 6rem 0;
    }


}