/* Made by assets-src/countdown/build_countdown.py: each shape's sky and clouds, the moon, and
   where the words go (in % of the picture's height). */

/* Phones: 9:16. */
.countdown { --cd-r: 0.56280; --cd-shape: "phone"; --moon-x: 51.43%; --moon-y: 33.09%; --moon-rx: 9.236%; --moon-ry: 5.198%; --w-head: 7.0%; --w-date: 16.8%; --w-nums: 56.4%; --w-line: 67.6%; --w-btn: 91.2%; }
.countdown :is(.cd-sky, .cd-moon) { background-image: url(sky.webp); }
.countdown :is(.cd-clouds, .cd-cover) { background-image: url(clouds.webp); }

/* Tablets upright, and the laptop column: 3:4. */
@media (min-aspect-ratio: 5/8) {
  html:root .countdown { --cd-r: 0.75000; --cd-shape: "tab"; --moon-x: 50.07%; --moon-y: 29.56%; --moon-rx: 7.559%; --moon-ry: 5.669%; --w-head: 6.2%; --w-date: 17.4%; --w-nums: 56.0%; --w-line: 67.0%; --w-btn: 91.0%; }
  html:root .countdown :is(.cd-sky, .cd-moon) { background-image: url(sky-tab.webp); }
  html:root .countdown :is(.cd-clouds, .cd-cover) { background-image: url(clouds-tab.webp); }
}

/* Tablets sideways: 4:3. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .countdown { --cd-r: 1.33333; --cd-shape: "land"; --moon-x: 49.95%; --moon-y: 32.31%; --moon-rx: 5.418%; --moon-ry: 7.224%; --w-head: 9.0%; --w-date: 21.6%; --w-nums: 60.0%; --w-line: 71.0%; --w-btn: 86.5%; }
  html.is-tablet .countdown :is(.cd-sky, .cd-moon) { background-image: url(sky-land.webp); }
  html.is-tablet .countdown :is(.cd-clouds, .cd-cover) { background-image: url(clouds-land.webp); }
}