#page_content.homepage section.playing_info {
    width: 100%;
    padding: 1em;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#page_content.homepage section.playing_info .section_content{
    width: 100%;
    max-width: 130em;
    padding: 4em 1em;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3em;
}




#page_content.homepage section.playing_info .section_content .playing_detail_container{
    flex-grow: 1;
    max-width: 100%;
}


#page_content.homepage section.playing_info .section_content .playing_detail_container .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}




#page_content.homepage section.playing_info .section_content .playing_detail_container .icon_container{
    width: 5vw;
    max-width: min(4.5em, 12vw);
    min-width: 3.5em;
    aspect-ratio: 1/1;
    opacity: 0;
    transform: translateY(-5vh);
    transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
}

#page_content.homepage.ready section.playing_info .section_content .playing_detail_container.appear .icon_container{
    opacity: 1;
    transform: translateY(0);
}



#page_content.homepage section.playing_info .section_content .playing_detail_container .icon_container img{
    width: 100%;
    object-position: center;
    object-fit: cover;
}



#page_content.homepage section.playing_info .section_content .playing_detail_container .title{
    font-size: min(1.1em, 4vw);
    text-align: center;
    font-weight: 100;
    width: 6em;
    opacity: 0;
    transform: translateX(5vw);
    transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
}

#page_content.homepage.ready section.playing_info .section_content .playing_detail_container.appear .title{
    opacity: 1;
    transform: translateX(0);
}











/*#page_content.homepage section.playing_info .leaves_container{
    width: max-content;
    min-width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5em;
}


#page_content.homepage section.playing_info .leaves_container img{
    width: 20em;
}



#page_content.homepage section.playing_info .leaves_container img.first{
    transform: translateY(-4em) scale(0);
}

#page_content.homepage.ready section.playing_info .leaves_container img.first{
    animation: appearFirstLeave 0.75s ease-in-out forwards, animateFirstLeave 7s 0.75s ease-in-out infinite;
}

@keyframes appearFirstLeave {
    0%{
        opacity: 0;
        transform: translateY(-4em) scale(0);
    }
    100%{
        opacity: 1;
        transform: translateY(-4em) scale(1);
    }
}

@keyframes animateFirstLeave {
    0%{
        opacity: 1;
        transform: translateY(-4em) scale(1);
    }
    50%{
        opacity: 1;
        transform: translateY(-1em) scale(1);
    }
    100%{
        opacity: 1;
        transform: translateY(-4em) scale(1);
    }
}




#page_content.homepage section.playing_info .leaves_container img.second{
    transform: rotate(87deg) scale(0);
}

#page_content.homepage.ready section.playing_info .leaves_container img.second{
    animation: appearSecondLeave 0.75s ease-in-out forwards, animateSecondLeave 8s 0.75s ease-in-out infinite;
}

@keyframes appearSecondLeave {
    0%{
        opacity: 0;
        transform: rotate(87deg) scale(0);
    }
    100%{
        opacity: 1;
        transform: rotate(87deg) scale(1);
    }
}

@keyframes animateSecondLeave {
    0%{
        opacity: 1;
        transform: translateY(0) rotate(87deg) scale(1);
    }
    50%{
        opacity: 1;
        transform: translateY(-3em) rotate(87deg) scale(1);
    }
    100%{
        opacity: 1;
        transform: translateY(0) rotate(87deg) scale(1);
    }
}




#page_content.homepage section.playing_info .leaves_container img.third{
    transform: translateY(-4em) rotate(-42deg);
}

#page_content.homepage.ready section.playing_info .leaves_container img.third{
    animation: appearThirdLeave 0.75s ease-in-out forwards, animateThirdLeave 7s 0.75s ease-in-out infinite;
}


@keyframes appearThirdLeave {
    0%{
        opacity: 0;
        transform: translateY(-4em) rotate(-42deg) scale(0);
    }
    100%{
        opacity: 1;
        transform: translateY(-4em) rotate(-42deg) scale(1);
    }
}

@keyframes animateThirdLeave {
    0%{
        opacity: 1;
        transform: translateY(-4em) rotate(-42deg) scale(1);
    }
    50%{
        opacity: 1;
        transform: translateY(-1em) rotate(-42deg) scale(1);
    }
    100%{
        opacity: 1;
        transform: translateY(-4em) rotate(-42deg) scale(1);
    }
}*/