body {
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Press Start 2P', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: url('assets/congruent_outline.png');
  animation: 60s ease-out infinite pizzaz;
  --text-color: white;
  --background-color: #333;
  --game-text-color: black;
}

@keyframes pizzaz {
  0% {background-position-x: 0%; background-position-y: 0%;}
  25% {background-position-x: 200%; background-position-y: 200%;}
  50% {background-position-x: 400%; background-position-y: -200%;}
  75% {background-position-x: 0%; background-position-y: 100%;}
  100% {background-position-x: 0%; background-position-y: 0%;}
}

a {
  color: #0af;
}

#game-container {
  display: flex;
  align-items: stretch;
}

#gameplay-area {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-screen {
  color: black;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

#game-canvas {
  width: 100vw;
  height: 56.25vw;
  max-height: 100vh;
  max-width: 177.777777vh;
}

#credit-display {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 50px;
}

button {
  font-family: inherit;
  background-color: transparent;
  padding: 1em;
  min-width: 50px;
  color: white;
  border: 2px solid white;
  outline: none;
  margin: 1em;
}

input[type="text"] {
  margin: 1em;
  padding: 0.5em;
  border-radius: 3px;
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

button.selected, button:hover, button:active {
  font-family: inherit;
  background-color: transparent;
  padding: 1em;
  min-width: 50px;
  color: black;
  background-color: white;
  outline: none;
}

#game-menu, #game-over-view, #pause-view, #high-scores-display, .prompt-screen, #controls-menu, noscript {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  color: white;
}

.score-entry {
  margin: 1em;
}

#game-over-view, #pause-view {
  background-color: rgba(0,0,0,0.7);
}

.hidden {
  display: none !important;
}

.prompt-screen {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  padding: 3em;
  color: white;
  background-color: rgba(0,0,0,0.7);
}

.row {
  display: flex;
  flex-direction: row;
}

#game-overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  pointer-events: none;
}

#game-overlay > * {
  pointer-events: all;
}

#volume-toggle {
  z-index: 10000;
  color: rgba(255,255,255,0.8);
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.75em;
}

#volume-toggle > .volume-on, #volume-toggle.on:hover > .volume-on {
  display: none;
}

#volume-toggle.on > .volume-on, #volume-toggle:hover > .volume-on { 
  display: inline-block;
}

#volume-toggle > .volume-off {
  margin: 0 0.625em 0 0;
}

#volume-toggle > .volume-off, #volume-toggle.on:hover > .volume-off {
  display: inline-block;
}

#volume-toggle.on > .volume-off, #volume-toggle:hover > .volume-off {
  display: none;
}