/* Made by assets-src/closing/build_closing.py. The pictures, their shapes, where the moon is,
   where the words go (the calm sky inside the arch), and the lanterns and the pavilion, in %
   of the picture. */

.closing {
  --pic-r: 0.5628;
  --moon-l: 28.16%; --moon-t: 3.23%; --moon-w: 45.48%;
  --in-l: 16%; --in-r: 84%; --in-t: 20%; --in-b: 66%;
  --in-l-n: 0.16; --in-r-n: 0.84; --in-t-n: 0.2; --in-b-n: 0.66;
  --lamp1-x: 15%; --lamp1-y: 91%; --lamp2-x: 84%; --lamp2-y: 91%;
  --pav-x: 50%; --pav-y: 77%;
  --shape: phone;
}
.cl-scene { background-image: url(night-phone.webp); }
.cl-moon { background-image: url(moon-phone.webp); }

@media (min-aspect-ratio: 5/8) {
  html:root .closing {
    --pic-r: 0.7500;
    --moon-l: 26.43%; --moon-t: -1.24%; --moon-w: 45.12%;
    --in-l: 18%; --in-r: 82%; --in-t: 19%; --in-b: 62%;
    --in-l-n: 0.18; --in-r-n: 0.82; --in-t-n: 0.19; --in-b-n: 0.62;
    --lamp1-x: 15%; --lamp1-y: 84%; --lamp2-x: 83%; --lamp2-y: 84%;
    --pav-x: 50%; --pav-y: 67%;
    --shape: tab;
  }
  html:root .cl-scene { background-image: url(night-tab.webp); }
  html:root .cl-moon { background-image: url(moon-tab.webp); }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .closing {
    --pic-r: 1.3333;
    --moon-l: 37.36%; --moon-t: -0.18%; --moon-w: 25.83%;
    --in-l: 20%; --in-r: 80%; --in-t: 18%; --in-b: 58%;
    --in-l-n: 0.2; --in-r-n: 0.8; --in-t-n: 0.18; --in-b-n: 0.58;
    --lamp1-x: 16%; --lamp1-y: 81%; --lamp2-x: 84%; --lamp2-y: 81%;
    --pav-x: 50%; --pav-y: 67%;
    --shape: land;
  }
  html.is-tablet .cl-scene { background-image: url(night-land.webp); }
  html.is-tablet .cl-moon { background-image: url(moon-land.webp); }
}