body {
  font-family: "Coda Caption";
  background-color:rgb(0, 0, 0);
}

/* Spash screen */
@keyframes fadeSplashContainerIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
#splash-container {
  width: 100%;
  background-color: #5b82cc;
  background-image: linear-gradient(#5b82cc, rgb(0, 0, 0));
  color: white;
  text-shadow: 0px 0px 1px black;
  animation: fadeSplashContainerIn 2s forwards;
}
#title-container {
  margin-top: 2em;
}
#title-container h1 {
  font-size: 2.7rem;
  padding: 0 0.4rem 0.4rem 0.4rem;
}
.subtitle {
  margin-bottom: 2rem;
}
#start-button {
  font-family: "Coda Caption";
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* Game screen */
@keyframes fadeGameContainerIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
#game-container {
  animation: fadeGameContainerIn 2s forwards;
}

/* Game over screen */
@keyframes scrollGameOverContainerIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
#game-over-container {
  width: 100%;
  background-color: #5b82cc;
  background-image: linear-gradient(#5b82cc, rgb(0, 0, 0));
  color: white;
  text-shadow: 0px 0px 1px black;
  animation: scrollGameOverContainerIn 2s forwards;
}
#game-over-container h1 {
  font-size: 2.7rem;
  padding: 0 0.4rem 0.4rem 0.4rem;
}
#highscore-container ul {
  font-family: monospace;
  font-size: 2rem;
  padding-left: 0;
  list-style-type: none;
}
#highscore-container h1 {
  margin-bottom: 0;
}
#restart-button {
  font-family: "Coda Caption";
  font-size: 0.9rem;
}

/* Main classes */
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.flex-container2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.is-fixed-container-height {
  height: 580px;
}
.is-cursor-on {
  cursor: auto;
}
.is-cursor-off {
  cursor: none;
}
.is-display-off {
  display: none;
}