body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f8f9fa;
}

nav {
  background-color: #1B4965; /* Deep blue background */
  overflow: hidden;
}

nav a {
  float: left;
  display: block;
  color: #FFFFFF; /* White text */
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

nav a:hover {
  background-color: #265D7D; /* Lighter blue hover color */
  color: #FFFFFF;
}

/* Active state with new color */
nav a.active {
  background-color: #115F3B; /* Dark green */
  color: #FFFFFF;
}

/* Hamburger icon (hidden by default) */
nav a.icon {
  display: none;
}

/* Responsive breakpoint at 650px */
@media screen and (max-width: 650px) {
  nav a:not(:first-child) {
    display: none;
  }
  nav a.icon {
    float: right;
    display: block;
  }

  nav.responsive {
    position: relative;
  }
  nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

main {
  padding: 20px;
}