@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background-color: #f3f4f6; /* Tailwind gray-100 */
}

/* Style for the dynamically generated option buttons */
#options button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  background-color: #ffffff; /* bg-white */
  color: #1f2937; /* gray-800 */
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}

#options button:hover {
  background-color: #f9fafb; /* gray-50 */
  border-color: #9ca3af; /* gray-400 */
}

/* Styles for disabled buttons after an answer is chosen */
#options button:disabled {
    opacity: 0.9;
    cursor: not-allowed;
}

/* Correct answer style */
.correct {
  background-color: #10B981 !important; /* emerald-500 */
  color: white !important;
  border-color: #059669 !important; /* emerald-600 */
}

/* Wrong answer style */
.wrong {
  background-color: #EF4444 !important; /* red-500 */
  color: white !important;
  border-color: #DC2626 !important; /* red-600 */
}