nav.toolbar {
  background-color: var(--primary);
  width: 100%;
  display: flex;
  position: sticky;
  top: 0px;
  z-index: 9;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
  padding: 12px;
  color: var(--background-primary);
  box-shadow: 1px 1px 3px rgba(0 0 0 / .15),
              3px 3px 6px rgba(0 0 0 / .25);
}

nav.toolbar div.icon {
  padding: 6px 10px;
  font-size: 2rem;
  cursor: pointer;
}

nav.toolbar div.icon :is(label, div) {
  cursor: pointer;
}

nav.toolbar ul.menu-items {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  margin-left: auto;
}

nav.toolbar ul {
  list-style-type: none;
}

nav.toolbar ul.menu-items li a {
  text-decoration: none;
  color: var(--background-secondary);
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color .4s ease-out;
}

nav.toolbar ul.menu-items li a:hover:not(.active) {
  background-color: var(--primary-light);
}

nav.toolbar ul.menu-items li a.active {
  background-color: var(--primary-dark);
}

nav.toolbar ul.menu-items li a.active:hover {
  background-color: var(--primary-dark-2);
}

nav.toolbar h1 {
  font-size: 1.5rem;
  font-family: 'MuseoModerno', sans-serif;
  font-weight: bold;
}

@media only screen and (min-width: 660px) {
  nav.toolbar ul.menu-items {
    display: flex;
  }

  nav.toolbar div.icon {
    padding: 4px 8px;
    font-size: 1.6rem;
  }
}