:root { --bg: #36552a; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; }
.page { position: relative; width: min(100vw, 177.86vh); height: auto; aspect-ratio: 1024.5 / 576; overflow: hidden; }
.page img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; display: block; z-index: 2; }
.hotspot:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; border-radius: 4px; }
/* Main-menu buttons on page 1 */
.home .p1-o-nas { left: 33.0%; top: 25.5%; width: 27.0%; height: 8.0%; }
.home .p1-dof { left: 32.3%; top: 34.5%; width: 27.0%; height: 8.5%; }
.home .p1-events { left: 32.8%; top: 43.2%; width: 27.0%; height: 8.5%; }
.home .p1-real { left: 32.6%; top: 52.0%; width: 27.0%; height: 8.5%; }
.home .p1-effects { left: 32.8%; top: 61.0%; width: 27.0%; height: 8.5%; }
.home .p1-contact { left: 32.7%; top: 70.0%; width: 27.0%; height: 9.0%; }
/* Existing top-left return/menu graphic on pages 2-7 */
.page .menu-hotspot { left: 0; top: 0; width: 8.0%; height: 13.0%; }
/* Event subpages 8-11 show the existing WYDARZENIA return graphic */
.page.events-sub .menu-hotspot { width: 8.5%; height: 8.0%; }
@media (min-width: 1200px) {
  .page { width: 1024.5px; height: 576px; }
}