* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: linear-gradient(#548ff0, #9cb6fa 55%, #fad4d3);
}
main {
  position: fixed;
  width: min(100vw, 56.221889vh);
  width: min(100vw, 56.221889dvh);
  aspect-ratio: 750/1334;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  isolation: isolate;
}
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.heading {
  animation: fade 0.9s 0.15s both;
}
.entrance {
  position: absolute;
  inset: 0;
  animation: fade 0.8s .6s both;
  pointer-events: none;
}
.entrance .art {
  animation: bob 2.5s .4s ease-in-out infinite;
}
.people {
  animation: people-in 1.15s .5s both cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes people-in {
  from {
    opacity: 0;
    transform: translate(-6%, 5%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.65%);
  }
}
button {
  position: absolute;
  border: 0;
  background: none;
  color: transparent;
  cursor: pointer;
  padding: 0;
}
button:focus-visible {
  outline: 2px solid white;
}
#entry {
  left: 32%;
  top: 42.3538%;
  width: 36%;
  height: 8.6207%;
  pointer-events: auto;
  animation: bob-button 2.5s 1.9s ease-in-out infinite;
}
@keyframes bob-button {
  50% {
    transform: translateY(-7.5%);
  }
}
#music {
  left: 85.3333%;
  top: 1.4993%;
  width: 12%;
  height: 6.7466%;
  z-index: 4;
}
#music img {
  position: absolute;
  width: 833.3333%;
  height: 1482.2222%;
  left: -711.1111%;
  top: -22.2222%;
  clip-path: inset(1.4993% 2.6667% 91.7541% 85.3333%);
  transform-origin: 91.3333% 4.8726%;
  pointer-events: none;
  animation: spin 5s linear infinite;
  animation-play-state: paused;
}
#music[aria-pressed="true"] img {
  animation-play-state: running;
}
#music[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  left: 49%;
  top: 12%;
  height: 76%;
  width: 3%;
  border-radius: 2px;
  background: white;
  transform: rotate(42deg);
  box-shadow: 0 0 2px #3667bc;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#notice {
  position: absolute;
  z-index: 5;
  top: 51.724%;
  left: 10%;
  width: 80%;
  padding: 3.333%;
  border-radius: 20px;
  background: #fffffff2;
  color: #185ab5;
  text-align: center;
  font: clamp(12px, 3.2vw, 24px) system-ui;
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::after {
    animation: none !important;
  }
}
.organizer {
  position: absolute;
  left: 22.6667%;
  top: 92.2039%;
  width: 54.5333%;
  height: 4.1979%;
  filter: drop-shadow(1px 0 white) drop-shadow(-1px 0 white)
    drop-shadow(0 1px white) drop-shadow(0 -1px white);
}
#rules {
  position: absolute;
  inset: 0;
  z-index: 3;
}
#rules[hidden] {
  display: none;
}
#back {
  left: 4%;
  top: 2%;
  width: 27%;
  height: 6%;
  z-index: 4;
}
body.rules-open .heading,
body.rules-open .people,
body.rules-open .entrance {
  visibility: hidden;
}