/* Base styles for the entire page */
body {
  font-family: Arial, sans-serif; /* Sets a clean, readable font */
  background-color: #f5f5f5; /* Light gray background for the whole page */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  color: #333; /* Dark gray text color for readability */
}

/* Shared styling for header, nav, and footer */
header, nav, footer {
  background-color: #004080; /* Deep blue background for branding or emphasis */
  color: white; /* White text for contrast */
  padding: 1em; /* Adds spacing inside the elements */
  text-align: center; /* Centers the text content */
}

/* Styles for the navigation list */
nav ul {
  list-style: none; /* Removes default bullet points */
  padding: 0; /* Removes padding */
  display: flex; /* Aligns items horizontally */
  justify-content: center; /* Centers the list items */
  gap: 2em; /* Adds spacing between list items */
}

/* Styles for navigation links */
nav a {
  color: white; /* Makes links white to match the nav background */
  text-decoration: none; /* Removes underline from links */
  font-weight: bold; /* Emphasizes the links */
}

/* Main content styling */
main {
  padding: 2em; /* Adds padding around main content */
}

/* Styling for images in the gallery */
.image-gallery img {
  max-width: 500px; /* Limits image width to prevent them from getting too large */
  margin: 1em; /* Adds space around each image */
}

/* Styling for quiz question groups */
fieldset {
  margin: 1em 0; /* Adds vertical spacing around each question */
  padding: 1em; /* Adds padding inside each fieldset */
  border: 1px solid #ccc; /* Light gray border for separation */
}

/* Style for the submit button */
button {
  background-color: #004080; /* Same deep blue for consistency */
  color: white; /* White text for contrast */
  padding: 0.5em 1em; /* Adds some padding for a clickable area */
  border: none; /* Removes default border */
  cursor: pointer; /* Changes cursor to pointer on hover */
}

/* Styling for the quiz result message */
#quizResult {
  margin-top: 1em; /* Adds space above the result message */
  font-weight: bold; /* Makes the result text bold */
}