body {
  background-color: #011F3F;
}

@keyframes theBodyFrames {
  0%   { background-color:#011F3F }
  20%  { background-color:red; }
  80%  { background-color:red; }
  100% { background-color:#011F3F }
}

.theBodyError {
  background-color: #011F3F;
  animation-name: theBodyFrames;
  animation-duration: 300ms;
}

#theBody {
  background-color: #011F3F;
  display: block;
  height: 100vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.homer {
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: contain;
  height: 40vh;
  float: right;
}

.infoblock {
  display: block;
  float: left;
}

.mctitle {
  font-family: 'Bangers', cursive;
  font-size: 10vh;
  color: white;
  text-align: center;
  width: 40vw;
}

.mcscore {
  font-family: 'Bangers', cursive;
  font-size: 6vh;
  color: white;
  text-align: center;
  width: 40vw;
}

.keystart {
  font-family: 'Bangers', cursive;
  font-size: 4vh;
  color: white;
  text-align: center;
  width: 40vw;
}

#keystart {
  font-family: 'Bangers', cursive;
  font-size: 4vh;
  color: white;
  text-align: center;
  width: 40vw;
}

/*
.keystart {
  margin: 5%;
  text-align: center;
  color: white;
  font-size: 3rem;
  font-family: 'Press Start 2P', cursive;
}

.header {
  margin: 2%;
  text-align: center;
  color: white;
  font-size: 3rem;
  font-family: 'Press Start 2P', cursive;
  display: block;
}
*/

.score {
  margin: 2%;
  text-align: center;
  color: white;
  font-size: 2rem;
  font-family: 'Press Start 2P', cursive;
  display: block;

}

.buttcont {
  display: block;
  width: 50%;
  margin: auto;
  padding-top:5vh;
}

.buttrow {
  text-align: center;
}

.buttclass {
  margin: 25px;
  display: inline-block;
  height: 30vh;
  width:  30vh;
  border: 10px solid black;
  border-radius: 40px;
  filter: brightness(0.8);
}

@keyframes flashframes {
  0%   {box-shadow: 0 0 0    ghostwhite; filter: brightness(0.8);}
  20%  {box-shadow: 0 0 40px ghostwhite; filter: brightness(1);}
  100% {box-shadow: 0 0 0    ghostwhite; filter: brightness(0.8);}
}

.buttflash {
  box-shadow: 0 0 0  ghostwhite;
  animation-name: flashframes;
  animation-duration: 500ms;
}

@keyframes lightframes {
  0%   {filter: brightness(0.8); margin: 25px; border: 10px solid black;}
  20%  {filter: brightness(1); margin: 25px; border: 15px solid white;}
  100% {filter: brightness(0.8); margin: 25px; border: 10px solid black;}
}

.buttlight {
  filter: brightness(0.8);
  margin: 25px;
  border: 10px solid black;
  animation-name: lightframes;
  animation-duration: 400ms;
/*
  filter: brightness(1);
  margin: 20px;
  border: 15px solid white;
*/
}

#landscape-popup {
	display: none;
	position: fixed;
	height: 100vh;
	width: 100vw;
	background-color: black;
}

.popupimg {
	width: 90%;
	position: relative;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
	object-fit: contain;
}