html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  background-color: #FEFAE0;
}

.topnav {
  display: flex;
  background-color: #E9EDC9;
  overflow: hidden;
  height: 50px; /* Adjust this height to suit your design */
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
}

.topnav a {
  display: flex;
  color: black;
  text-align: center;
  text-decoration: none;
  line-height: 50px; /* Match the height of the topnav for centering */
  padding:8px;
  font-family: sans-serif;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #CCD5AE;
  color: black;
}