/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

body {
  font-family: 'Luckiest Guy', cursive;
  background-color: #decc0d;
  color: #1f2833;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  height: 100vh;
  font-size: clamp(16px, 4vw, 22px); /* Adjusted for better scaling */
}


h1 {
  background-color: #0d9e0a;
  color: #ffffff;
  padding: 30px;
  text-align: center;
  font-size: clamp(1.5em, 5vw, 2em); /* Adjust title size dynamically */
  margin-bottom: 10px;
  font-weight: bold;
  border-radius: 15px; /* Add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow for depth */
  margin-top: 20px; /* Add space at the top inside the box */
}


#questionAudioText, #result {
  margin: 10px 0;
  padding: 10px;
  text-align: center;
  font-size: clamp(1.2em, 4vw, 1.5em); /* Adjust question and result text dynamically */
}

#buttonsContainer {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between buttons */
  flex-wrap: wrap; /* Ensure buttons wrap on small screens */
}

button {
  font-size: clamp(1em, 3vw, 1.2em); /* Adjust button text size dynamically */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  background-color: #e78b24;
  color: white;
}

#handsFreeModeButton img {
  width: 30px; /* Adjust as needed */
}

audio {
  margin: 20px auto;
  display: block;
}

/* Enhanced sizes for mobile */
@media (max-width: 768px) {
  body {
    font-size: clamp(18px, 5vw, 22px); /* Slightly larger text */
  }

  h1 {
    font-size: clamp(2em, 6vw, 3em); /* Larger titles */
  }

  #questionAudioText, #result {
    font-size: clamp(1.5em, 5vw, 2em); /* Larger text for readability */
  }

  button {
    font-size: clamp(1.2em, 4vw, 1.5em); /* Larger buttons */
    padding: 15px 25px; /* Larger clickable area */
  }

  #buttonsContainer {
    flex-direction: column;
    gap: 10px; /* Larger gap between stacked buttons */
  }
}

#categoriesContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between buttons */
  justify-content: center; /* Center buttons horizontally */
}

#exitButton {
  position: fixed;
  bottom: 20px; /* Distance from the bottom of the viewport */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  font-size: 1.2em; /* Increase font size for better visibility */
  padding: 15px 30px; /* Increase padding for a larger clickable area */
  background-color: #0f9e09; /* Example: a red color for the exit button */
  color: white;
  z-index: 100; /* Ensure it's above other elements */
}

#answerButtonsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.selectedCategory {
  background-color: #e78b24;
  color: white;
}

.unselectedCategory {
  background-color: #969696;
  color: white;
}

.answerButton {
  width: 80%; /* Adjust the width as necessary */
  background-color: #1f2833; /* Dark background for contrast */
  color: #e78b24; /* Light text for readability */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
}

/* Hover and focus styles for interactivity */
.answerButton:hover, .answerButton:focus {
  background-color: #0b0c10;
  color: #45a29e;
}