:root {
  color-scheme: light;
  background: var(--sky-top);
  --sky-top: #88bad5;
  --sky-middle: #afcfdf;
  --sky-low: #ccdee2;
  --sky-bottom: #e5e7dc;
  --cloud-color: #fafbf4;
  --cloud-shade: #e7eff0;
  --sun-color: #f8f3d9;
  --sun-opacity: 0.83;
  --moon-opacity: 0;
  --stars-opacity: 0;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 280px; }

.sky {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-middle) 45%, var(--sky-low) 76%, var(--sky-bottom) 100%);
}

.cloud-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cloudscape {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sun, .moon {
  --body-size: clamp(38px, 4.2vw, 68px);
  position: absolute;
  top: clamp(calc(var(--body-size) / 2 + 24px), var(--body-y, 17%), calc(100% - var(--body-size) / 2 - 24px));
  left: clamp(calc(var(--body-size) / 2 + 24px), var(--body-x, 76%), calc(100% - var(--body-size) / 2 - 24px));
  width: var(--body-size);
  height: var(--body-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.sun {
  border-radius: 50%;
  background: var(--sun-color);
  opacity: var(--sun-opacity);
}

.moon {
  color: #f4f0dc;
  opacity: var(--moon-opacity);
}

.stars {
  position: absolute;
  inset: 0;
  opacity: var(--stars-opacity);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

.star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #f6f2dd;
}

.cloud {
  position: absolute;
  top: var(--cloud-top);
  left: 0;
  width: var(--cloud-width);
  color: var(--cloud-color);
  opacity: var(--cloud-opacity);
  will-change: transform;
}

.cloud svg { display: block; width: 100%; height: auto; }