/* The page shown until the collection has minted out. One scene, drawn in art pixels: --s is how many screen pixels
   one art pixel takes, set by soon.js from the width of the window. Rows, top to bottom: the street (30), the fence
   (15, from row 26), the lawn (from row 41). The scene is 53 rows tall. */
:root { --navy: #1f2f52; --denim: #5f7fae; --ink: #15151a; --s: 4; --u: calc(var(--s) * 1px); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--navy); color: #fff; font-family: Tahoma, Verdana, 'Lucida Grande', Geneva, sans-serif; font-size: 12px; line-height: 1.45; overflow-x: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
img, .scene div { image-rendering: crisp-edges; image-rendering: pixelated; }

.top { padding: 20px 16px 16px; text-align: center; }
.top img { display: inline-block; width: calc(24 * var(--u)); height: calc(8 * var(--u)); }

.scene { position: relative; height: calc(53 * var(--u)); overflow: hidden; background: #8fc4e8; border-top: var(--u) solid var(--ink); border-bottom: var(--u) solid var(--ink); }
.scene > div { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.street { top: 0; height: calc(30 * var(--u)); background-image: url(assets/scene-street.png); background-size: calc(89 * var(--u)) calc(30 * var(--u)); }
.fence { top: calc(26 * var(--u)); height: calc(15 * var(--u)); background-image: url(assets/scene-fence.png); background-size: calc(24 * var(--u)) calc(15 * var(--u)); }
.lawn { top: calc(41 * var(--u)); height: calc(12 * var(--u)); background-image: url(assets/scene-lawn.png); background-size: calc(24 * var(--u)) calc(24 * var(--u)); background-repeat: repeat; }
.lane { top: 0; bottom: 0; }
.dad { position: absolute; left: 0; width: calc(24 * var(--u)); height: calc(24 * var(--u)); background-image: url(assets/cast.png); background-repeat: no-repeat; will-change: transform; }

main { padding: 20px 16px 40px; }
.box { max-width: 300px; margin: 0 auto; background: #fff; color: var(--ink); border: 1px solid var(--denim); }
.box h1 { margin: 0; padding: 3px 8px; background: var(--denim); color: #fff; font-size: 12px; }
.box p { margin: 0; padding: 8px 8px 0; }
.box p:last-child { padding-bottom: 8px; }
.x { margin: 14px 0 0; text-align: center; }
.x a { color: #fff; text-decoration: none; padding: 6px 4px; }
.x a:hover, .x a:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .box h1 { font-size: 13px; padding: 4px 8px; }
}