nav {
  position: fixed;
  display: flex !important;
  gap: 0.5em;
  z-index: 2 !important;

  a {
    color: inherit;


    &:hover {
      color: var(--blue);


    }

    &.active {
      color: var(--blue);
      transition: all 0.3s ease-in-out;
    }
  }
}

nav {
  transition: all 0.3s ease-in-out;
}

/* nav.light a:hover,
nav.light a.active {
  color: var(--light-color);
}

nav.dark a:hover,
nav.dark a.active {
  color: var(--dark-color);
} */

nav.mobile {
  display: none !important;
}

#custom-cursor {
  position: absolute;
  z-index: 3;
  width: attr(data-scale px);
  height: attr(data-scale px);
  width: var(--scale);
  height: var(--scale);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(2);
  opacity: 0;
  transition: opacity .2s ease-in-out;



}

/* section.index {}

section.main#navigation.htmx-swapping>main.index {

  background-color: red;


}

main.index {
  transition: all 2s ease-in-out;
  position: relative;
  background-color: white;
  background-color: white;
  position: fixed;
  mix-blend-mode: luminosity;
  height: fit-content;
  width: calc(100% - var(--body-padding) * 2);
  z-index: 300;
  top: 3em;
  left: var(--body-padding);
  padding: var(--body-padding);
} */


nav>a:first-of-type {}


@media (width < 960px) {



  nav.mobile {
    display: block !important;
    position: fixed;
    bottom: var(--body-padding);

    a:nth-of-type(1) {
      display: none;
    }

  }

  nav:not(.mobile) {
    a:nth-of-type(1n+2) {
      display: none;
    }
  }
}