:root {
  --content-clouds-allowed-overlap: 1ch;

  --bg-color: #00010f;
  --fg1-cloud-bottom-spacing: min(50lvh, 400px);
  --bg2-cloud-bottom-spacing: min(35lvh, 300px);
  --bg4-cloud-bottom-spacing: min(30lvh, 200px);
  --wave-tilt-offset: 5em;
  --wave-move-time: 20s;

  --page-height: 100000px;
  --page-scroll: 0px;
}

.fg1,
.fg2,
.fg3,
.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7,
.bg8,
.bg9,
.bg10,
.bg11,
.bg12,
.bg13,
.bg14,
.bg15,
.bg16,
.bg17,
.bg18,
.bg19,
.bg20 {
  pointer-events: none;
  overflow: visible;
  width: 100lvw;
  position: fixed;
}

.fg3 {
  z-index: 3;
  transform: translateY(calc(var(--page-scroll) / 0.25));
}

.fg2 {
  z-index: 2;
  transform: translateY(calc(var(--page-scroll) / 0.5));
}

.fg1 {
  z-index: 1;
  transform: translateY(calc(var(--page-scroll) / 0.75));
}

.bg1 {
  z-index: -1;
  transform: translateY(calc(var(--page-scroll) / 1.25));
}

.bg2 {
  z-index: -2;
  transform: translateY(calc(var(--page-scroll) / 1.5));
}

.bg3 {
  z-index: -3;
  transform: translateY(calc(var(--page-scroll) / 1.75));
}

.bg4 {
  z-index: -4;
  transform: translateY(calc(var(--page-scroll) / 2));
}

.bg5 {
  z-index: -5;
  transform: translateY(calc(var(--page-scroll) / 2.25));
}

.bg6 {
  z-index: -6;
  transform: translateY(calc(var(--page-scroll) / 2.5));
}

.bg7 {
  z-index: -7;
  transform: translateY(calc(var(--page-scroll) / 2.75));
}

.bg8 {
  z-index: -8;
  transform: translateY(calc(var(--page-scroll) / 3));
}

.bg9 {
  z-index: -9;
  transform: translateY(calc(var(--page-scroll) / 3.25));
}

.bg10 {
  z-index: -10;
  transform: translateY(calc(var(--page-scroll) / 3.5));
}

.bg11 {
  z-index: -11;
  transform: translateY(calc(var(--page-scroll) / 3.75));
}

.bg12 {
  z-index: -12;
  transform: translateY(calc(var(--page-scroll) / 4));
}

.bg13 {
  z-index: -13;
  transform: translateY(calc(var(--page-scroll) / 4.25));
}

.bg14 {
  z-index: -14;
  transform: translateY(calc(var(--page-scroll) / 4.5));
}

.bg15 {
  z-index: -15;
  transform: translateY(calc(var(--page-scroll) / 4.75));
}

.bg16 {
  z-index: -16;
  transform: translateY(calc(var(--page-scroll) / 5));
}

.bg17 {
  z-index: -17;
  transform: translateY(calc(var(--page-scroll) / 5.25));
}

.bg18 {
  z-index: -18;
  transform: translateY(calc(var(--page-scroll) / 5.5));
}

.bg19 {
  z-index: -19;
  transform: translateY(calc(var(--page-scroll) / 5.75));
}

.bg20 {
  z-index: -20;
  transform: translateY(calc(var(--page-scroll) / 6));
}

@media (prefers-reduced-motion: reduce) {

  .fg1,
  .fg2,
  .fg3,
  .bg1,
  .bg2,
  .bg3,
  .bg4,
  .bg5,
  .bg6,
  .bg7,
  .bg8,
  .bg9,
  .bg10,
  .bg11,
  .bg12,
  .bg13,
  .bg14,
  .bg15,
  .bg16,
  .bg17,
  .bg18,
  .bg19,
  .bg20 {
    transform: none;
  }
}

.bg1-stars,
.bg2-stars,
.bg3-stars,
.bg4-stars,
.bg5-stars,
.bg6-stars,
.bg7-stars,
.bg8-stars,
.bg9-stars,
.bg10-stars,
.bg11-stars,
.bg12-stars,
.bg13-stars,
.bg14-stars,
.bg15-stars,
.bg16-stars,
.bg17-stars,
.bg18-stars,
.bg19-stars,
.bg20-stars {
  position: absolute;
  width: 100lvw;
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-position: top center;
}

.bg18-stars {
  height: calc((var(--page-height) - 100lvh) / 0.75 + 100lvh);
  background-image: url('stars1.webp');
}

.bg19-stars {
  height: calc((var(--page-height) - 100lvh) / 5.75 + 100lvh);
  background-image: url('stars2.webp');
}

.bg20-stars {
  height: calc((var(--page-height) - 100lvh) / 6 + 100lvh);
  background-image: url('stars3.webp');
}

.moon {
  position: absolute;
  width: 100lvw;
  height: 100lvh;
  background-size: 170px 170px;
  background-repeat: no-repeat;
  background-position: top max(30px, min(200px, calc(100lvh - 200px))) right 15lvw;
  background-image: url('moon.webp');
}

