index.scss

:root {
  --bkgd: black;
  --accent: rebeccapurple;
}

$bkgd: var(--bkgd);
$accent: var(--accent);

$x-rot: 70deg;

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

html {
  background: $bkgd;
  filter: hue-rotate(0deg);
}
html[rainbow] {
  animation: rainbow 4s infinite;
}
@keyframes rainbow {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

#floor-wrap {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 50vh;
  left: 0;
  perspective: 100vh;
  perspective-origin: top center 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#floor {
  width: 200%;
  height: 200%;
  transform-origin: bottom center 0;
  animation: floorslide .5s linear infinite;
  background: repeating-linear-gradient(0deg, transparent, transparent, 38px, $accent 38px, $accent 40px),
              repeating-linear-gradient(90deg, $accent, $accent 2px, $bkgd 2px, $bkgd 80px);
  opacity: 1;
}
@keyframes floorslide {
  from {
    transform: rotateX($x-rot) translateY(0px) translateZ(-0px) scale3d(8, 8, 1);
  }
  to {
    transform: rotateX($x-rot) translateY(8 * 40px) translateZ(-0px) scale3d(8, 8, 1);
  }
}

#floor-fade {
  display: block;
  width: 100%;
  height: 10%;
  background: linear-gradient($accent, transparent);
  position: fixed;
  top: 50vh;
  left: 0;
}

#sunset {
  display: block;
  width: 100%;
  height: 50vh;
  background: radial-gradient(circle farthest-corner at 50% 120%, transparent, $accent);
  position: fixed;
  top: 0;
  left: 0;
  opacity: .23;
}