nav {
  position: sticky;
  top: 0;

  display: flex;
  justify-content: space-between;
  transition: 0.1s ease-in-out;
  padding: 0 1.5rem;

  z-index: 10;
  color: var(--text);
  background: var(--secondary);
  border-bottom: 1px solid var(--text);
  box-shadow: 0 0.6rem 1.8rem -0.3rem var(--secondary);

  >:last-child {
    display: flex;
    align-items: center;
    gap: var(--gap);
  }

  @media screen and (max-width: 978px) {
    padding: 0.5rem 0.25rem;

    >:first-child {
      display: none;
    }

    >:last-child {
      overflow-y: auto;
    }
  }
}

nav a {
  border: 1px solid var(--primary);
  color: var(--text);

  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  transition: 0.1s ease-in-out;
  text-decoration: none;
  white-space: pre;
  cursor: pointer;

  &:hover {
    background: var(--text);
    color: var(--secondary);
    box-shadow: 0 0 5px var(--text);
  }
}