/* Space out content a bit */
body {
  width: 760px;
  padding-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Raleway', sans-serif;
}

div {
  border: 2px solid white;
}

div#layer1 {
  /* perspective: 200px; */
}

@keyframes persp {
  0% {perspective: 10px;}
  100% {perspective: 200px;}
}


h1 {
  font-size: 60px;
  font-weight: normal;
  color: white;
  font-family: 'Josefin Sans';

}

hr {
  margin: 1ex;
}

p {
  clear:both;
}

.lead {
  text-align: right;
  font-size: 18pt;
}
.negative {
  background-color: black;
  color:white;
  font-family: 'Josefin Sans';
  padding: .3ex;

}

.negative2 {
  font-size: 40px;
  background-color: black;
  color: red;
  font-family: 'Josefin Sans';
  padding: 1ex;
 
}

header {
   transform: rotate(4deg);
}


.yes {
  background-color: black;
  padding: 1ex;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

input {
  text-align: center;
}

input[type=button], input[type=submit], input[type=reset] {
  border: none;
  background-color: limegreen;
  padding: 1ex;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: .15s;
  box-shadow: -10px -5px black;


}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
  background-color: magenta;
  transform: translate(-10px, -5px);
  box-shadow: none;
  transition: .05s;
  }

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
}

input[type=text], input[type=password] {
  margin: 1ex;
  font-size: 18pt;
  color: black;
  border: none;
  border-bottom: 2px solid black;
  padding: 1ex;
}

.logpass {
  text-size: 18px;
}

.theforms {
  text-align: center;
}


.bold {
  font-size: 18px;
  margin-top: 2em;
  font-weight: bold;
  font-style: italic;
}

#selectmonth {
  font-size: 24px;
}

div#spinner {
  border: none;
  text-align: center;
  font-size: 48pt;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes spin {
  0% {transform: rotatey(0deg) rotate(0deg)}
  100% {transform: rotatey(360deg) rotate(360deg)}
}


div#queuestatus {
  text-align: right;
  width: 75%;
  margin: 1em;
  font-size: 24px;
/*  transform: rotate3d(0,1,1,-8deg); */
  background: black;
  color: white;
}

#queuestatus strong {
  display: inline-block;
  font-size: 44px;
  color: black;
  background: white;
  transform: rotate(4deg);
}

div#oldeststatus {
  padding: 1ex;
  width: 50%;
  font-size: 24px;
  perspective: 400px;
  background: black;
  color: white;
  float: left;
}

#oldeststatus strong {
  display: inline-block;
  font-size: 40px;
  color: black;
  background: white;
  transform: rotate(-3deg);
}

div#neweststatus {
  padding: 1ex;
  width: 40%;
  font-size: 24px;
  perspective: 400px;
  background: black;
  color: white;
  float: right;
}

#neweststatus strong {
  display: inline-block;
  font-size: 40px;
  color: black;
  background: white;
  transform: rotate(4deg);
}

p#enteryouremail {
  font-size: 24px;
  font-style: bold;
}

div#results {
  width: 75%;
  position: absolute;  
  left: 12.5%;
  top: 20%;
  color: white;
  border-top: 15px solid orange;
  border-bottom: 15px solid orange;
  background: black;
  margin: 0;
  padding: 1em;
  font-size: 18pt;
}

#results h1 {
  padding: 5px;
  font-size: 36pt;
  background-color: white;
  color: black;
  border-top: 4px dotted black;
  border-bottom: 4px dotted black;
  text-align: center;
}

footer {
  padding: 3em;
  z-index: -1;
  color: black;
  background: white;
  height: 100%;
  vertical-align:bottom;
}