body {
  background-color: #222;
  color: #aaa;
  background-image: url("../assets/img/menubackground.png");
}

img {
  display: none;
}

#gameMenu {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

#startMenu,
#playerSelector,
#leaderBoard {
  flex-direction: column;
  gap: 20px;
  width: 200px;
}

#leaderBoard {
  align-items: center;
}
#startMenu {
  display: flex;
}

#playerSelector {
  display: none;
}

#leaderBoard {
  display: none;
}

#settings {
  display: none;
  flex-direction: column;
}

.playerSettings {
  width: 400px;
}
.playerSettings div {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-left: 50px;
  border: 1px solid black;
}

.playerSettings h1,
h2 {
  font-size: x-large;
}

.playerSettings h2 {
  color: white;
}

#game {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  max-width: 900px;
  max-height: 900px;
  display: none;
  border: black 5px solid;
}

canvas {
  max-width: 100%;
  max-height: 100%;
}

.timerBox {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 3%;
  background-color: black;
}
#timer {
  width: 100%;
  height: 100%;
  background-color: red;
}

#livesDisplay {
  position: absolute;
  top: 4%;
  width: 10%;
  height: 3%;
  background-color: black;
}
#livesDisplay2 {
  position: absolute;
  display: none;
  top: 4%;
  right: 0;
  width: 10%;
  height: 3%;
  background-color: black;
}

#powerUps {
  position: absolute;
  top: 8%;
  width: 10%;
  height: 3%;
  background-color: black;
}

#scoreDisplay {
  position: absolute;
  top: 8%;
  right: 0%;
  width: 10%;
  height: 3%;
  background-color: black;
}

#GameOverScreen {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 250px;
  background-color: #222;
  align-items: center;
}

#pauseScreen {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 250px;
}

.leaderBoardConatiner {
  background-color: rgb(63, 63, 63);
  width: auto;
}

#scoresContainers {
  display: flex;
  flex-direction: column;
}

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

.score div {
  border: #222 solid 1px;
  padding: 20px;
  width: 80px;
}