/* CSS Tunes Style */
/* Base page settings */
   body {
  box-sizing: border-box;
  background-color: Black;
  color: forestgreen;
  font-family: Arial, sans-serif;
  text-align: center;
}

/* Header (Green banner) */
header {
  background-color: forestgreen;
  color: Black;
  text-align: center;
  padding: 0.1em 0;   /* .3em 0; */
  margin: 0;
  line-height: 80%;  
/*  border-radius: 15px; */
  background-image: radial-gradient(forestgreen,
                                  limegreen, black);
}

/* Header */
    h1 {
  background-color: white;
  padding: 25px auto; /* 5px auto */
  text-align: center;
  text-shadow: 3px 3px 3px dimgray;
  font-size: 2em;
/*  line-height: 1.2em;  */
  background-image: radial-gradient(#fff 25%,
                                #fff 60%, #2a4f32 15%);
}


     /* container for holding MP3 player */
    .container{
      display: block;
      justify-content: center;
      align-items: center;
      margin: 150px auto auto auto; 
      position: relative; /* Relative */
      width: 200px;
      height: 80px; 
      background-color: Black;
      color: Green;
      padding: 20px;
    
    }

/* Audio MP3 Player */
.player {
    width: 200px;
    background-color: white;
    color: black;
    margin: auto;
    position: absolute; 
    left: 2%;
    bottom:  70%;
    height: 60px; 
    padding: 20px; /* was 20 */
    background-image: radial-gradient(#090,
                                #fff, #2a4f32);
    border-radius: 10px;
}

/* Control & Button Styles */
.controls {
    back-ground: White;
    top: 20px; 
    border-radius: 5px;
    padding-bottom: 1px; /* add padding*/
    background-image: radial-gradient(#090,
                                #fff, #2a4f32);
    color: Green;
    align-text: center;   /* Centers items */
}
#play {
  background-color: white;
  background-image: radial-gradient(#090,
                                #fff, #2a4f32);
  color: black;
  font-weight: bold;
  border-radius: 5px;
  border: 1px solid green;
  text-align: center;
  padding: 5px auto 5px auto;
  margin-bottom: 10px;

}
  
  #pause{
    background-color: white;
    background-image: radial-gradient(#090,
                                #fff, #2a4f32);
    color: black;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid green;
    text-align: center;
    padding: 5px auto 5px auto;
    margin-bottom: 10px;
    margin-left: 8px;
    margin-right: 8px;
    
  }

    #next {
      background-color: white;
      background-image: radial-gradient(#090,
                                #fff, #2a4f32);
      color: black;
      font-weight: bold;
      border-radius: 5px;
      border: 1px solid green;
      text-align: center;
      padding: 5px auto 5px auto;
      margin-bottom: 10px;
      
    }

      #previous {
      background-color: white;
      background-image: radial-gradient(#090,
                                #fff, #2a4f32);
      color: black;
      font-weight: bold;
      border: 1px solid green;
      margin: 2px 20px;
      padding: 2px auto;
      border-radius: 5px;
      }  
     
        #volume {
          background-color: white;
          color: green;
          padding: 0px 10px 2px 10px; 
        }

.playlist {
    color: green;
    margin-top: 10px;
}

/* Download Styles */
a { 
   font-size: 0.8em; 
   text-decoration: none;
   font-weight: 700;
   text-shadow: 1px 1px 1px ivory;
   padding: 2px;
   border-radius: 2px;
   border: 1px solid lime;
}
a:link { color: lime; 
         text-shadow: 1px 1px 1px ivory; }
a:visited { color: lime;
         text-shadow: 1px 1px 1px ivory; }
a:active { color: lime; 
         text-shadow: 1px 1px 1px ivory; }

/* copyright */    
.footer { /* was text */
  position: absolute; /* Position the text absolutely */
  bottom: 0;         /* Align to the bottom */
  left: 50%;         /* Center horizontally */
  transform: translateX(-50%); /* Adjust for centering */
}