header {
  background-color: #4A90E2;
  color: white;
  padding: 25px 0; /* slightly more padding for a balanced look */
  text-align: center;
}

header h1 {
  font-size: 2.25em; /* roughly 1.5× larger than before */
  margin-bottom: 10px;
  letter-spacing: 0.5px; /* small visual polish */
}

nav {
  margin-top: 10px;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 18px;
  font-weight: bold;
  font-size: 1.25em; /* increase size of nav links */
  position: relative; /* for the custom underline */
  padding-bottom: 5px; /* space for underline */
  transition: all 0.2s ease;
}

/* Create a clear underline that sits slightly below the text */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 20px;
  font-weight: bold;
  font-size: 1.25em; /* increase link text size */
  position: relative;
  text-underline-offset: 6px; /* adds visible space between underline & text */
}

nav a:hover,
nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px; /* thicker underline for clarity */
  text-underline-offset: 6px; /* consistent offset for both hover and active */
}