/* Adding background color for the entire container */
body {
    background-color: lightgreen;
  
    /* Smoothly transition the background color */
    transition: background-color .5s;
  }
/* Styling for the main container */
  .player {
    height: 95vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
/* Adding styles for sub container */
  .details {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 25px;
  }
/* Adding height, width & other styles for image of song  */
  .track-art {
    margin: 25px 10px 25px 25px;
    height: 250px;
    width: 250px;
    background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
    background-size: cover;
    border-radius: 15%;
    box-shadow: 0px 0px 0px 15px rgba(244, 127, 1, 0.08);
    
  }
/* Adjust size for content of playing songs number out of total songs */
  .now-playing {
    font-size: 1rem;
  }
/* Song name styling */
  .track-name {
    font-size: 3rem;
    text-transform: capitalize;
  }
/* Artist name styling */
  .track-artist {
    font-size: 1.5rem;
    text-transform: capitalize;
  }
/* Buttons adjustments */
  .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
/* Padding and transition stylings for track buttons */
  .playpause-track, .prev-track, .next-track {
    padding: 25px;
    opacity: 0.8;
    /* Smoothly transition the opacity */
    transition: opacity 0.5s;
  }
/* hovers over a cursor is pointed on buttons */
  .playpause-track:hover, .prev-track:hover, .next-track:hover {
    opacity: 0.5;
    background-color: transparent;
    border-radius: 30px;
  }
/* Styling the seek slider and volume slider */
  .slider_container {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  /* Modify the appearance of the slider */
  .seek_slider, .volume_slider {
    -webkit-appearance: none; /* Removes default apearance for different browsers */
    -moz-appearance: none; /* Removes default apearance for different browsers */
    appearance: none; /* Removes default apearance */
    height: 5px; 
    border-radius: 5px; /* Trims the edges of sliders */
    cursor: pointer;
    overflow: hidden; /*Extra appearance will be hidden*/ 
    transition: opacity 0.3s;
  }
  
/* Modify the appearance of the slider thumb */
  .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Removes default apearance for different browsers */
    -moz-appearance: none; /* Removes default apearance for different browsers */
    appearance: none; /* Removes default apearance */
    cursor: pointer; /* Changes the cursor to pointer */
    width: 20px;  
    height: 15px;
    box-shadow: -400px 0px 0px 400px #02bff3; /* Changes the color upto slider position */
    border-radius: 50%;
  }
/* hovers when pointing cursor on slider */
  .seek_slider:hover, .volume_slider:hover {
    opacity: 1;
  }
/* Width of seek slider i.e. 60% means 60% of total width */
  .seek_slider {
    width: 60%; /* 60/100 * 400 = 240px  */
  }
/* Width of volume slider i.e. 30% means 30% of total width */
  .volume_slider {
    width: 30%; /* 30/100 * 400 = 120px  */
  }
/* Text content of current time & total duration */
  .current-time, .total-duration {
    padding: 10px;
  }
/* Padding for volume buttons */
  i.fa-volume-down, i.fa-volume-up {
    padding: 10px;
  }
/* Changing cursor to pointer for track buttons */
  i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
    cursor: pointer;
  }
/* Responsive Design for Smaller Screens */
  @media (max-width: 600px) {
    .slider_container{
      width: 80%;
    }
  }