/* for animating the underline on nav between pages */

/* @media(prefers-reduced-motion: no-preference) */

@view-transition {
  navigation: auto;
}

nav li > a.active-item {
  color: var(--contrast);
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 4ch;
    height: 3px;
    background-color: mediumpurple;
    position: absolute;
    top: 100%;
    left: 0;
    view-transition-name: navslide;
  }

}