/* some colors you may find useful:
  #115ff4
  #060ce9
  #28a200
  #8d2ab5
  #74119c
*/

/* Body Styling */
body {
  font-family: Arial, sans-serif;
  background-color: #115ff4; /* Light blue background */
  color: #f7f7f7; /* White text */
}

/* Title Styling */
h1 {
  text-align: center;
  margin: 20px 0; /* Add space above and below title */
  font-size: 2rem;
}

/* Button Styling */
button {
  padding: 8px 15px;
  margin: 20px auto; /* Center the button */
  font-size: 1rem;
  display: block;
  text-align: center;
  background-color: #a917d5; /* Purple button */
  color: #f7f7f7; /* Must be explicit; button default overrides body styling */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #8d2ab5; /* Darker purple on hover */
}

/* General table styles */
table {
  width: 80%; /* Make the table responsive and centered */
  margin: 20px auto;
  border-collapse: collapse; /* Remove spacing between table cells */
  text-align: center;
  background-color: #0047ab;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to table */
}

/* Header styles */
table th {
  background-color: #002f6c; /* Darker blue for headers */
  padding: 15px;
  font-size: 1.2rem;
  text-transform: uppercase; /* Make headers uppercase */
  border: 2px solid #f7f7f7;
}

/* Cell styles */
table td {
  padding: 20px;
  font-size: 0.9rem;
  border: 2px solid #f7f7f7;
  background-color: #0077be;
  transition: background-color 0.3s; /* Smooth color change on hover */
  cursor: pointer;
}

.null-cell:hover {
  background-color: #0066a0; /* Darker blue on hover */
}

/* Styling for Cell Clicks */
.question {
  background-color: #d12424; /* Red for questions */
}

.question:hover {
  background-color: #a71d1d; /* Darker red on hover */
}

.answer {
  background-color: #369c11; /* Green for answers */
}

.answer:hover {
  background-color: #2e7f0e; /* Darker green on hover */
}

/* Spinner styling */
#spinner {
  width: 100px;
  height: 100px;
  border: 5px solid #f7f7f7; /* White head for animation */
  border-top: 5px solid #3498db; /* Blue tail for animation */
  border-radius: 50%;
  animation: spin 1.25s linear infinite; /* Rotate */
  display: block;
  margin: 0 auto; /* Center on page */
}

/* Spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}