<div id="main" class="container lead-red">
  HAPPY PRIDE MONTH
</div>
<div id="fade" class="container lead-orange">
  HAPPY PRIDE MONTH
</div>

$transition-duration: 1400ms;

.container {
  transition: all $transition-duration ease-in-out;
  font-size: 6em;
  font-weight: 800;
  font-family: Arial, sans-serif;
  text-align: center;
  opacity: 1;
  position: absolute;
  top: 0;
  padding: 0.5em;
}
.container.hide {
  opacity: 0;
}
.container.halt {
  transition-duration: 0ms;
}

#main {
  z-index: 1;
}
#fade {
  z-index: 2;
}

$red: red;
$orange: orange;
$yellow: yellow;
$green: green;
$blue: blue;
$purple: purple;

@mixin lead($one, $two, $three, $four, $five, $six) {
  background: linear-gradient(80deg, $one, $two, $three, $four, $five, $six);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead-red {
  @include lead($red, $orange, $yellow, $green, $blue, $purple);
}
.lead-orange {
  @include lead($orange, $yellow, $green, $blue, $purple, $red);
}
.lead-yellow {
  @include lead($yellow, $green, $blue, $purple, $red, $orange);
}
.lead-green {
  @include lead($green, $blue, $purple, $red, $orange, $yellow);
}
.lead-blue {
  @include lead($blue, $purple, $red, $orange, $yellow, $green);
}
.lead-purple {
  @include lead($purple, $red, $orange, $yellow, $green, $blue);
}

const rainbow = ["red", "orange", "yellow", "green", "blue", "purple"];

const target = 1400;
var lastTimeoutExecuted = null;

var getNextTimeoutDuration = function() {
  var now = (new Date().getTime());

  if (!lastTimeoutExecuted) {
    lastTimeoutExecuted = now;
    return target;
  }

  var diff = (now - lastTimeoutExecuted);

  lastTimeoutExecuted = now;

  return ((2 * target) - diff);
};


function rainbowify() {
  const main = document.getElementById("main");
  const fade = document.getElementById("fade");

  var i;
  const ilen = rainbow.length;
  for (i = 0; i < ilen; i++) {
    if (main.classList.contains("lead-" + rainbow[i])) {
      main.classList.remove("lead-" + rainbow[i]);
      main.classList.add("lead-" + rainbow[(i + 1) % ilen]);

      fade.classList.add("halt");
      fade.classList.add("hide");
      fade.classList.remove("lead-" + rainbow[(i + 1) % ilen]);
      fade.classList.add("lead-" + rainbow[(i + 2) % ilen]);
      void fade.offsetWidth;
      fade.classList.remove("halt");
      fade.classList.remove("hide");

      break;
    }
  }
};

function intervalFunction() {
  rainbowify();
  setTimeout(intervalFunction, getNextTimeoutDuration());
};

intervalFunction();