* {
  background-color: antiquewhite;
  font-family: "Patrick Hand", cursive;
}

/* Homepage Section Components */
#homeSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
}

#playerName {
  width: 400px;
  padding: 5px;
}

#startGameButton {
  cursor: pointer;
  width: 150px;
  height: 85px;
  font-size: 30px;
  top: -8px;
  position: relative;
  background-color: black;
  color: white;
}

.hidden {
  display: none !important;
  /* compeltely removes the game section so there is no empty space at the top */
}

#welcomeMessage {
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
}
/* Game Section Components */
h1 {
  font-family: "Patrick Hand", cursive;
  font-size: 40px;
}

#select-difficulty {
  width: 150px;
  height: 50px;
  font-family: "Patrick Hand", cursive;
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

input {
  height: 70px;
  width: 90px;
  font-size: 50px;
}

#word-display {
  border: 10px solid black;
  padding: 80px;
  margin: 20px;
  width: 300px;
  font-size: 30px;
  text-align: center;
  font-family: "Patrick Hand", cursive;
  background-color: white;
}

#box {
  display: flex;
  /* container aligned into a column format */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#guessinput {
  width: 250px;
}

#buttondiv {
  display: flex;
  flex-direction: row;
}

#submit {
  height: 80px;
  width: 90px;
  margin: 20px;
  padding: 10px;
  font-size: 20px;
  border-radius: 20px;
  background-color: green;
  color: white;
  font-family: "Patrick Hand", cursive;
  cursor: pointer;
}

#submit:hover {
  background-color: white;
  color: green;
}

#refresh {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 10px;
  font-size: 20px;
  border-radius: 20px;
  background-color: white;
  font-family: "Patrick Hand", cursive;
  cursor: pointer;
}

#reset {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 10px;
  font-size: 20px;
  color: white;
  border-radius: 20px;
  background-color: blue;
  font-family: "Patrick Hand", cursive;
  cursor: pointer;
}

#music {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 10px;
  font-size: 20px;
  color: black;
  border-radius: 20px;
  background-color: white;
  font-family: "Patrick Hand", cursive;
  cursor: pointer;
}

#highscore,
#score,
#timer {
  font-size: 30px;
  margin-top: 5px;
  font-family: "Patrick Hand", cursive;
}

#highscore,
#score {
  background-color: white;
}

#score-section {
  display: flex;
  justify-content: center;
  background-color: white;
  gap: 2em;
  border-color: black;
  border-width: thick;
  border-style: solid;
  padding: 15px;
  border-radius: 20px;
}

/* #timeisup {
  font-size: 30px;
  margin-top: 5px;
  font-family: "Patrick Hand", cursive;
} */

#instructions {
  text-align: center;
  max-width: 800px;
  font-size: 30px;
  font-family: "Patrick Hand", cursive;
}

.hidden {
  visibility: hidden;
}

#result {
  font-weight: bold;
  font-size: 30px;
}

#win-popup {
  padding: 20px;
  background: white;
  width: 400px;
  height: 250px;
  text-align: center;
  border-radius: 20px;
  box-sizing: border-box;
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 15px 5px rgba (0, 0, 0, 0.9);
  display: none; /* makes the popup disappear on default  */
}

#close-button {
  font-size: 50px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  background-color: white;
}

#win-popup h2 {
  margin-top: 50px;
  background-color: white;
  font-size: 35px;
}

#popup-background {
  background-color: rgba(0, 0, 0, 0.8);
  /* Stacking order z index */
  z-index: 1000;
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* pinned to the top left of thte viewport screen */
  top: 0;
  left: 0;
  display: none;
}

canvas {
  /* no matter other rules, must use this position */
  position: fixed !important;
  /* Need the confetti to be at the front of the popup */
  z-index: 1005 !important;
}