* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #0b0b0d; color: #e6e0d6; font-family: Georgia, 'Times New Roman', serif; }
.landing { height: 100vh; height: 100dvh; overflow: hidden; }
.landing main { height: 100%; display: grid; place-items: center; overflow: hidden; }
.landing .artwork { width: min(100vw, calc(100vh * 1672 / 941)); width: min(100vw, calc(100dvh * 1672 / 941)); }
.artwork { position: relative; width: 100%; }
.artwork img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; display: block; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hotspot[hidden] { display: none; }
.hotspot:focus-visible { outline: 2px solid #b89a61; outline-offset: 2px; }
.hotspot[aria-disabled="true"] { pointer-events: none; cursor: default; }
.rose { left: 9%; top: 58%; width: 10%; height: 34%; }
.uzi { left: 7.5%; top: 17%; width: 12%; height: 23%; }
.hand { left: 22.5%; top: 43%; width: 5.5%; height: 14%; }
.skull { left: 83%; top: 85%; width: 11%; height: 15%; }
.skunk { left: 31%; top: 62%; width: 15%; height: 18%; }
.weather { background: #171e24; font-family: Arial, sans-serif; }
.weather main { max-width: 1536px; margin: auto; }
.date-bar { padding: 10px 2%; background: #171e24; }
.date-bar select { max-width: 100%; padding: 8px 32px 8px 12px; border: 1px solid #34404a; border-radius: 8px; background: #171e24; color: #f3f5f8; font: inherit; }
.weather .temperature { left: 1.7%; top: 38.5%; width: 8.5%; height: 4.5%; }
.weather .precipitation { left: 10.5%; top: 38.5%; width: 8.5%; height: 4.5%; }
.weather [data-mode="precipitation"] .temperature { left: 2%; width: 9%; }
.weather [data-mode="precipitation"] .precipitation { left: 12%; width: 9%; }
.weather [data-date="november"][data-mode="precipitation"] .temperature,
.weather [data-date="november"][data-mode="precipitation"] .precipitation { top: 42.5%; height: 4.5%; }
.weather .image-date { left: 2%; top: 5.4%; width: 24%; height: 4.8%; }
.placeholder { min-height: 100vh; display: grid; place-items: center; }
.placeholder h1 { font-weight: 400; font-size: 1.5rem; }
