/* This animation rule defines the color changes */
@keyframes rainbow-transition {
  0% { background-color: #ff0000; }  /* Red */
  15% { background-color: #ff7f00; } /* Orange */
  30% { background-color: #ffff00; } /* Yellow */
  45% { background-color: #00ff00; } /* Green */
  60% { background-color: #0000ff; } /* Blue */
  75% { background-color: #4b0082; } /* Indigo */
  90% { background-color: #9400d3; } /* Violet */
  100% { background-color: #ff0000; } /* Loop back to Red */
}

/* This rule applies the animation and makes all text white with a black outline */
body {
  animation-name: rainbow-transition;
  animation-duration: 25s; /* Adjust speed here */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  color: #ffffff;
  /* Adds a black outline using multiple text shadows */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* Ensures links also have the black outline */
a {
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}