.animrainbow{
  /* Define the multi-color gradient */
  background: -webkit-linear-gradient(
    to right,
    rgba(115, 204, 40, 1),
    rgba(0, 122, 208, 1),
    rgba(179, 74, 255, 1)
  );
  background: linear-gradient(
    to right,
    rgba(115, 204, 40, 1),
    rgba(0, 122, 208, 1),
    rgba(179, 74, 255, 1)
  );

  /* Set the background size */
  background-size: 300% auto;

  /* Clip the background to the text area (Requires maximum prefixes) */
  -webkit-background-clip: text;
  -moz-background-clip: text; /* Safari/Chrome/Android/Firefox */
  -ms-background-clip: text;  /* MS Browsers */
  -o-background-clip: text;   /* Opera */
  background-clip: text;

  /* Make the text transparent (Requires maximum prefixes) */
  -webkit-text-fill-color: transparent; /* iOS, Chrome, Android */
  -moz-text-fill-color: transparent;    /* Firefox */
  color: transparent; /* Standard/Fallback property */

  /* Apply the animation */
  animation: rainbow-scroll 10s linear infinite alternate;
}

/* Keyframes (Same as before, only need the standard keyframes syntax) */
@keyframes rainbow-scroll {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}
/* Add prefixed keyframes for absolute maximum compatibility with older/non-standard browsers */
@-webkit-keyframes rainbow-scroll {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}
/* end animated rainbow text */