/*
font-family: 'Press Start 2P', system-ui;
*/
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background-image: url('../img/posibles-backgrounds/background-space.avif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

#start-panel,
#winGame-panel,
#gameOver-panel,
#scores-panel,
#canvas-game {
  width: min(768px, 100vw, 100vh);
  height: auto;
  aspect-ratio: 1 / 1;
}


#bgLogo {
  position: absolute;
  height: 8%;
  top: 2%;
  left: 44.5%;
}


.container-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#soundIcon {
  position: absolute;
  height: 6%;
  top: 12%;
  left: 5%;
}

#soundIconTwo {
  position: absolute;
  height: 6%;
  top: 12%;
  left: 5%;
}

.hidden {
  display: none;
}

#start-panel {
  background-image: url('../img/posibles-backgrounds/start-panel2.jpg');
  background-size: cover;
  position: relative;
}

#winGame-panel {
  background-size: cover;
  position: relative;
}

#button-start {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 85%;
  left: 52%;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #cc0000;
  text-align: center;
  color: black;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(216, 119, 0);
  opacity: 0.8;
}

#button-start:hover {
  background-color: #990000;
  opacity: 0.6;
}

#button-start:active {
  background-color: darkred;
  opacity: 0.4;
}

#gameOver-panel {
  background-image: url('../img/GameOver.jpg');
  background-size: cover;
  position: relative;
}

#button-restart,
.button-restartGame {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 85%;
  left: 45%;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #00cc2c;
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(0, 216, 126);
  opacity: 0.8;
}

.button-restartGame {
  left: 45%;
}

#button-restart:hover,
.button-restartGame:hover {
  background-color: #129900;
  opacity: 0.6;
}

#button-restart:active,
.button-restartGame:active {
  background-color: darkgreen;
  opacity: 0.4;
}

#scores-panel {
  background-image: url('../img/bgScore2.jpg');
  background-size: cover;
  position: relative;
}

.mainMenu,
.mainMenuTwo,
.button-mainMenuThree {
  position: absolute;
  bottom: 3%;
  right: 3%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #00adcc;
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(0, 130, 216);
  opacity: 0.8;
}

.mainMenu {
  top: 85%;
  left: 60%;
}

.button-mainMenuThree {
  left: 60%;
}

.mainMenu:hover,
.mainMenuTwo:hover,
.button-mainMenuThree:hover {
  background-color: #009499;
  opacity: 0.6;
}

.mainMenu:active,
.mainMenuTwo:active,
.button-mainMenuThree:active {
  background-color: rgb(0, 80, 100);
  opacity: 0.4;
}

.scores-list {
  position: absolute;
  top: 85%;
  left: 22%;
  padding: 0;
  background-color: black;
  opacity: 0.6;
}

.li-score {
  list-style: none;
  color: white;
  font-family: 'Press Start 2P', system-ui;
  font-size: 15px;
  margin-bottom: 7px;
}
.button-score,
.button-score-two,
.button-score-three {
  position: absolute;
  top: 85%;
  left: 37%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #cc7400;
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(172, 20, 0);
  opacity: 0.8;
}

.button-score-two {
  left: 30%;
}

.button-score-three {
  left: 30%;
}

.button-score:hover,
.button-score-two:hover,
.button-score-three:hover {
  background-color: #994500;
  opacity: 0.6;
}

.button-score:active,
.button-score-two:active,
.button-score-three:active {
  background-color: rgb(100, 45, 0);
  opacity: 0.4;
}

#user-name {
  width: 200px;
  height: 30px;
  position: absolute;
  top: 79%;
  left: 37%;
  border-radius: 15px;
  border: 1px solid green;
  box-shadow: 0 0 10px rgb(0, 190, 73);
  text-align: center;
  opacity: 0.8;
}

.backPanel {
  position: absolute;
  top: 85%;
  left: 3%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #007bce;
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(0, 91, 165);
  opacity: 0.8;
}

.backPanel:hover {
  background-color: #005c99;
  opacity: 0.6;
}

.backPanel:active {
  background-color: rgb(0, 63, 100);
  opacity: 0.4;
}