#tempsonglist {

background-color: pink;
margin-left: 20%;
margin-right: 20%;

}

#container {
margin-left: 20%;
margin-right: 20%;
background-color: #80ff80;
height: 1000px;
}
/*background-image: url("testpicture.jpg");*/



#header {
background-color: #4c994c;
height: 50px;
}


.mediaarea {


}




.songbox {
width: 90%;
text-align: center;
font-size: 30px;
font-family: italic;
padding-top: 20px;
}

.mediapause{
 background-image: url("play.png");
    background-repeat: no-repeat;
	text-align: center;
  height: 80px;
  width: 80px;
  background-color: yellow;
/* no backgournd color on final draft*/
	}

.mediaplay{
  }


.button {
  padding: 10px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #80ff80;
  border: none;
  border-radius: 20px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #59b259}

.button:active {
  background-color: #59b259;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/*https://www.w3schools.com/howto/howto_css_animate_buttons.asp*/

#musicplay{
  padding-top: 10px;
  margin-left: 40%;
}

.songnum{
font-size: 20px;
font-family: arial;
font-weight: bold;
padding-top: 30px;
}




h2{
	text-align: center;
	font-family: arial;
  font-size: 50px;
}



input{
	 width:100px;
    margin-left:auto;
    margin-right:auto;
}



p{
font-size: 25px;
font-family: verdana;
}

li{
padding-top: 20px;
margin-left: 30%;
font-size: 20px;
font-weight: bold;
}


.rainbowhead{

text-align: center;
font-size: 150px;
font-family: futura;
font-style: italic;
font-weight: bold;

background-color: #80ff80;
color:#313131;
/* expxlain colors above */

width:100%;
margin: 0 auto;

      
-webkit-animation:colorchange 8s infinite alternate;
    }
    @-webkit-keyframes colorchange {
      0% {
        
        color: blue;
      }
      
      10% {
        color: #8e44ad;
      }
      
      20% {
        color: #1abc9c;
      }
      
      30% {
        color: #d35400;
      }
      
      40% {
        color: blue;
      }
      
      50% {
        
        color: #34495e;
      }
      
      60% {
        
        color: blue;
      }
      
      70% {
        
        color: #2980b9;
      }
      80% {
     
        color: #f1c40f;
      }
      
      90% {
     
        color: #2980b9;
      }
      
      100% {
        
        color: pink;
      }
    }
/*code credited to https://codepen.io/raaasin/pen/quvHr*/