.topnav {
  margin: 0 auto;
  padding: 1% 0px;
  min-height: 140px;
  max-height: auto;
  max-width: 100%;
  border: 8px solid light-dark(var(--light-bg), var(--dark-bg));
  border-radius: 40px;
  display: flex;
  flex-wrap: wrap;
  /*background-color: light-dark(#2a5629, #2a247a);*/
  background-image: linear-gradient(to left, light-dark(#2a5629, #2a247a), light-dark(#377035, #332c94));
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media ( max-width: 1100px ) {
.topnav {
  display: none;
} }

.topnav a {
  border: 2px solid transparent;
  border-radius: 32px;
  padding: 15px 20px;
  background: transparent;
  /*background: light-dark(#2a5629, #2a247a);*/
  color: var(--dark-color);
  text-decoration: none;
  font-size: 16px;
  transition-duration: .2s;
}

.topnav a:hover {
  background: light-dark(var(--light-bg), #2a5629);
  border: 4px solid light-dark(#2a5629, #2a247a);
  color: light-dark(#2a5629, #fff);
  border: 2px solid light-dark(var(--light-bg), #2a247a);
  border-radius: 32px;
}

.topnav a.active {
  background: light-dark(var(--light-bg), #2a5629);
  border: 4px solid light-dark(#2a5629, #2a247a);
  color: light-dark(#2a5629, #fff);
}