.changing-color-text {
  /* Create a wide multi-color gradient background */
  background: linear-gradient(90deg, #ff007f, #7f00ff, #00f0ff, #ff007f);
  background-size: 300% 100%;
  
  /* Clip the background gradient so it only fills the text shape */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Make the main font color transparent to reveal the gradient underneath */
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  /* Apply the animation loop */
  animation: shiftGradient 6s linear infinite;
}

/* Keyframes to smoothly move the background position sideways */
@keyframes shiftGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}