@media (prefers-reduced-motion: no-preference) {
  .glow::before,
  .glow::after {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(
      45deg,
      #e6fb04,
      #ff6600,
      #00ff66,
      #00ffff,
      #ff00ff,
      #ff0099,
      #6e0dd0,
      #ff3300,
      #099fff
    );
    background-size: 400%;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    z-index: -999999;
    animation: animate 20s linear infinite;
    border-radius: 9999px;
  }

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

    50% {
      background-position: 400% 0;
    }

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

  .glow::after {
    background-size: 100%; /* remove once animation is supported in Safari and SafariOS */
    filter: blur(10px);
    opacity: 0.99;
  }

  .wiggle {
    animation: wiggle 4s 2s infinite;
  }

  @keyframes wiggle {
    5%,
    50% {
      transform: scale(1);
    }

    10% {
      transform: scale(0.7);
    }

    15% {
      transform: scale(1);
    }

    20% {
      transform: scale(1) rotate(-4deg);
    }

    25% {
      transform: scale(1) rotate(4deg);
    }

    30% {
      transform: scale(1) rotate(-2deg);
    }

    35% {
      transform: scale(1) rotate(1deg);
    }

    40% {
      transform: scale(1) rotate(0);
    }
  }
}
