html {
  font-size: 100%;
}

* {
  font-size: 1rem;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
  /* disable double-tap-to-zoom */
  touch-action: manipulation;
}

button {
  color: black; /* iOS Safari defaults to light blue text if we don't set it explicitly. */
}

#menu div {
  margin: 0.5em;
}

#menu div button {
  margin-top: 0.2em;
  /* Mark wrote the next 2 lines, Matt feel free to upgrade! */
  background-color: white;
  border-radius: 1em;
}

#free-decks div button {
  background-color: greenyellow;
}

#simple-math div button {
  background-color: green;
}

#fractions-decimals-percents div button {
  background-color: teal;
}

#powers-and-roots div button {
  background-color: aqua;
}

#factors-and-multiples div button {
  background-color: violet;
}

#challenging-math div button {
  background-color: blueviolet;
}

#app {
  display: none;
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

/* Main Display for Top Row Styles */
.student-stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5px;
  row-gap: 5px;
  height: 30px;
  margin-bottom: 1px;
}

/* Individual Displays for Top Row Styles*/
.points-display {
  background-color: rgb(247, 195, 100);
  font-weight: 700;
  margin-bottom: 1px;
}

.student-name-display {
  background-color: rgb(225, 225, 144);
  font-weight: 700;
  margin-bottom: 1px;
}

.proficiency-display {
  background-color: rgb(173, 244, 173);
  font-weight: 700;
  margin-bottom: 1px;
}

/* Container and Display for Timer Styles */
.timer-container {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 5px;
  row-gap: 5px;
  height: 30px;
  margin-bottom: 1px;
}

.timer-display {
  background-color: rgb(88, 88, 111);
  font-weight: 700;
  margin-bottom: 1px;
}

/* Container and Display for Flashcards Styles */

.flashcard-container {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 5px;
  row-gap: 5px;
  height: 130px;
  margin-bottom: 1px;
}

.flashcard-display {
  background-color: rgb(156, 111, 198);
  font-size: 35px;
  border-radius: 10px;
  margin-bottom: 1px;
}

/* Container and Display for Student Response and Correct Answer Styles*/
.response-and-answer-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1px;
  row-gap: 1px;
  height: 60px;
  margin-bottom: 1px;
}

.response-display {
  background-color: rgb(133, 133, 73);
  font-size: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  max-width: 50vw;
}

.answer-display {
  background-color: rgb(200, 148, 74);
  font-size: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

/* Container for Keypad Styles - 4 Rows, 3 Columns */

.keypad-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1px;
  row-gap: 1px;
}

/* Why is there no hyphen between "keypad-container" and "button"? */
.keypad-container button {
  height: calc((100vh - 300px) / 4);
  font-size: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}

.special-button {
  background-color: rgb(200, 148, 74);
}

.num-button {
  background-color: rgb(156, 111, 198);
  color: whitesmoke;
}

.num-button:hover {
}

.op-button {
  background-color: rgb(133, 133, 73);
}

.go-button {
  background-color: green;
  color: white;
}

.go-button:hover {
}

.pi-image {
  height: 60px;
}

.square-root-image {
  height: 60px;
}

.progress {
  width: 100%;
  height: 25px;
  position: relative;
}

.progress-inner {
  background: green;
  position: absolute;
  width: 100%;
  height: 100%;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 24px;
  z-index: 1000; /* Ensure it's on top */
}

.spinner {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}