:root {
  --button-bg: #8787e3;
  --box-size: 18vmin;
  --font-color: black;
  --highlight-color: red;
  --button-radius: 5px;
  --box-radius: 10px;
}

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

#msg {
  color: hwb(0 3% 7%);
  font-size: 5vmin;
  background-color: blue;
}

.msg-container1 {
  display: inline-block;
  text-align: center;
  border: 2px solid black;
  padding: 1rem;
  border-radius: var(--box-radius);
  margin-top: 15px;
  background-color: blue;
}

.msg-container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.hide {
  display: none;
}

#standard-btn, #disappearing-btn {
  height: auto;
  width: auto;
  padding: 1vmin 5vmin;
  border-radius: var(--button-radius);
  font-size: 3vmin; /* Dynamic font size */
  background-color: var(--button-bg);
  margin: 10px;
  transition: all 0.3s ease; /* Smooth transition */
}

#new-btn {
  height: auto;
  width: auto;
  padding: 1vmin 5vmin;
  border-radius: var(--button-radius);
  font-size: 3vmin; /* Dynamic font size */
  background-color: var(--button-bg);
  margin: 10px;
  transition: all 0.3s ease; /* Smooth transition */
}

.choice-container {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}

body {
  text-align: center;
}

.box {
  background-color: rgb(247, 223, 7);
  transition: all 0.3s ease; /* Smooth color transitions */
}

.game {
  height: 70vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.game-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns for the grid */
  grid-template-rows: repeat(3, 1fr);    /* Ensures 3 rows for the grid */
  gap: 5px; /* Space between the boxes */
  width: 60vmin; /* Responsive width for the grid */
  height: 60vmin; /* Responsive height for the grid */
}

.box {
  height: 100%;
  width: 100%;
  border-radius: var(--box-radius);
  vertical-align: middle;
  color: var(--font-color);
  font-size: 6vmin; /* Adjust font dynamically */
}

.turn-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}

#turn-display {
  font-size: 4vmin;
  background-color: var(--button-bg);
  padding: 10px;
  border-radius: var(--button-radius);
  transition: background-color 0.3s ease;
}

.highlight {
  background-color: var(--highlight-color) !important;
}

.selected {
  background-color: var(--highlight-color);
  color: white;
}

/* Media Queries for Mobile Devices */
@media (max-width: 600px) {
  :root {
    --box-size: 15vmin; /* Adjust box size for smaller screens */
  }

  #standard-btn, #disappearing-btn, #new-btn {
    padding: 2vmin 4vmin; /* Adjust padding on smaller screens */
    font-size: 4vmin; /* Adjust button font size */
  }

  .box {
    font-size: 5vmin; /* Adjust the font size for boxes */
  }
}