body { 
    background-color: lightgreen; 
    transition: background-color .5s; 
  } 
  .player { 
    height: 95vh; 
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    justify-content: center; 
  } 
    
  .details { 
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    justify-content: center; 
    margin-top: 25px; 
  } 
    
  .track-art { 
    margin: 25px; 
    height: 250px; 
    width: 250px; 
    background-image: URL( 
       "https://source.unsplash.com/Qrspubmx6kE/640x360"); 
    background-size: cover; 
    background-position: center; 
    border-radius: 15%; 
  } 
  .now-playing { 
    font-size: 1rem; 
    font-family: 'Balsamiq Sans', cursive;
  } 
    
  .track-name { 
    font-size: 3rem; 
    font-family: 'Balsamiq Sans', cursive;
  } 
    
  .track-artist { 
    font-size: 1.5rem; 
    font-family: 'Balsamiq Sans', cursive;
  } 
  .buttons { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
  } 
    
  .playpause-track, 
  .prev-track, 
  .next-track { 
    padding: 25px; 
    opacity: 0.8; 
    transition: opacity .2s; 
  } 
  .playpause-track:hover, 
  .prev-track:hover, 
  .next-track:hover { 
    opacity: 1.0; 
  } 
  .slider_container { 
    width: 75%; 
    max-width: 400px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
  } 
  .seek_slider, .volume_slider { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height: 5px; 
    background: black; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s; 
  } 
  .seek_slider::-webkit-slider-thumb, 
  .volume_slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    width: 15px; 
    height: 15px; 
    background: white; 
    cursor: pointer; 
    border-radius: 50%; 
  } 
  .seek_slider:hover, 
  .volume_slider:hover { 
    opacity: 1.0; 
  } 
    
  .seek_slider { 
    width: 60%; 
  } 
    
  .volume_slider { 
    width: 30%; 
  } 
    
  .current-time, 
  .total-duration { 
    padding: 10px; 
  } 
    
  i.fa-volume-down, 
  i.fa-volume-up { 
    padding: 10px; 
  } 
  i.fa-play-circle, 
  i.fa-pause-circle, 
  i.fa-step-forward, 
  i.fa-step-backward { 
    cursor: pointer; 
  }