.nav {
  display: grid;
  grid-template-columns: auto 8rem auto;
  place-content: center;
  place-items: center;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;

  .logo-m {
    color: var(--color-inverse);
    font-size: 3rem;
    line-height: 1;
    text-decoration: none;
    -webkit-text-fill-color: var(--color-background-alt);

    &::before {
      top: -50%;
      padding: 140%;
      transform: rotate(45deg) translateX(-46%);
      border: 2px solid var(--color-background-alt);
      background-image: linear-gradient(35deg, var(--gradient));
      background-size: 1000% 100%;
      animation: gradient 15s linear infinite;
      animation-direction: alternate;
    }

    &:focus {
      outline: none;

      &::before {
        box-shadow: 0 0 0 4px var(--color-secondary);
      }
    }
  }

  a:not([class]) {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 100%;
  }
}
