.hidden {
  display: none;
}

html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  padding: 0px;
  margin: 0;
  font-family: 'Pirate', cursive;
  background-image: url('dizzydee__a_black_background_image_of_pirates_or_a_pirate_ship__a79f7551-0ef0-4a94-b512-47e232d77794.png');
  background-size: cover; /* Make the background image cover the entire screen */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Do not repeat the background image */
  color: #fff;
}

h1, h2 {
  color: #f00;
}

form {
  margin: 20px 0;
}

label, input[type="number"] {
  display: block;
  margin-bottom: 10px;
}

input[type="submit"], button {
  background-color: #5CDB95;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
}

input[type="submit"]:hover, button:hover {
  background-color: #379683;
}

#instructions {
  margin-bottom: 20px;
}

#scoreboard {
  font-size: 1.5em;
  color: #FFD700;
  margin-bottom: 20px;
}

#winnersBoard {
  margin-top: 20px;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

#feedback.wrong {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

#scoreboard {
  animation: pop-in 0.6s ease-out both;
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.quit-button {
  animation: fade-out 1s ease-out both;
}

h1 {
  color: #f00;
}

input[type="submit"], button {
  background-color: #f00;
  color: #fff;
}

input[type="submit"]:hover, button:hover {
  background-color: #b00;
}

/* Add a scale animation to the buttons when they're clicked */
input[type="submit"]:active, button:active {
  animation: click 0.1s;
}

@keyframes click {
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Add a fade-in animation to the feedback messages */
#feedback {
  animation: fade-in 3s;
}

#gameContainer {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  display: flex; /* Example: Use flexbox for its children's layout */
  flex-direction: column; /* Children are laid out vertically */
  justify-content: center; /* Center children vertically */
  align-items: center; /* Center children horizontally */
}

.level2Background {
  background-image: url('dizzydee__a_background_image_of_pirates_burying_treasure_on_an__2cd868a3-8ee5-4ed2-8200-05ee61321d3f.png');
  /* Ensure the background covers the container */
  background-size: cover;
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Do not repeat the background image*/
}