@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap");
:root {
  --color-transparent: transparent;
  --color-red: #F2C9B2;
  --color-yellow: #ECF4D6;
  --color-green: #AFDCC4;
  --color-blue: #91DAEA;
  --color-purple: #E4C1ED;
  --color-text: #222;
  --color-background: #F5E5EE;
  --animation-speed: 2000ms;
  --rainbow-width: calc(100/4*1vw);
  --rainbow-stripe-width: calc(var(--rainbow-width)/2/7);
}

.rainbow__top {
  --color-0: var(--color-transparent);
  --color-1: var(--color-purple);
  --color-2: var(--color-blue);
  --color-3: var(--color-green);
  --color-4: var(--color-yellow);
  --color-5: var(--color-red);
  --color-6: var(--color-transparent);
  --gradient-y-align: 100%;
  --gradient-x-offset: 0.5;
}
.rainbow__bottom {
  --color-0: var(--color-transparent);
  --color-1: var(--color-red);
  --color-2: var(--color-yellow);
  --color-3: var(--color-green);
  --color-4: var(--color-blue);
  --color-5: var(--color-purple);
  --color-6: var(--color-transparent);
  --gradient-y-align: 0;
  --gradient-x-offset: 0;
}

body {
  background-color: var(--color-background);
  margin: 0;
}

.rainbow {
  bottom: 0;
  height: var(--rainbow-width);
  margin: auto;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100vw;
}
.rainbow div {
  animation: rainbowRoll var(--animation-speed) linear infinite;
  height: 50%;
  width: calc(100vw + var(--rainbow-width));
}
.rainbow--reverse div {
  animation-direction: reverse;
}
.rainbow__top {
  background-image: radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 0)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 1)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 2)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 3)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 4)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7));
}
.rainbow__bottom {
  background-image: radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 0)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 1)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 2)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 3)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 4)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7)), radial-gradient(circle at calc(var(--rainbow-width)*calc(var(--gradient-x-offset) + 5)) var(--gradient-y-align), var(--color-0) calc(var(--rainbow-stripe-width) * 0) calc(var(--rainbow-stripe-width) * 1), var(--color-1) calc(var(--rainbow-stripe-width) * 1) calc(var(--rainbow-stripe-width) * 2), var(--color-2) calc(var(--rainbow-stripe-width) * 2) calc(var(--rainbow-stripe-width) * 3), var(--color-3) calc(var(--rainbow-stripe-width) * 3) calc(var(--rainbow-stripe-width) * 4), var(--color-4) calc(var(--rainbow-stripe-width) * 4) calc(var(--rainbow-stripe-width) * 5), var(--color-5) calc(var(--rainbow-stripe-width) * 5) calc(var(--rainbow-stripe-width) * 6), var(--color-6) calc(var(--rainbow-stripe-width) * 6) calc(var(--rainbow-stripe-width) * 7), var(--color-transparent) calc(var(--rainbow-stripe-width) * 7));
}

.contents {
  display: flex;
  height: 100vh;
  position: relative;
}
.contents h1 {
  color: var(--color-text);
  font: calc(var(--rainbow-width)*0.27) "Fugaz One", sans-serif;
  letter-spacing: -0.02em;
  text-align: center;
  margin: auto;
}

@keyframes rainbowRoll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--rainbow-width)*-1));
  }
}