@charset "UTF-8";

.menunav {
  background-color: var(--menu-back-color);
  font: normal 1.0rem "Verdana", sans-serif;
  display: flex;
  flex-wrap: wrap;
}


/* Style the links inside the navigation bar */
.menunav a {
  display: block;
  color: var(--menu-text-color);
  text-align: left;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 1rem;
}

.active {
  color: var(--menu-text-color);
  background-color: var(--menu-back-color);
}

.dropdown {
  position: relative;
}

.dropdown .drophdr {
  font-size: 1rem;
  color: var(--menu-text-color);
  padding: 0.5rem 1rem;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 0.875rem; 
  color: var(--menu-text-color);
  background-color: var(--menu-back-color);
  min-width: 21rem;
  z-index: 1;
  opacity: 0.85;
}

.dropdown-content a {
  color: var(--menu-text-color);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  display: block;
  text-align: left;
}

.menunav a:hover, .dropdown:hover .drophdr {
  background-color: var(--menu-highlight-color);
  color: var(--menu-hover-color);
}

.dropdown-content a:hover {
  background-color: var(--menu-highlight-color);
  color: var(--menu-hover-color);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.shortmenu { 
   display: none; 
}


@media screen and (min-width: 1000px) {
  .drophdr {
    text-transform: uppercase;
  }
}

@media (max-width: 700px) {
  .menunav a {
     padding: 0.25rem 0.5rem;
  }

  .longmenu { 
     display: none; 
  }

  .shortmenu { 
     display: inline; 
  }

  .dropdown-content {
     min-width: 17rem;
  }

  .dropdown-content a {
     padding: 0.25rem 0.5rem;
  }

  .dropdown .drophdr {
     padding: 0.25rem 0.5rem;
  }

  .dropdown.dropleft .dropdown-content {
    left: auto;
    right: 0;
  }
}