*{
    box-sizing:border-box;
}

body{
    height:100vh;
    margin:0;
    font-family:'Lato', sans-serif;
    background-image:linear-gradient(0deg,rgb(247,247,247) 23.8%, rgb(252,221,221) 92% );
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.music-container {
    background-color:#fff;
    border-radius:15px;
    box-shadow:0 20px 20px 0 rgba(252, 169,169,0.6);
    display:flex;
    padding:20px 30px;
    position:relative;
    margin:100px 0;
    z-index:10;
}
.img-container{
    position:relative;
    width:110px;
    }

    .img-container::after{
        content:'';
        background-color:#fff;
        height:20px;
        width:20px;
        position:absolute;
        left:50%;
        bottom:50%;
        border-radius:50%;
        transform:translate(-50%,-50%);
    }
    .img-container img{
        width: inherit;
        height:110px;
        border-radius:50%;
        object-fit:cover;
        position:absolute;
        bottom:0;
        left:0;
        animation: rotate 3s linear infinite;
        animation-play-state:paused;
    }

    .music-container.play  .img-container img{
        animation-play-state:running;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform:rotate(360deg);
        }
    }

    .navigation {
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:1;
    }

    .action-btn{
        background-color:#fff;
        border:0;
        color:#dfdbdf;
        font-size:20px;
        cursor:pointer;
        padding:10px;
        margin:0 20px;
    }
    .action-btn-big{
        color:#cdc2d0;
        font-size:30px;
    }

    .action-btn:focus{
        outline:0;
    }

    .music-info {
        background-color:rgba(255,255,255,0.5);
        border-radius:15px 15px 0 0;
        position:absolute;
        top:0;
        left:20px;
        width:calc(100% - 40px);
         opacity : 0; 
        transform:translateY(0%);
        padding:10px 10px 10px 150px;
        transform:translateY(0%);
        transition:transform 0.3s ease-in, opacity 0.3s ease-in;
        
    }

    .music-container.play .music-info{
        opacity:1;
        transform:translateY(-100%);
    }

.music-info h4{
    margin:0;

}
    .progress-container {
        background:#fff;
        border-radius:5px;
        cursor:pointer;
        margin:10px 0;
        height: 4px;
        width:100%;
    }
    .progress {
        background-color:#fe8daa;
        border-radius:5px;
        height:100%;
        width:0%;
        transition:width 0.1s linear;

    }