.myNav {
  position: fixed;
  z-index: 50;
  display: flex;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  

  a {
    text-decoration: none;
    display: block;
    --misura: 40px;
    color: transparent;
    width: var(--misura);
    height: var(--misura);
    border: 3px solid currentColor;
    text-align: center;
    line-height: calc(var(--misura) - 3px);
    font-weight: 900;
    transition: .5s;
    margin-inline: 1.5px;
    box-shadow: 0 3px 15px currentColor;
    animation: colorear 10s linear infinite;
    animation-delay: calc(var(--d) * .5s);
    font-family: arial;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;

  }

  a.activo {
    box-shadow: 0 3px 15px currentColor, inset 4px 4px 20px currentColor, inset -4px -4px 20px currentColor;
  }
}

@keyframes colorear {
  0%{
    color: #0ff;
  }
  10% {
    color:mediumorchid;
  }
  20% {
    color: mediumspringgreen;
  }
  30% {
    color:mediumpurple;
  }
  40% {
    color: orange;
  }
  50% {
    color: #f00;
  }
  60%{
    color: #0f0;
  }
  70% {
    color: #00f;
  }
  80% {
    color: magenta;
  }
  90% {
    color:azure;
  }
  100% {
    color:cadetblue;
  }
}