nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  width: 100%;
  height: 56px;
  background-color: var(--secondary-color);

  border-bottom: solid 1px var(--tertiary-color);
}
  
#logo {
  width: fit-content;
  display: flex;
  gap: 16px;
}
  
#logo img {
  height: 26px;
}

nav ul {
  height: 100%;
  display: flex;
}

nav ul li {
  width: 56px;
  height: 100%;
  padding: 0 20px;
  color: var(--white);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  list-style: none;

  transition: background-color 100ms ease-in-out;
}

nav ul li:hover {
  background-color: var(--accent-color);
}

nav ul li.active {
  background-color: var(--accent-color);
}

nav .nav-icon {
  width: 20px;
  height: 20px;
}

.dropdown-menu {
  display: none;
}

.dropdown.open .dropdown-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: fit-content;
  width: 200px;
  top: 60px;
  left: 5px;
  z-index: 50;

  background-color: var(--primary-color);
  border: solid 0.1px var(--secondary-color);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
}

.dropdown.open .dropdown-menu li {
  width: 100%;
  justify-content: left;
  padding: 5px 10px;
  font-size: 12px;

  color: var(--white);
}