#nav {
  list-style-type: none;
  margin: 0;
}

.item {
  font-weight: 400;
  display: block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  padding: 0.5rem 1rem;
}

.item:hover {
  color: var(--splotch-primary);
}

.active {
  color: #2285D1 !important;
}

#nav-logo {
  min-height: 0vw;
  display: block;
  width: clamp(50px, 6vw, 80px);
}

#menu-bar, #close-nav {
  display: none;
}

.drop-content {
  position: absolute;
  width: max-content;
  transform: translateX(-20%);
  z-index: 100;
}

.drop-submenu {
  background-color: #0E1836;
  position: relative;
}

.submenu-dropbtn {
  padding: 0.25rem;
}

.drop-submenu-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #0E1836;
  transform: translateX(100%);
  top: 0;
  right: 0;
  z-index: 100;
}

.drop-submenu-content > a {
  text-decoration: none;
  color: #fbfbfb;
  text-transform: lowercase;
  line-height: 30px;
  padding: 0.4rem 0.6rem;
}

.drop-submenu-content > a:hover {
  cursor: pointer;
  filter: brightness(0.8);
  color: #2285D1;
}

.drop-content {
  display: none;
}

.drop-content.active {
  display: block;
}

.drop-submenu-content {
  display: none;
}

.drop-submenu-content.active {
  display: flex;
}

@media screen and (max-width: 660px) {
  #nav {
    margin: auto;
    flex-direction: column;
  }
  #nav-container {
    flex-direction: column;
  }
  #menu-bar {
    display: block;
  }
  .item {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  .drop-content {
    transform: translateX(-55%);
  }
}