nav.scss

nav a {
  letter-spacing: .5px;
  font-weight: 400;
  display: flex;
  align-items:center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 15px 5px;
  text-decoration: none;
  position: relative;
  font-size: .95rem;

  @media screen and (max-width: 850px) {

    & {
      padding-left: 2px;
      padding-right: 2px;
    }

  }


  &:after {
    content: "";
    position: absolute;
    top: calc(100%);
    height: 1px;
    left: 50%;
    width: 0px;
    transform: translateX(-50%);
    background-color: transparent;
    opacity: .5;
    transition: all .6s;
  }

  svg {
    margin: 2px 6px;
  }

  &:not(.active):not(:hover):not(.button) {
    color: currentColor;
    opacity: .85;
  }

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

    &:after {
      background-color: var(--primary-color);
    }
  }

  &.active {
    color: var(--primary-color-dark);

    &:after {
      background-color: var(--primary-color-dark);
      width: 100%;
    }
  }
}