:root {
  --electric-red: rgb(231, 0, 0);
  --dark-orange: rgb(255, 140, 0);
  --canary-yellow: rgb(255, 239, 0);
  --la-salle-green: rgb(0, 129, 31);
  --blue-ryb: rgb(0, 68, 255);
  --patriarch: rgb(118, 0, 137);
}

body,
html {
  height: 100%;
  margin: 0;
  width: 100%;
}

body {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 3em;
}

.centre {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.page {
  animation: background-scroll 1s ease-in-out 1s infinite alternate;
  background: linear-gradient(#ff00ff, #00ff00, #ff00ff);
  background-size: 100% 300%;
  color: #ffffff;
  display: table;
  height: inherit;
  position: absolute;
  width: inherit;
}

.page * {
  padding: 24px;
  overflow: hidden;
}

.rainbow {
  animation: fade-in 0.5s linear 0.5s 1 normal forwards,
    orbit 0.1s linear 1.5s infinite normal,
    rainbow-swing 0.1s linear 1.5s infinite normal;
  box-sizing: content-box;
  opacity: 0;
  text-shadow: 0 0 +12px black, 0 +3px 0 var(--electric-red),
    0 +6px 0 var(--dark-orange), 0 +9px 0 var(--canary-yellow),
    0 +12px 0 var(--la-salle-green), 0 +15px 0 var(--blue-ryb),
    0 +18px 0 var(--patriarch);
}

.rainbow.alternate {
  animation: fade-in 0s linear 1.5s 1 normal forwards,
    orbit 0.1s linear 1.5s infinite reverse,
    rainbow-swing 0.1s linear 1.5s infinite reverse;
}

@keyframes background-scroll {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% 300%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(6px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(6px) rotate(-360deg);
  }
}
@keyframes rainbow-swing {
  0% {
    text-shadow: 0 0 +12px black, 0 +3px 0 var(--electric-red),
      0 +6px 0 var(--dark-orange), 0 +9px 0 var(--canary-yellow),
      0 +12px 0 var(--la-salle-green), 0 +15px 0 var(--blue-ryb),
      0 +18px 0 var(--patriarch);
  }
  25% {
    text-shadow: 0 0 +12px black, +3px 0 0 var(--electric-red),
      +6px 0 0 var(--dark-orange), +9px 0 0 var(--canary-yellow),
      +12px 0 0 var(--la-salle-green), +15px 0 0 var(--blue-ryb),
      +18px 0 0 var(--patriarch);
  }
  50% {
    text-shadow: 0 0 +12px black, 0 -3px 0 var(--electric-red),
      0 -6px 0 var(--dark-orange), 0 -9px 0 var(--canary-yellow),
      0 -12px 0 var(--la-salle-green), 0 -15px 0 var(--blue-ryb),
      0 -18px 0 var(--patriarch);
  }
  75% {
    text-shadow: 0 0 +12px black, -3px 0 0 var(--electric-red),
      -6px 0 0 var(--dark-orange), -9px 0 0 var(--canary-yellow),
      -12px 0 0 var(--la-salle-green), -15px 0 0 var(--blue-ryb),
      -18px 0 0 var(--patriarch);
  }
  100% {
    text-shadow: 0 0 +12px black, 0 +3px 0 var(--electric-red),
      0 +6px 0 var(--dark-orange), 0 +9px 0 var(--canary-yellow),
      0 +12px 0 var(--la-salle-green), 0 +15px 0 var(--blue-ryb),
      0 +18px 0 var(--patriarch);
  }
}