@font-face {
  font-family: Prophet;
  src: url("assets/fonts/prophet-extrabold.otf") format("opentype");
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: Teletext;
  src: url("assets/fonts/teletext-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #FFEDC4; color: #000; }
.entrance {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.composition {
  position: relative;
  width: min(100vw, calc(100svh * 1.65909));
  aspect-ratio: 2336 / 1408;
  container-type: inline-size;
}
h1 {
  position: absolute;
  top: 5.25%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font: 800 3.3cqw / 1.1 Prophet, Arial, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -.012em;
}
.curved-wall {
  position: absolute;
  top: 15.05%;
  left: 50%;
  transform: translateX(-50%);
  width: 54.9%;
  height: auto;
  display: block;
}
.tagline {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translateX(-50%);
  margin: 0;
  font: 400 1.43cqw / 1.2 Teletext, monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.enter {
  position: absolute;
  top: 85.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 11.5%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
.enter img { display: block; width: 100%; height: auto; filter: url(#enter-ink); }
.enter:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.filter-definitions { position: absolute; overflow: hidden; pointer-events: none; }
@media (max-aspect-ratio: 4/5) {
  .composition { width: 100%; aspect-ratio: auto; height: 100svh; min-height: 520px; }
  h1 { top: 10%; font-size: 4.9cqw; }
  .curved-wall { top: 25%; width: 90%; }
  .tagline { top: auto; bottom: 24%; width: 92%; text-align: center; font-size: 2.55cqw; }
  .enter { top: auto; bottom: 10%; width: 28%; min-height: 44px; }
}