body {
  font-size: 20px;
  font-family: "Patua One", calibri, arial, sans-serif;
  background: #000;
}
#characters{
  font-size: 15px;
}
h1 {font-size: 30px;}
h2 {font-size: 24px; margin-bottom: 10px;}
#container {
  background: #a7cfdf; 
  background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); 
  background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); 
  background: -o-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); 
  background: -ms-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); 
  background: linear-gradient(top,  #a7cfdf 0%,#23538a 100%);   
  outline: 0;
}
#intro h1 span {
  text-indent: -2000px;
  background: url(../img/shield.png) no-repeat center 20px;
  height: 130px;
  display: block;
}
#gameover h1{
  background: url(../img/brokenshield.png) no-repeat center 20px;
  padding-top: 150px;
  text-align: center;
  text-transform: uppercase;
}
#intro ul, #intro p, #gameover p {
  width: 80%;
  margin: 10px auto;
}
#intro p {
  font-size: 16px;
  margin: 20px auto;
  text-align: center;
}
#intro h1 {
  text-align: center;
  font-size: 30px;
  text-transform: uppercase;
}
#intro button, #gameover button, #characters button {
  display: block;
  width: 100%;
  font-family: "Patua One", calibri, arial, sans-serif;
  margin: 20px 0; 
  font-size: 20px;
  line-height: 30px;
  border: none;
  background: #e6f0a3; 
  background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); 
  background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); 
  background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); 
  background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); 
  background: linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); 
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.7);
  border-radius: 5px;
}
#intro button:hover, #intro button:focus, #gameover button:hover, #gameover button:focus {
  box-shadow: 0 6px 5px -5px rgba(0, 0, 0, 0.7);
}
#player {
  display: block;
  margin: 5px auto;
}
.right, .left {
  z-index: 10;
  line-height: 50px;
  width: 50px;
  border: none;
  border-radius: 5px;
  font-size: 25px;
  background: #9dd53a; 
  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); 
  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
  background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
}