/*
Name: Rafael Agas
Date:  19 April 2018
Section: CSE 154 AA

This is the css code that will style index.html
*/

@import url('https://fonts.googleapis.com/css?family=Meddon|Comfortaa');

.container {
   margin: auto;
   box-sizing: border-box;
   max-width: 60%;
   text-align: center;
   padding-bottom: 10px;
   padding-top: 10px;
}


h1 {
   text-align: center;
   font-size: 46pt;
   font-family: "Meddon", cursive;
   margin-bottom: 10px;
}


.letter, .button {
   font-size: 32pt;
   font-family: "Comfortaa", cursive;
   border-style: solid;
   border-color: black;
}

.button {
 padding: auto;
 margin: auto;
 border: auto;
}

#background {
   background-image: url("background.jpg");
}

#content {
   max-width: 90%;
   background-color: #eae0c8;
   margin: auto;
   box-shadow: 5px 5px #1a1a1a;
   border-radius: 5px;
   heigh: auto;
}

/* sets the animation and duration*/
.backgroundAnimate {
   animation-name: rainbow;
   animation-duration: 20s;
   animation-iteration-count: infinite;
}

/* sets the parameters for the animation to display on the content area*/
@keyframes rainbow {
   0%   {background-color:  #ff0000;}
   14.3%  {background-color: #FF7F00;}
   28.6%  {background-color: #ffff00;}
   42.9% {background-color: #00ff00;}
   57.2% {background-color:  #0000ff;}
   71.5% {background-color:  #4B0082;}
   100% {background-color: #9400D3;}
}

/*changes the background color when the user hovers the element*/
div#R:hover, .red {
      background-color: #ff0000;
}

/*changes the background color when the user hovers the element*/
div#O:hover, .orange {
   background-color: #FF7F00;
}

/*changes the background color when the user hovers the element*/
div#Y:hover, .yellow {
   background-color: #ffff00;
}

/*changes the background color when the user hovers the element*/
div#G:hover, .green {
   background-color: #00ff00;
}

/*changes the background color when the user hovers the element*/
div#B:hover, .blue {
   background-color: #0000ff;
}

/*changes the background color when the user hovers the element*/
div#I:hover, .indigo {
   background-color: #4B0082;
}

/*changes the background color when the user hovers the element*/
div#V:hover, .violet {
   background-color: #9400D3;
}

/*returns the content area back to its original color*/
.clear {
   background-color: #eae0c8;
}

h2 {
   text-align: center;
   font-size: 38pt;
   font-family: "Comfortaa", cursive;
   margin-bottom: 10px;
}