/* style.css */
body {
  /* Resets default browser margins to ensure the navbar sits flush with the top */
  margin: 0;
  padding: 0;
}

.navbar {
  user-select: none;
}

.navbar ul {
  list-style-type: none; /* Removes bullet points */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Clears floats */
  background-color: #333; /* Dark background color */
}

.navbar li {
  float: left; /* Makes the list items horizontal */
}

.navbar li a {
  display: block; /* Makes the entire link area clickable */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* Removes underlines from links */
}

/* Change the color of links on hover */
.navbar li a:hover {
  background-color: #111;
}

/* Add a color to the active/current link */
.navbar li a.active {
  background-color: #13503a;
}

/* Position the navbar at the top of the viewport, even when scrolling */
.navbar {
  position: fixed; /* or 'sticky' */
  top: 0;
  width: 100%; /* Ensures the bar spans the full width of the page */
  z-index: 1000; /* Ensures the navbar appears above other elements */
}

/*
 * Add padding to the content element to prevent it from being hidden
 * underneath the fixed navigation bar. Adjust the padding value to
 * match the height of your navbar.
 */
.content {
  padding-top: 50px; /* Example value, adjust as needed */
}