.fg1-clouds-left {
  --sizex: 485px;
  --sizey: 825px;
  position: absolute;
  top: 100lvh;
  width: 100lvw;
  height: round(down, calc((var(--page-height) - 100lvh) / 0.75 - var(--fg1-cloud-bottom-spacing)), var(--sizey));
  background-size: var(--sizex) var(--sizey);
  background-repeat: repeat-y;
  background-position: top left min(calc(50lvw - var(--content-width) * 0.5 - var(--sizex) + var(--content-clouds-allowed-overlap)),
      calc(-0.3 * var(--sizex)));
  background-image: url('cloudsfgleft.webp');
}

.fg1-clouds-right {
  --sizex: 482px;
  --sizey: 829px;
  position: absolute;
  top: 100lvh;
  width: 100lvw;
  height: round(down, calc((var(--page-height) - 100lvh) / 0.75 - var(--fg1-cloud-bottom-spacing)), var(--sizey));
  background-size: var(--sizex) var(--sizey);
  background-repeat: repeat-y;
  background-position: top right min(calc(50lvw - var(--content-width) * 0.5 - var(--sizex) + var(--content-clouds-allowed-overlap)),
      calc(-0.3 * var(--sizex)));
  background-image: url('cloudsfgright.webp');
}

.bg2-clouds {
  --sizex: 1674px;
  --sizey: 1277px;
  position: absolute;
  top: 100lvh;
  width: 100lvw;
  height: round(down, calc((var(--page-height) - 100lvh) / 1.5 - var(--bg2-cloud-bottom-spacing)), var(--sizey));
  background-size: var(--sizex) var(--sizey);
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url('cloudsbg1.webp');
}

.bg4-clouds {
  --sizex: 1069px;
  --sizey: 1052px;
  position: absolute;
  top: 100lvh;
  width: 100lvw;
  height: round(down, calc((var(--page-height) - 100lvh) / 2 - var(--bg4-cloud-bottom-spacing)), var(--sizey));
  background-size: var(--sizex) var(--sizey);
  background-repeat: repeat;
  background-position: top center;
  background-image: url('cloudsbg2.webp')
}

@keyframes wave-move {
  from {
    background-position-x: 0, 0;
  }

  to {
    background-position-x: var(--sizex), 0;
  }
}

.fg3-wave {
  --sizex: 726px;
  --sizey: 91px;
  position: absolute;
  top: calc((var(--page-height) - 100lvh) / 0.25 + 100lvh - var(--sizey));
  width: 100lvw;
  height: calc(var(--sizey) + 100lvh);
  background-size: var(--sizex) var(--sizey), 100lvw 100lvh;
  background-repeat: repeat-x, no-repeat;
  background-position: top center, top var(--sizey) center;
  background-image: url('wavefg2.webp'), linear-gradient(var(--bg-color), var(--bg-color));
  animation: wave-move var(--wave-move-time) linear infinite;
}

/* wave offsets are chosen to look good */
/* not based on anything physical */
.fg1-wave {
  --sizex: 240px;
  --sizey: 33px;
  position: absolute;
  top: calc((var(--page-height) - 100lvh) / 0.75 + 100lvh - var(--sizey) - 120px);
  width: 100lvw;
  height: calc(var(--sizey) + 100lvh);
  background-size: var(--sizex) var(--sizey), 100lvw 100lvh;
  background-repeat: repeat-x, no-repeat;
  background-position: top center, top var(--sizey) center;
  background-image: url('wavefg1.webp'), linear-gradient(var(--bg-color), var(--bg-color));
  animation: wave-move var(--wave-move-time) linear infinite;
}

.bg1-wave {
  --sizex: 144px;
  --sizey: 22px;
  position: absolute;
  top: calc((var(--page-height) - 100lvh) / 1.25 + 100lvh - var(--sizey) - 160px);
  width: 100lvw;
  height: calc(var(--sizey) + 100lvh);
  background-size: var(--sizex) var(--sizey), 100lvw 100lvh;
  background-repeat: repeat-x, no-repeat;
  background-position: top center, top var(--sizey) center;
  background-image: url('wavebg1.webp'), linear-gradient(var(--bg-color), var(--bg-color));
  animation: wave-move var(--wave-move-time) linear infinite;
}

.bg3-wave {
  --sizex: 102px;
  --sizey: 17px;
  position: absolute;
  top: calc((var(--page-height) - 100lvh) / 1.75 + 100lvh - var(--sizey) - 180px);
  width: 100lvw;
  height: calc(var(--sizey) + 100lvh);
  background-size: var(--sizex) var(--sizey), 100lvw 100lvh;
  background-repeat: repeat-x, no-repeat;
  background-position: top center, top var(--sizey) center;
  background-image: url('wavebg2.webp'), linear-gradient(var(--bg-color), var(--bg-color));
  animation: wave-move var(--wave-move-time) linear infinite;
}

@media (prefers-reduced-motion: reduce) {

  .fg3-wave,
  .fg1-wave,
  .bg1-wave,
  .bg3-wave {
    animation: none;
  }
}