* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#startButton, #resetButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 18px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2;
}

#resetButton {
  display: none; /* Inicialmente esconde o botão de reset */
}

#score {
  position: absolute;
  font: normal 20pt Arial;
  color: #fafaf9;
  top: 20px;
  left: 20px;
}

.game-board {
  width: 100vw;
  height: 100vh;
  border-bottom: 10px solid green;
  margin: auto;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#87ceeb, #e0f6ff);
}

.pipe {
  position: absolute;
  bottom: 0;
  height: 15vh;
  animation: pipe-animation 1s infinite linear;
}

.clouds {
  width: 60vw;
  position: absolute;
  animation: clouds-animation 20s infinite linear;
}

.mario {
  height: 28vh;
  position: absolute;
  bottom: 0;
}

.jump {
  animation: jump 500ms ease-out;
}

@keyframes jump {
  0% { bottom: 0; }
  40%, 50%, 60% { bottom: 36vh; }
  100% { bottom: 0; }
}

@keyframes pipe-animation {
  from { right: -15vw; }
  to { right: 100%; }
}

@keyframes clouds-animation {
  from { right: -100vw; }
  to { right: 100%; }
}

/* Estilos responsivos */
@media (max-width: 768px) {
  #startButton, #resetButton {
    font-size: 16px;
    padding: 8px 16px;
  }

  #score {
    font-size: 16pt;
  }
}