@font-face {
  font-family: vcrosd;
  src: url("Commodore Pixelized v1.2.ttf");
}
  
:root {
  --turquoise-color: #2df6ec;
  --pink-color: #ee67f0;
  --darker-pink-color: #773079;
  --white-color: #fff;
  --dark-color: #2b1641;
}
  
body {
  background-color: var(--dark-color);
  font-size: 18pt;
  font-family: vcrosd;
}



#game,
#effects,
#gameOverScreen,
#topScoresScreen,
#pauseScreen,
#errorScreen {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 650px;
}

#gameCommands,
#gameInfo,
#gameOptions {
  position: absolute;
  border-left: none;
  padding: 15px;
}

#topScoresScreen > div > table {
  width: 380px;
  align-self: center;
}

#gameOverScreen > div > div {
  font-size: 32pt;
  animation: scale 2s linear, blink 2s infinite alternate;
}

#gameOverScreen > div > div+div {
  margin-top: 20px;
  font-size: 20pt;
  opacity: 0;
  animation: fadein 2s 1s ease-in normal forwards;
}

#gameOptions {
  top: 10px;
  left: 911px;
  width: 350px;
  height: 100px;
}  

#gameCommands {
  top: 140px;
  left: 911px;
  width: 350px;
  height: 200px;
}

#gameInfo {
  top: 370px;
  left: 911px;
  width: 350px;
  height: 260px;
}

#gameState {
  position: absolute;
  display: table;
  top: 20px;
  left: 10px;
  text-align: center;
  width: 900px;
}

#ammunition {
  position: absolute;
  display: table;
  bottom: 70px;
  left: 20px;
  text-align: left;
  width: 900px;
}

input[type='checkbox'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 3px solid var(--pink-color);
  box-shadow: 0px 0px 10px var(--pink-color), inset 0px 0px 5px var(--pink-color);
  margin: 0;
  margin-right: 0px;
  font-size: 14px;
  font-family: vcrosd;
}





.turquoise-borders {
  border: 1px solid var(--turquoise-color);
  box-shadow: 0px 0px 10px var(--turquoise-color), inset 0px 0px 5px var(--turquoise-color);
}

#gameOverScreen {
    display: table;
    z-index: 3;
}

#pauseScreen {
  display: table;
  z-index: 3;
}

#pauseScreen > div {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

#errorScreen {
  display: table;
  z-index: 9;
  background-color: var(--dark-color);
}

#errorScreen > div {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}



#pause {
  animation: buzz 1s infinite alternate, blink 1s infinite alternate;
  font-size: 28pt;
}

#topScoresScreen {
  z-index: 4;
  background-color: var(--dark-color);
}  

#topScoresScreen > div {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}  

#topScoresScreen > div > table > tr > td {
  text-align: left;
}
#topScoresScreen > div > table > tr > td+td {
  text-align: right;
}

#topScoresScreen > p {
  text-align: center;
}

#gameOverScreen > div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;    
}

#game {
  z-index: 1;
}

#effects {
  z-index: 2;
}

#gameOptions > p,
#gameCommands > p,
#gameInfo > p {
  margin-top: 0px;
} 

.table-cell {
  display: table-cell;
}

.pink-text {
  color: var(--pink-color);
  text-shadow: 0 0 10px var(--pink-color), 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px var(--pink-color), 0 0 100px var(--pink-color);
}

.pink-text .inactive {
  color: var(--darker-pink-color);
  text-shadow: none;
}

.turquoise-text {
  color: var(--turquoise-color);
  text-shadow: 0 0 10px var(--turquoise-color), 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px var(--turquoise-color), 0 0 100px var(--turquoise-color);
}

input[type='checkbox']:after {
  content: ' ';
  padding: 0px 2px 0px 2px;
}

input[type='checkbox']:checked:after {
	content: 'X';
}
  
@keyframes buzz {
  70% {
    opacity: 0.80;
  }
}
  
@keyframes blink {
  40% {
    opacity: 1;
  }
  45% {
    opacity: 0.8;
  }
  47% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 1;
  }
}   
  
@keyframes scale {
  0% {
    transform: scale(3);
  }
  25% {
    transform: scale(1);
  }
  27% {
    transform: scale(2);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}