@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');  
   html {  
     box-sizing: border-box ;  
     --parent-height : 32em ;  
     --duration: 0.4s ;  /* I have changed 1s as 0.5 it is animation duration of full screen*/
     --duration-text-wrap: 12s 1.5s cubic-bezier(0.82, 0.82, 1, 1.01) ;  
     --cubic-header: var(--duration) cubic-bezier(0.71, 0.21, 0.3, 0.95) ;  
     --cubic-slider : var(--duration) cubic-bezier(0.4, 0, 0.2, 1) ;  
     --cubic-play-list : .35s var(--duration) cubic-bezier(0, 0.85, 0.11, 1.64) ;  
     --cubic-slider-context : cubic-bezier(1, -0.01, 1, 1.01) ;  
   }  
   html *,  
   html *::before,  
   html *::after {  
     box-sizing: inherit ;  
     scrollbar-width: none ;  
   }  
   body{  
     margin: 0 ;  
     height: 100vh ;  
     display: flex ;  
     user-select: none ;  
     align-items: center ;  
     justify-content: center ;  
     background-color: black ;  
     font-family: 'Quicksand', sans-serif ;  
     -webkit-tap-highlight-color: transparent ;  
     color: white;  
   }   
   .img {  
     width: 100% ;  
     flex-shrink: 0;  
     display: block ;  
     object-fit: cover ;  
   }  
   .list {  
     margin: 0 ;  
     padding: 0 ;  
     list-style-type: none ;  
   }  
   .flex {  
     display: flex ;  
     align-items: center ;  
     justify-content: space-between ;  
   }  
   .uppercase{  
     text-transform: uppercase ;  
   }  
   .player {  
     width: 100em ;  
     display: flex ;  
     overflow: hidden ;  
     font-size: 1.22em ;  
     flex-direction: column ;  
     background-color: rgb(0, 0, 0) ;  
     /*background-image: linear-gradient(rgb(12, 129, 12),black);*/
     height: var(--parent-height) ;  
   }  
   .player__header {  
     z-index: 1 ;  
     gap: 0 .4em ;  
     width: 100% ;  
     display: flex;  
     height: 5.85em ;  
     flex-shrink: 0 ;  
     position: relative;  
     align-items: flex-start ;  
     border-radius: inherit ;  
     justify-content: flex-end ;  
     color: greenyellow;
     background-color: rgb(0, 0, 0) ;  
     padding: .95em 0.6em 0 1.2em ;  
     box-shadow: 0 2px 6px 1px #0000001f ;  
     transition: height var(--cubic-header), box-shadow var(--duration), padding var(--duration) ease-in-out ;  
   }  
   .player__header.open-header {  
     height: 100% ;  
     padding-left: 0 ;  
     padding-right: 0 ;  
     box-shadow: unset ;  
   }  
   .player__img {  
     width: 3.30em ;  
     height: 3.22em ;  
     border-radius: 1em ;  
   }  
   .player__img--absolute {  
     top: 1.4em ;  
     left: 1.2em ;  
     position: absolute ;  
   }  
   .slider {  
     flex-shrink: 0 ;  
     overflow: hidden ;  
     transition: width var(--cubic-header), height var(--cubic-header), top var(--cubic-header), left var(--cubic-header);  
   }  
   .slider.open-slider{  
     top: 0 ;  
     left: 0 ;  
     width: 100% ;  
     height: 26em ;  
   }  
   .slider__content {  
     display: flex ;  
     height: 100% ;  
     will-change : transform ;  
     transition: transform var(--cubic-slider);  
   }  
   .slider__img {  
     filter: brightness(50%) ;  
   }  
   .slider__name,   
   .slider__title {  
     overflow: hidden ;  
     white-space: nowrap ;  
   }  
   .text-wrap {  
     display: block ;  
     white-space: pre ;  
     width: fit-content ;  
     animation: text-wrap var(--duration-text-wrap) infinite ;  
   }  
   @keyframes text-wrap {  
     75%{  
       transform: translate3d(-51.5%, 0, 0) ;  
     }  
     100%{  
       transform: translate3d(-51.5%, 0, 0) ;  
     }  
   }  
   .player__button {  
     all: unset ;  
     z-index: 100 ;  
     width: 2em ;  
     height: 4em ;  
     cursor: pointer ;  
   }  
   .playlist {  
     transform: scale(0) ;  
     transition: transform calc(var(--duration) / 2) ;  
   }  
   .slider.open-slider .playlist {  
     transform: scale(1) ;  
     transition: transform var(--cubic-play-list) ;  
   }  
   .player__button--absolute--nw {  
     top: 5.5% ;  
     left: 5.5% ;  
     position: absolute ;  
   }  
   .player__button--absolute--center {  
     top: 0 ;  
     left: 0 ;  
     right: 0 ;  
     bottom: 0 ;  
     margin: auto ;  
     position: absolute ;  
   }  
   img[alt ="pause-icon"] {  
     display: none ;  
   }  
   .player__controls {  
     width: 77% ;  
     gap: .5em 0 ;  
     display: flex ;  
     flex-wrap: wrap ;  
     align-items: center ;  
     will-change: contents ;  
     align-content: center ;  
     justify-content: center ;  
     transition: transform var(--cubic-header) , width var(--cubic-header) ;  
   }  
   .player__controls.move {  
     width: 88% ;  
     transform: translate3d(-1.1em , calc(var(--parent-height) - 153%) , 0) ;  
   }  
   .player__context {  
     margin: 0 ;  
     width: 100% ;  
     display: flex ;  
     line-height: 1.8 ;  
     flex-direction: column ;  
     justify-content: center ;  
     text-transform: capitalize ;  
   }  
   .slider__context {  
     width: 56.28% ;  
     cursor: pointer ;  
     text-align: center ;  
     padding-bottom: .2em ;  
     will-change: contents ;  
     transition: width var(--cubic-header) ;  
     animation: calc(var(--duration) / 2) var(--cubic-slider-context) ;  
   }  
   @keyframes opacity {  
     0% {  
       opacity: 0 ;  
     }  
     90%{  
       opacity: 1 ;  
     }  
   }  
   .player__controls.move .slider__context{  
     width: 49.48% ;  
   }  
   .player__title {  
     font-size: .7em ;  
     font-weight: bold ;  
     color: rgba(248, 248, 248, 0.76) ;  
   }  
   .progres {  
     width: 90% ;  
     height: .25em ;  
     cursor: pointer ;  
     border-radius: 1em ;  
     touch-action : none ;  
     background-color: #1f1f1f ;  
     transition: width var(--cubic-header) ;  
   }  
   .player__controls.move .progres{  
     width: 98% ;  
   }  
   .progres__filled {  
     width: 0% ;  
     height: 100% ;  
     display: flex ;  
     position: relative ;  
     align-items: center ;  
     border-radius: inherit ;  
     background-color: #ffab00 ;  
   }  
   .progres__filled::before {  
     right: 0 ;  
     width: .35em ;  
     content: " " ;  
     height: .35em ;  
     border-radius: 50% ;  
     position: absolute ;  
     background-color: #ffffff ;  
   }  
   .player__playlist {  
     height: 100% ;  
     overflow: auto ;    
     padding: 1.05em .9em 0 1.2em ;   
   }  
   .player__playlist::-webkit-scrollbar {  
     width: 0 ;  
   }  
   .player__song {  
   /*   gap: 0 .65em ; */  
     display: flex ;  
     cursor: pointer ;  
     margin-bottom: .5em ;  
     padding-bottom: .7em ;  
     border-bottom: .1em solid #a1a1a117 ;  
   }  
   .player__song .player__context {  
     line-height: 1.5 ;  
     margin-left: .65em ;  
   }  
   .player__song-name {
     font-size: .88em ;  
   }  
   .player__song-time {  
     font-size: .65em ;  
     font-weight: bold ;  
     color: #ffffff;
     height: fit-content ;  
     align-self: flex-end ;  
   }  
   .audio {  
     display: none !important ;  
   }