@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

    * {
        box-sizing: border-box;
    }

    /* added */

    i {
        /* width : 20px;
        height : 20px; */
        -moz-osx-font-smoothing:grayscale;
        -webkit-font-smoothing:antialiased;
        display:inline-block;
        font-style:normal;
        font-variant:normal;
        text-rendering:auto;
    }

    @font-face{font-family:"Font Awesome 5 Free";
        font-style:normal;
        font-weight:900;
        font-display:auto;
        src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.eot);
        src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
        url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.woff2) format("woff2"),
        url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.woff) format("woff"),
        url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.ttf) format("truetype"),
        url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
    }
    
    .backward:before {
        font-family : "Font Awesome 5 Free";
        content:"\f04a";
        color : gray;
      }
      
    .play:before {
        font-family : "Font Awesome 5 Free";
        content:"\f04b";
        color : gray;
      }
      
    .forward:before {
        font-family : "Font Awesome 5 Free";
        content:"\f04e";
        color : gray;
      }  

    .pause:before
    {
        font-family : "Font Awesome 5 Free";
        content:"\f04c";
        color : gray;
    }

    /* end added */

    body {

        background-image: linear-gradient(
            0deg,
            rgb(200,210,240) 10%,
            rgb(146, 119, 38) 80%
        );
        

        height: 100vh;
        display: flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        font-family : 'Lato', sans-serif;
        margin: 0;
    }

    .music-container {
        background-color:  white;
        border-radius : 15px;
        box-shadow : 0 10px 20px 10px rgba(87, 71, 68, 0.4);
        display : flex;
        padding : 20px 30px;
        position : relative;
        margin : 100px 0;
        z-index : 10;
    }

    .playing:before {
        content : "";
    }

    .img-container {
        position : relative;
        width : 110px;
        height : 110px;
        background-color : transparent;
        box-shadow : 0 10px 20px 10px rgba(87, 71, 68, 0.4);
        border-radius : 50%;
    }

    .img-container::after {
        content: '';
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        /* bottom: 100%;
        left: 50%; */

        width: 20px;
        height: 20px;
        margin : 45px;
        /*transform: translate(-50%, 50%);*/
    }

    .img-container img {
        border-radius: 50%;
        object-fit: cover;
        height: 110px;
        width: inherit;
        position: absolute;
        bottom: 0;
        left: 0;
        animation: rotate 3.5s linear infinite;
    
        animation-play-state : paused;
    }

    .music-container.playing .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.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);
        padding: 10px;
        opacity: 0;
        transform: translateY(0%);
        transition: transform 0.3s ease-in, opacity 0.3s ease-in;
        z-index: 0;
    }
  
    .music-container.playing .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: 16px;
        width: 100%;
    }
    
    .progress {
        background-color: #fe8daa;
        border-radius: 5px;
        height: 100%;
        width: 0%;
        transition: width 0.1s linear;
    }

    h1 .spanyellow {
        color : yellow;
    }