h1{
  font-family: "Fontdiner Swanky";
  color: #8051ff;
  letter-spacing: 5px;
  border: 2px solid white;
  text-shadow: 2px 2px 2px black;
  text-align: center;

}
.box{
  display: inline-block;
	width: 500px;
  height: 40px;
  border: 2px solid rgba(24, 221, 83, 1);
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
  position: absolute;
  
}

#button1
{
  animation: button1 5s infinite;
  position: relative;
  left: 0px;
	top: 0px;
  background: yellow;
  box-shadow: 2px 2px 2px black;
}
#button2{
  animation: button2 5s infinite;
  background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  position: relative;
  left: 0px;
	top: 0px;
}
#button3{
  animation: button3 5s infinite;
  background: linear-gradient(orange, purple);
  position: relative;
  left: 0px;
	top:0px;
}
#button4{
  animation: button4 5s infinite;
  background: linear-gradient(teal, blue, purple);
  position: relative;
  left: 0px;
	top: 0px;
}
#button5{
  animation: button5 5s infinite;
  background: red;
  position: relative;
  left: 0px;
	top:0px;
}
#button6{
  animation: button6 5s infinite;
  background: magenta;
  position: relative;
  left: 0px;
	top:0px;
}
#button7{
  animation: button7 5s infinite;
  background: black;
  position: relative;
  left: 0px;
	top: 0px;
}
#button8{
  animation: button8 5s infinite;
  background: linear-gradient(white, grey);
  position: relative;
  left: 0px;
	top: 0px;
}
/*buttons*/
@-webkit-keyframes button1 {
  0% {
    transform: scale(1);
  }
    25%{
      transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button2 {
  0% {
    transform: scale(1);
  }
  25%{
      transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button3 {
  0% {
    transform: scale(1);
  }
    25%{
    transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button4 {
  0% {
    transform: scale(1);
  }
    25%{
    transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button5 {
  0% {
    transform: scale(1);
  }
    25%{
    transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button6 {
  0% {
    transform: scale(1);
    background: magenta;
  }
    25%{
    transform: scale(1,2);
      background: pink;
  }
  50% {
    transform: scale(2,1);
    background: chartreuse;
  }
}
@-webkit-keyframes button7 {
  0% {
    transform: scale(1);
  }
    25%{
    transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
@-webkit-keyframes button8 {
  0% {
    transform: scale(1);
  }
    25%{
    transform: scale(1,2);
  }
  50% {
    transform: scale(2,1);
  }
}
body{
  height: 1000px;
  background: radial-gradient(blue, green, yellow, orange, red);
  font-family: "Hanalei Fill";
  text-align: center; 
}
p{
  display: inline-block;
	width: 500px;
  height: 40px;
  box-shadow: 2px 2px 2px black;
  border: solid black;
  border-radius: 1em;
  background-color: #ffffff;
  text-align: center; 
  font-family: Courier;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
#title{
  
background: linear-gradient(yellow, orange);
box-shadow: 2px 2px 2px black;
}

 /*Letter Critters*/
@keyframes lettercritters {
	0%{
		left: 0px;
    top:0px;
  }
  25%{
    left: 50px;
    top: -10px;
  }
   50%{
    left: 0px;
    top: 0px;
  }
   75%{
    left: -50px;
    top: 10px;
  }
  100%{
    left: 0px;
    top: 0px;
    }
 }
  #lettercritters{
    position: relative;
    animation: lettercritters 6s infinite;
}
#lettercritters2{
    position: relative;
    animation: lettercritters2 6s infinite;
}
#lettercritters3{
    position: relative;
    animation: lettercritters3 6s infinite;
}
#lettercritters4{
    position: relative;
    animation: lettercritters4 6s infinite;
}
@keyframes lettercritters2 {
	0%{
		left: 0px;
    top:0px;
  }
  25%{
    left: -50px;
    top: 10px;
  }
   50%{
    left: 0px;
    top: 0px;
  }
   75%{
    left: 50px;
    top:-10px;
  }
  100%{
    left: 0px;
    top: 0px;
    }
}
  @keyframes lettercritters3 {
	0%{
		left: 0px;
    top:0px;
  }
  25%{
    left: 50px;
    top: -10px;
  }
   50%{
    left: 0px;
    top: 0px;
  }
   75%{
    left: -50px;
    top: 10px;
  }
  100%{
    left: 0px;
    top: 0px;
    }
}
  @keyframes lettercritters4 {
	0%{
		left: 0px;
    top:0px;
  }
  25%{
    left: -50px;
    top: 10px;
  }
   50%{
    left: 0px;
    top: 0px;
  }
   75%{
    left: 50px;
    top:-10px;
  }
  100%{
    left: 0px;
    top: 0px;
    }
  }