:root { color-scheme: dark; background: #0c142d; }
* { box-sizing: border-box; }
body { margin: 0; }
.dreamscapes { display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; }
.opening-scene { position: relative; width: min(100%, calc(100vh * 1672 / 941)); width: min(100%, calc(100dvh * 1672 / 941)); aspect-ratio: 1672 / 941; }
.opening-art { display: block; width: 100%; height: auto; }
/* Coordinates use the supplied 1672 x 941 artwork. Keeping the original
   aspect ratio makes the link follow the Carnival portal at every width.
   There are deliberately no links or overlays over the other seven portals. */
.carnival-entry {
  position: absolute;
  left: 50.5%;
  top: 29.3%;
  width: 18.9%;
  height: 31.1%;
  border-radius: 48% 48% 0 0 / 28% 28% 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: #ffd87c33;
}
.carnival-entry:hover { box-shadow: inset 0 0 22px #ffca6840; }
.carnival-entry:focus-visible { outline: 3px solid #ffe1a0; outline-offset: 3px; box-shadow: 0 0 20px #ffca6870; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }