html {
  width: 100vw;
  height: 100vh;
  display: flex;
}

body {
  overflow: hidden;
  text-align: center;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffff, #000000, #ffaa00, #aa00ff, #00aaff);
  background-size: 10% 10%;
  animation: gradient 30s ease-in-out infinite;
  color: white;
  font-size: 10em;
  text-shadow: 3px 3px 0 #ff0000, -3px -3px 0 #00ff00, 6px 6px 0 #0000ff, -6px -6px 0 #ffff00, 9px 9px 0 #ff00ff, -9px -9px 0 #00ffff, 12px 12px 0 #000000, -12px -12px 0 #ffaa00, 15px 15px 0 #aa00ff, -15px -15px 0 #00aaff;
}

@keyframes gradient {
  0% {
    background-position: 0% 200%;
    background-size: 30px 30px;
    transform: rotate(0deg);
  }
  25% {
    transform: skew(100deg, 5000deg);
  }
  50% {
    background-position: 200% 50%;
    background-size: 8000px 8000px;
    background-position: center;
    transform: rotate(365deg) skew(360deg, 360deg);
  }
  100% {
    transform: rotate(0deg);
    background-position: 0% 200%;
    background-size: 5px 20px;
  }
}