.top-nav {
  position: sticky;
  background-color: transparent;
  top: 0;
  z-index: 2;
  transition: 0.25s;
}

html:not([data-scroll="0"]) .top-nav {
  background-color: var(--pico-background-color);
  box-shadow: 00 10px 10px rgba(0, 0, 0, 0.1);
}


.fullscreen-nav {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 100%;
  transition: 0.5s;
  background-color: var(--pico-background-color);
  z-index: 100;
}

.fullscreen-nav.show {
  right: 0%;
}

#fullscreen-nav-button {
  display: none;
}

@media (max-width: 576px) {
  #options {
    display: none;
  }

  #fullscreen-nav-button {
    display: unset;
  }
}

#options-fullscreen {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.5rem;
  justify-content: middle;
  width: 80%;
}

#options-fullscreen>*>* {
  width: 100%;
}

#hamburger {
  width: 1rem;
  height: 1rem;
  border-radius: 0;
  padding: 0;

  @media (prefers-color-scheme: dark) {
    filter: invert(1);
  }
}

button:has(#hamburger) {
  padding: 0.75rem;
  font-size: 0;
  margin: 0 1rem;
}