body {
  background-color: #000040;
  font-family: 'Aldrich', sans-serif;
  color: white;
  overflow: hidden;
  margin: 0em;
  padding: 0em;
}

#startpage {
  
  width: 80ex;
  margin: 5% auto;
  text-align: center;
  font-size: 20px;
}

#mainbar {
  height: 3ex;
  background-color: #007fe1;
  border-top: 3px solid #003ae1;
  border-bottom: 3px solid #003ae1;
  color: white;
  margin-bottom: 3.75ex;
  padding-top: .5ex;

}

#mainbar a {
  color: white;
  border: none;
  text-decoration: none;
}

#mainbar a:visited {
  color: white;
  text-decoration: none;
}

#mainname{
  float: left;
  margin-top: 6px;
}

#menu{
  width: 100%;
  height: 40px;
  background-color: #007fe1;
  color: white;
  border-bottom: 3px solid #003ae1;
}

#menu a {
  color: white;
} 

#menu a:visited {
  color: white;
}

.difficulty {
  float: right;
  margin-top: 4px;
}

#extreme {
  margin-right: 10px;
  margin-left: 5px;
}

#hard {
  margin-left: 5px;
  margin-right: 5px;
}

#medium {
  margin-left: 5px;
  margin-right: 5px;
}

#easy {
  margin-right: 5px;
  background-color: #00B0E1; 
}

h1 {
  margin: auto;
  font-size: 51px;
  color: #003ae1;
}

h2 {
   font-size: 51px;
   margin-top: -60px;
   margin-bottom: 10px;
   color: #007fe1;
   /*border-bottom: 4px ridge #007fe1;*/
}

#pntcounter{
  border-right: 4px solid #003ae1;
  border-left: 4px solid #003ae1;
  padding-right: 3px;
  padding-left: 3px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

#playfield {
  width: 100%;
  position: absolute;
}

#begin {
  position: fixed; 
  top: 43%;
  left: 40%;
  font-size: 500%;
  color: #dded00;
  font-style: italic;
  padding: 1ex;
}

#gameover {
  display: none;
  background-color: #000040;
  position: fixed;
  width: 88%;
  height: 80%;
  top: 10%;
  left: 5%;
  font-size: 200%;
  color: #dded00;
  font-style: oblique;
  padding: 5px;
  z-index: 2000;
  border: 2px solid #dded00;
}

#wingame {
  display: none;
  position: fixed;
  background-color: #000040;
  width: 88%;
  height: 80%;
  top: 10%;
  left: 5%;
  font-size: 200%;
  color: #dded00;
  font-style: oblique;
  padding: 5px;
  border: 2px solid #dded00;
  z-index: 2000;
}

.centering {
  text-align: center;
  top: 45%;
  left: 45%;
}

.centering p {
  width: 60ex;
  margin: 10% auto;
}

h3 {
  font-size: 350%;
  color: #003ae1;
}


#problems {
  position: absolute;	
  width: 25%;
  height: 100%;	
  background-color: #808080;
  border-right: 1px solid #808080;
}

#game {
  position:absolute; left:25%;	
  width: 75%;
  height: 100%;	
}

#problem1{
  height: 33%;
  position: absolute;
  width: 100%;
  background-color: #808080;
}

#problem2{
  height: 33%;
  top: 33%;
  position: absolute;
  width: 100%;
  background-color: #808080;
}

#problem3{
  height: 33%;
  top: 66%;
  position: absolute;
  width: 100%;
  background-color: #808080;
}

#row1 {
  height: 33%;
}

#row2 {
  height: 33%;
}

#row3 {
  height: 33%;
}

#spaceship1 {
  position: absolute; right: 100%;
  height: 33%;
}

#spaceship2 {
  position: absolute; right: 0%;
  height: 33%;
}

#spaceship3 {
  position: absolute; right: 0%;
  height: 33%;
}
#spaceship4 {
  position: absolute; right: 0%;
  height: 33%;
}

.problem {
  font-size: 60px; 
}

.bigguns {
  position: absolute;  
  width: 112px;
  height: 33%; 
}

.topnumber {
  position: absolute;
  width: 60%;
  top: 20%;
  height: 20%; 
  left: 20%;
  text-align: right;
}

.sign {
  position: absolute;
  width: 20%;
  top: 40%;
  height: 20%; 
  left: 20%;
  text-align: right;
}

.bottomnumber {
  position: absolute;
  width: 40%;
  top: 40%;
  height: 20%; 
  left: 40%;
  text-align: right;
}

.input {
  position: absolute; 
  font-family: Aldrich;
  background-color: transparent;
  color: white;
  border: none;
  width: 60%;
  top: 60%;
  height: 20%; 
  left: 20%;
  text-align: right;
  border-top: 5px solid white;
  border-spacing: 5px 5px;
  font-size: 60px; 
}

.input:focus {
  outline: 2px solid white;
}