@charset "UTF-8";
stylish-button {
  cursor: pointer;
}
stylish-button.disabled {
  pointer-events: none;
  filter: grayscale(1);
}
stylish-button.disabled::part(border) {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
}
stylish-button::part(border) {
  border: 2px solid black;
  border-radius: 0.5em;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));
  transform: translate3d(0, 0em, 0);
  display: inline-block;
  transition-property: transform, filter;
  transition-duration: 0.1s;
}
stylish-button::part(border):active {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
  transform: translate3d(0, 0.25em, 0);
}
stylish-button::part(button) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: black;
  padding: 0em 0.5em;
  font-family: looking-flowers-caps;
  font-size: 2em;
  line-height: 0.9em;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 0.25em;
  cursor: pointer;
}
stylish-button::part(label) {
  color: white;
}

section address {
  margin-bottom: 1em;
}
section address a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
section address img {
  width: 5em;
}
section address p {
  text-align: left;
  margin-top: 0.5em;
  margin-left: 1em;
}
section stylish-button {
  margin-bottom: 2em;
  display: block;
}
section figure.map {
  width: calc(100% + 4em);
  position: relative;
  left: -2em;
  margin-bottom: 1em;
}
section figure.map img {
  width: 100%;
}
section figure.camera {
  width: 50%;
  margin: auto;
  margin-bottom: 1em;
}
section figure.camera img {
  width: 100%;
}
section figure.camera figcaption {
  text-align: center;
  margin-top: 0.5em;
}

section:has(+ section#ceremony) article {
  padding-bottom: 15%;
}

section#ceremony img.planetarium {
  position: absolute;
  width: 75%;
  left: 12.5%;
  top: -15cqw;
  clip-path: inset(0 0 20% 0);
}

section:has(+ section#party-hard) article {
  padding-bottom: 35%;
}

section#party-hard img.narr {
  position: absolute;
  width: 75%;
  left: 12.5%;
  top: -30cqw;
  transform: rotate(-9deg);
  clip-path: inset(0 0 12% 0);
}

section:has(+ section#mystery-castle) article {
  padding-bottom: 35%;
}

section#mystery-castle img.castle {
  position: absolute;
  width: 75%;
  left: 12.5%;
  top: -31cqw;
  clip-path: inset(0 0 20% 0);
}

action-toolbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 3em;
  z-index: 100;
  bottom: -1px;
  gap: 1em;
  background-color: #6a5db8;
  border-top: 1px solid #9b92cf;
}
action-toolbar:has(button.guestbook.open) button.spotify, action-toolbar:has(button.guestbook.open) button.celebrate {
  display: none;
}
action-toolbar:has(button.guestbook.open) button.guestbook-accept, action-toolbar:has(button.guestbook.open) button.guestbook-close {
  display: flex;
}
action-toolbar > button {
  width: 3em;
  height: 3em;
  position: relative;
  top: -1em;
}
action-toolbar > button img {
  width: 100%;
}
action-toolbar > button.guestbook-accept, action-toolbar > button.guestbook-close {
  display: none;
  border-radius: 8px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
action-toolbar > button.guestbook-accept img, action-toolbar > button.guestbook-close img {
  width: 75%;
}
action-toolbar > button.guestbook {
  background: hotpink;
  border-radius: 8px;
  overflow: hidden;
}
action-toolbar > button.guestbook img {
  width: 80%;
}
action-toolbar > button.guestbook img.close {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  visibility: hidden;
  opacity: 0.75;
}
action-toolbar > button.guestbook.open {
  pointer-events: none;
  background: gray;
}
action-toolbar > button.guestbook.open img {
  filter: grayscale(1);
}

guest-book {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr 10em;
  grid-template-columns: 1fr;
  background: Lavender;
  padding-bottom: 3em;
}
guest-book header {
  text-align: center;
  padding-top: 0.5em;
  background: hotpink;
}
guest-book header h2 {
  font-family: "peachy-keen-jf";
  font-size: 1.5em;
  margin: 0;
  color: white;
}
guest-book header span.count {
  margin-top: 0.5em;
  display: block;
  background: pink;
  padding: 0.25em 0.5em;
  font-family: "puffin-display-soft";
  color: lightgoldenrodyellow;
}
guest-book header span.count::after {
  content: " Einträge";
}
guest-book div.content {
  overflow: auto;
  position: relative;
  grid-area: 2/1/span 2/1;
  color: white;
  font-family: "puffin-display-soft";
  transition: padding 0.25s ease-in-out;
  padding-bottom: 11em;
}
guest-book div.content:has(~ div.input.hidden) {
  padding-bottom: 2em;
}
guest-book div.input {
  grid-area: 3/1/span 1/1;
  padding-bottom: 0;
  position: relative;
  top: 1px;
  transform: translateY(0%);
  transition: transform 0.25s ease-in-out;
}
guest-book div.input.hidden {
  transform: translateY(100%);
}
guest-book div.input.hidden textarea {
  filter: none;
}
guest-book div.input textarea {
  background: white;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-top: 2px solid black;
  border-radius: 0;
  border-bottom: none;
  filter: drop-shadow(0px -4px 6px rgba(0, 0, 0, 0.25));
  transition: filter 0.25s ease-in-out;
  font-family: "puffin-display-soft";
  padding: 0.5em 1em;
  padding-bottom: 1em;
  line-height: 1.5em;
}
guest-book h3 {
  text-align: center;
  color: dimgray;
  background: rgba(255, 255, 255, 0.5);
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  margin-top: 1em;
  padding: 0.25em 2em;
  border-radius: 8px;
}
guest-book .entry {
  padding: 2em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-top: 2em;
}
guest-book .entry:nth-of-type(odd) {
  padding-left: 3em;
  padding-right: 1.5em;
}
guest-book .entry:nth-of-type(odd) .avatar {
  float: left;
  margin-left: -1.5em;
  margin-right: 1em;
}
guest-book .entry:nth-of-type(odd) time {
  margin-right: 0.5em;
}
guest-book .entry:nth-of-type(even) {
  padding-left: 1.5em;
  padding-right: 3em;
}
guest-book .entry:nth-of-type(even) .avatar {
  float: right;
  margin-right: -1.5em;
  margin-left: 1em;
}
guest-book .entry:nth-of-type(even) time {
  margin-left: 0.5em;
  order: -1;
}
guest-book .entry .avatar {
  overflow: hidden;
  border-radius: 10px;
  margin-top: -0.5em;
  margin-bottom: 1em;
  position: relative;
  background: #f2f2f2;
  border: 2px solid white;
  width: 6em;
  height: 6em;
}
guest-book .entry .avatar[data-costume=archer] div.mask {
  -webkit-mask-image: url("assets/img/costumes/archer/head_mask.png");
          mask-image: url("assets/img/costumes/archer/head_mask.png");
}
guest-book .entry .avatar[data-costume=archer] div.costume {
  background-image: url("assets/img/costumes/archer/head.png");
}
guest-book .entry .avatar[data-costume=witch] div.mask {
  -webkit-mask-image: url("assets/img/costumes/witch/head_mask.png");
          mask-image: url("assets/img/costumes/witch/head_mask.png");
}
guest-book .entry .avatar[data-costume=witch] div.costume {
  background-image: url("assets/img/costumes/witch/head.png");
}
guest-book .entry .avatar[data-costume=wizard] div.mask {
  -webkit-mask-image: url("assets/img/costumes/wizard/head_mask.png");
          mask-image: url("assets/img/costumes/wizard/head_mask.png");
}
guest-book .entry .avatar[data-costume=wizard] div.costume {
  background-image: url("assets/img/costumes/wizard/head.png");
}
guest-book .entry .avatar[data-costume=dino] div.mask {
  -webkit-mask-image: url("assets/img/costumes/dino/head_mask.png");
          mask-image: url("assets/img/costumes/dino/head_mask.png");
}
guest-book .entry .avatar[data-costume=dino] div.costume {
  background-image: url("assets/img/costumes/dino/head.png");
}
guest-book .entry .avatar[data-costume=fairy] div.mask {
  -webkit-mask-image: url("assets/img/costumes/fairy/head_mask.png");
          mask-image: url("assets/img/costumes/fairy/head_mask.png");
}
guest-book .entry .avatar[data-costume=fairy] div.costume {
  background-image: url("assets/img/costumes/fairy/head.png");
}
guest-book .entry .avatar[data-costume=knight] div.mask {
  -webkit-mask-image: url("assets/img/costumes/knight/head_mask.png");
          mask-image: url("assets/img/costumes/knight/head_mask.png");
}
guest-book .entry .avatar[data-costume=knight] div.costume {
  background-image: url("assets/img/costumes/knight/head.png");
}
guest-book .entry .avatar[data-costume=spaceman] div.mask {
  -webkit-mask-image: url("assets/img/costumes/spaceman/head_mask.png");
          mask-image: url("assets/img/costumes/spaceman/head_mask.png");
}
guest-book .entry .avatar[data-costume=spaceman] div.costume {
  background-image: url("assets/img/costumes/spaceman/head.png");
}
guest-book .entry .avatar[data-costume=princess] div.mask {
  -webkit-mask-image: url("assets/img/costumes/princess/head_mask.png");
          mask-image: url("assets/img/costumes/princess/head_mask.png");
}
guest-book .entry .avatar[data-costume=princess] div.costume {
  background-image: url("assets/img/costumes/princess/head.png");
}
guest-book .entry .avatar[data-costume=harlekin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/harlekin/head_mask.png");
          mask-image: url("assets/img/costumes/harlekin/head_mask.png");
}
guest-book .entry .avatar[data-costume=harlekin] div.costume {
  background-image: url("assets/img/costumes/harlekin/head.png");
}
guest-book .entry .avatar[data-costume=goblin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/goblin/head_mask.png");
          mask-image: url("assets/img/costumes/goblin/head_mask.png");
}
guest-book .entry .avatar[data-costume=goblin] div.costume {
  background-image: url("assets/img/costumes/goblin/head.png");
}
guest-book .entry .avatar img {
  width: 100%;
  height: auto;
}
guest-book .entry .avatar .mask {
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  width: 100%;
  height: 100%;
}
guest-book .entry .avatar div.costume {
  position: absolute;
  left: 0;
  top: 0;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
guest-book .entry .message {
  background: aliceblue;
  border-radius: 10px;
  padding: 1em;
  color: black;
  min-height: 6em;
  line-height: 1.5em;
}
guest-book .entry .meta {
  display: flex;
  color: black;
  justify-content: space-between;
  margin-bottom: 0.25em;
}
guest-book .entry .meta .name {
  font-weight: bold;
}
guest-book .entry .meta time {
  color: dimgray;
}
guest-book .entry button.edit {
  margin: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  background: deeppink;
  padding: 0.25em 1em;
  border-radius: 0 0 8px 8px;
  display: block;
}

.table-container {
  border: 1px solid white;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.125);
  padding: 1em;
}

table.score {
  width: 100%;
}
table.score th {
  padding-bottom: 0.5em;
}
table.score tr.is-me td:nth-child(1), table.score tr.is-me td:nth-child(2) {
  color: gold;
}
table.score tr:not(.played) td:nth-child(1) {
  opacity: 0;
}
table.score tr:not(.played) td:nth-child(3), table.score tr:not(.played) td:nth-child(4) {
  opacity: 0;
}
table.score tr *:nth-child(1) {
  text-align: left;
  font-weight: bold;
  padding-right: 0.5em;
}
table.score tr *:nth-child(2) {
  text-align: left;
}
table.score tr *:nth-child(3) {
  text-align: center;
}
table.score tr *:nth-child(4) {
  text-align: center;
}
table.score tr *:nth-child(5) {
  text-align: center;
}
table.score tr td:nth-child(3) {
  color: limegreen;
  font-weight: bold;
  width: 2em;
}
table.score tr td:nth-child(4) {
  color: orangered;
  font-weight: bold;
  width: 2em;
}
table.score tr td:nth-child(5) {
  color: deepskyblue;
  font-weight: bold;
  width: 2em;
}

mystery-castle.has-mystery p.intro {
  display: none;
}
mystery-castle.has-mystery div.points {
  display: block !important;
}
mystery-castle:not(.has-mystery) div.pick {
  display: none;
}
mystery-castle:not(.has-mystery) p.secret {
  display: none;
}
mystery-castle:not(.has-mystery) div.image {
  background-image: url("assets/img/medieval/avatar/placeholder.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
mystery-castle div.avatar-container {
  max-width: 300px;
  container: avatar/inline-size;
  margin: auto;
}
mystery-castle figure.avatar {
  width: 100%;
  position: relative;
  left: -3%;
  padding: 10%;
  padding-left: 14%;
  aspect-ratio: 1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
mystery-castle figure.avatar[data-costume=archer] div.mask {
  -webkit-mask-image: url("assets/img/costumes/archer/head_mask.png");
          mask-image: url("assets/img/costumes/archer/head_mask.png");
}
mystery-castle figure.avatar[data-costume=archer] div.costume {
  background-image: url("assets/img/costumes/archer/head.png");
}
mystery-castle figure.avatar[data-costume=witch] div.mask {
  -webkit-mask-image: url("assets/img/costumes/witch/head_mask.png");
          mask-image: url("assets/img/costumes/witch/head_mask.png");
}
mystery-castle figure.avatar[data-costume=witch] div.costume {
  background-image: url("assets/img/costumes/witch/head.png");
}
mystery-castle figure.avatar[data-costume=wizard] div.mask {
  -webkit-mask-image: url("assets/img/costumes/wizard/head_mask.png");
          mask-image: url("assets/img/costumes/wizard/head_mask.png");
}
mystery-castle figure.avatar[data-costume=wizard] div.costume {
  background-image: url("assets/img/costumes/wizard/head.png");
}
mystery-castle figure.avatar[data-costume=dino] div.mask {
  -webkit-mask-image: url("assets/img/costumes/dino/head_mask.png");
          mask-image: url("assets/img/costumes/dino/head_mask.png");
}
mystery-castle figure.avatar[data-costume=dino] div.costume {
  background-image: url("assets/img/costumes/dino/head.png");
}
mystery-castle figure.avatar[data-costume=fairy] div.mask {
  -webkit-mask-image: url("assets/img/costumes/fairy/head_mask.png");
          mask-image: url("assets/img/costumes/fairy/head_mask.png");
}
mystery-castle figure.avatar[data-costume=fairy] div.costume {
  background-image: url("assets/img/costumes/fairy/head.png");
}
mystery-castle figure.avatar[data-costume=knight] div.mask {
  -webkit-mask-image: url("assets/img/costumes/knight/head_mask.png");
          mask-image: url("assets/img/costumes/knight/head_mask.png");
}
mystery-castle figure.avatar[data-costume=knight] div.costume {
  background-image: url("assets/img/costumes/knight/head.png");
}
mystery-castle figure.avatar[data-costume=spaceman] div.mask {
  -webkit-mask-image: url("assets/img/costumes/spaceman/head_mask.png");
          mask-image: url("assets/img/costumes/spaceman/head_mask.png");
}
mystery-castle figure.avatar[data-costume=spaceman] div.costume {
  background-image: url("assets/img/costumes/spaceman/head.png");
}
mystery-castle figure.avatar[data-costume=princess] div.mask {
  -webkit-mask-image: url("assets/img/costumes/princess/head_mask.png");
          mask-image: url("assets/img/costumes/princess/head_mask.png");
}
mystery-castle figure.avatar[data-costume=princess] div.costume {
  background-image: url("assets/img/costumes/princess/head.png");
}
mystery-castle figure.avatar[data-costume=harlekin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/harlekin/head_mask.png");
          mask-image: url("assets/img/costumes/harlekin/head_mask.png");
}
mystery-castle figure.avatar[data-costume=harlekin] div.costume {
  background-image: url("assets/img/costumes/harlekin/head.png");
}
mystery-castle figure.avatar[data-costume=goblin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/goblin/head_mask.png");
          mask-image: url("assets/img/costumes/goblin/head_mask.png");
}
mystery-castle figure.avatar[data-costume=goblin] div.costume {
  background-image: url("assets/img/costumes/goblin/head.png");
}
mystery-castle figure.avatar img {
  margin: 0 !important;
  width: 100%;
  height: auto;
}
mystery-castle figure.avatar div.image {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: auto;
  container: image/size;
}
mystery-castle figure.avatar div.image .mask {
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  width: 100%;
  height: 100cqw;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
mystery-castle figure.avatar div.image img.avatar {
  place-self: center;
  transform: scale(var(--avatar-ts)) translate(var(--avatar-tx), var(--avatar-ty));
}
mystery-castle figure.avatar div.image img.avatar.tall {
  width: 100%;
  height: auto;
}
mystery-castle figure.avatar div.image img.avatar.wide {
  width: auto;
  height: 100%;
}
mystery-castle figure.avatar div.image div.costume {
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
mystery-castle figure.avatar img.background, mystery-castle figure.avatar img.overlay, mystery-castle figure.avatar div.costume {
  position: absolute;
  left: 0;
  top: 0;
}
mystery-castle figure.avatar div.error {
  position: absolute;
  right: 0;
  height: auto;
  display: none;
}
mystery-castle figure.avatar div.error.visible {
  display: block;
}
mystery-castle figure.avatar div.error.top {
  top: 0;
  width: 20.7%;
}
mystery-castle figure.avatar div.error.bottom {
  bottom: 0;
  width: 20.5%;
  bottom: -1%;
  right: 0.1%;
}
mystery-castle figure.avatar div.points {
  display: none;
  position: absolute;
  left: 0;
  height: auto;
}
mystery-castle figure.avatar div.points .count {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Auriol LT Std";
  font-weight: 800;
}
mystery-castle figure.avatar div.points.plus {
  top: 0;
  width: 24.2%;
}
mystery-castle figure.avatar div.points.plus .count {
  color: green;
  font-size: 1.5em;
  top: 50%;
}
mystery-castle figure.avatar div.points.minus {
  bottom: 0;
  width: 22.6%;
}
mystery-castle figure.avatar div.points.minus .count {
  color: red;
  font-size: 1.25em;
  top: 53%;
}
mystery-castle p.intro {
  margin-top: 1em;
}
mystery-castle shuffle-dice {
  display: block;
}
mystery-castle shuffle-dice button {
  position: relative;
  margin-top: 2em;
  width: 25%;
}
mystery-castle shuffle-dice button:disabled {
  pointer-events: none;
}
mystery-castle shuffle-dice button:disabled img {
  opacity: 0.25;
}
mystery-castle shuffle-dice img {
  width: 100%;
  height: auto;
}
mystery-castle shuffle-dice span.info {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  padding: 0.25em 1em;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.25));
  width: 65cqw;
}
mystery-castle shuffle-dice span.info:empty {
  display: none;
}
mystery-castle div.pick {
  width: 75%;
  margin: auto;
  margin-bottom: 1em;
  position: relative;
  z-index: 9;
}
mystery-castle div.pick.loading {
  pointer-events: none;
}
mystery-castle div.pick.loading input.name {
  color: rgba(0, 0, 0, 0.5);
}
mystery-castle div.pick input.name {
  display: block;
  width: 100%;
  background: white;
  border: 2px solid black;
  text-align: center;
  border-radius: 8px;
  color: black;
  opacity: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
mystery-castle div.pick.correct input.name {
  background: green;
  color: white;
}
mystery-castle div.pick.wrong input.name {
  background: red;
  color: white;
}
mystery-castle div.pick mystery-guest-picker {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 0 0 8px 8px;
  width: 90%;
  left: 5%;
}
mystery-castle div.pick mystery-guest-picker ul li {
  padding: 0.5em 0;
}
mystery-castle div.pick mystery-guest-picker ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
mystery-castle div.pick mystery-guest-picker ul li.info {
  font-style: italic;
  color: gray;
}
mystery-castle p.secret {
  font-style: italic;
  margin-top: -2em;
  background: rgba(255, 215, 0, 0.25);
  border-radius: 8px;
  padding: 1em;
  padding-top: 1.5em;
}
mystery-castle p.secret::before {
  content: "„";
}
mystery-castle p.secret::after {
  content: "“";
}

.rule-container {
  border: 1px solid white;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.125);
  padding: 1em;
}

ol.rules {
  list-style: auto;
  text-align: left;
  width: 90%;
  margin: auto;
}
ol.rules li {
  margin-bottom: 1em;
  padding-left: 0.5em;
}
ol.rules li::marker {
  font-weight: bold;
}

wedding-guide {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}
wedding-guide[available=false], wedding-guide.hidden {
  display: none;
}
wedding-guide > button {
  color: #9b92cf;
  text-align: center;
  padding: 0.1em 1em;
  width: 100%;
  font-family: "looking-flowers-caps";
  font-size: 2em;
  text-transform: lowercase;
  font-weight: bold;
  opacity: 0;
}
wedding-guide > .card {
  position: relative;
  container: card/size;
  width: 100%;
  height: 100%;
  max-width: 600px;
  background-color: DarkSlateBlue;
  border: 1px solid #6a5db8;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 20px 20px 0 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
wedding-guide > .card:has(header.stuck) {
  border-color: #ffe34d;
}
wedding-guide > .card .dont-panic {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100cqh;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
wedding-guide > .card .dont-panic > img.panic {
  width: 50%;
  margin: auto;
}
wedding-guide > .card > .content {
  overflow: auto;
  z-index: 10;
  position: relative;
  width: 100%;
  color: white;
  font-family: "puffin-display-soft";
  padding-bottom: 3em;
}
wedding-guide > .card > .content:not(:has(section)) {
  padding-bottom: 0;
}
wedding-guide > .card section {
  position: relative;
  background: DarkSlateBlue;
  isolation: isolate;
  z-index: 10;
  line-height: 1.5em;
  text-align: center;
  container: section/inline-size;
  width: 100%;
}
wedding-guide > .card section header {
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
  padding-top: 0.5em;
  background: gold;
}
wedding-guide > .card section header h2 {
  font-family: "peachy-keen-jf";
  font-size: 1.5em;
  margin: 0;
  color: red;
}
wedding-guide > .card section header time {
  margin-top: 0.5em;
  display: block;
  background: orange;
  background: rgba(255, 165, 0, 0.5);
  padding: 0.25em 0.5em;
  font-weight: bold;
}
wedding-guide > .card article {
  padding: 2em 2em;
}
wedding-guide > .card article h3 {
  font-family: "peachy-keen-jf";
  font-size: 1.5em;
  margin-bottom: 1em;
  line-height: 1.5em;
  margin-top: 2em;
}
wedding-guide > .card article p {
  margin-bottom: 1em;
}

html, body {
  height: 100%;
}

body {
  overflow: hidden;
}
body:not(.intro-finished) space-container {
  overflow-y: hidden;
}

.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main-container space-container {
  flex: 1;
}

space-container {
  position: relative;
  z-index: 10;
  width: calc(100% + 2px);
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: auto;
  perspective: 8px;
  perspective-origin: bottom right;
  --perspective-translate-x: 0;
}
space-container.locked {
  overflow-y: hidden;
}
space-container > starry-background {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-16px) scale(3) translateX(var(--perspective-translate-x));
  z-index: 1;
}
space-container > atmosphere-layers {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-8px) scale(2) translateX(var(--perspective-translate-x));
  z-index: 2;
  top: 300svh;
}
space-container > floating-text {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-4px) scale(1.5) translateX(var(--perspective-translate-x));
  z-index: 13;
  position: sticky;
  top: 33.3333333333%;
  width: 100%;
  height: 0;
}
space-container > universe-view {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(0px) scale(1) translateX(var(--perspective-translate-x));
  position: relative;
  z-index: 100;
}
space-container > floating-satellite {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-3px) scale(1.375) translateX(var(--perspective-translate-x));
}
space-container > section#cloud1 {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-4px) scale(1.5) translateX(var(--perspective-translate-x));
}
space-container > section#cloud_layer_0 {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-2px) scale(1.25) translateX(var(--perspective-translate-x));
}
space-container > section#cloud_layer_1 {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-4px) scale(1.5) translateX(var(--perspective-translate-x));
}
space-container > section#cloud_layer_2 {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-6px) scale(1.75) translateX(var(--perspective-translate-x));
}
space-container > section#cloud_layer_3 {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-8px) scale(2) translateX(var(--perspective-translate-x));
}
space-container > sky-line {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-2px) scale(1.25) translateX(var(--perspective-translate-x));
  z-index: 15;
  top: 650svh;
  width: 100%;
  height: 100%;
}
space-container > figure#dome {
  position: absolute;
  transform-origin: bottom right;
  transform: translateZ(-0.5px) scale(1.0625) translateX(var(--perspective-translate-x));
}
space-container main > *:first-child article {
  margin-top: 633svh;
  position: relative;
  z-index: 50;
}

menu-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  transition-property: background;
  transition-duration: 0.35s;
  transition-timing-function: linear;
  background: rgba(0, 0, 0, 0.5);
  font-family: puffin-display-soft;
}
menu-overlay:not(.shown) {
  background: rgba(0, 0, 0, 0);
}
menu-overlay:not(.shown) .container {
  transform: translateY(100%);
}
menu-overlay .container {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition-property: transform;
  transition-duration: 0.35s;
  transition-timing-function: ease-in-out;
}
menu-overlay .card {
  width: 100%;
  max-width: 60svh;
  height: 100%;
  overflow-y: auto;
  background: white;
  border: 2px solid black;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  padding: 2em;
  text-align: center;
}
menu-overlay .card h1 {
  font-size: 2em;
  font-weight: bold;
  font-family: "peachy-keen-jf";
}
menu-overlay .card h2 {
  text-decoration: underline;
  margin-bottom: 0.5em;
  font-weight: bold;
}
menu-overlay .card h2:not(:first-child) {
  margin-top: 1.5em;
}
menu-overlay .card p.author {
  font-style: italic;
  margin-bottom: 1em;
  font-size: 0.85em;
  margin-top: -0.5em;
}
menu-overlay .card p {
  margin-bottom: 1em;
}
menu-overlay .card p span.good {
  font-style: italic;
  color: green;
}
menu-overlay .card p span.bad {
  font-style: italic;
  color: red;
}
menu-overlay .card ul li {
  font-size: 0.85em;
  margin-bottom: 0.75em;
  line-height: 1.35em;
}
menu-overlay .card ul li:nth-child(even) {
  color: darkgrey;
}
menu-overlay stylish-button {
  position: absolute;
  bottom: 1em;
}

floating-satellite {
  width: 100%;
  position: absolute;
  top: 125svh;
  z-index: 5;
  display: flex;
  justify-content: center;
}
floating-satellite img {
  height: 20svh;
}

floating-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 2em;
  --inset-top: 100%;
  --inset-bottom: 0%;
}
floating-text p {
  text-align: center;
  font-family: peachy-keen-jf;
  font-size: 3em;
  color: hotpink;
  max-width: 46svh;
  transform: translateY(-50%);
  clip-path: inset(var(--inset-top) 0 var(--inset-bottom) 0);
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;
}
fieldset:disabled {
  opacity: 0.5;
  pointer-events: none;
}
fieldset .option {
  display: flex;
  align-items: center;
  margin: 0 1em;
  gap: 0.25em;
}
fieldset .option label {
  font-size: 3.5em;
  font-weight: bold;
  font-family: looking-flowers-caps;
}
fieldset input, fieldset textarea {
  font-family: looking-flowers-caps;
  font-weight: bold;
  --accent-color: hotpink;
}
fieldset .extraoption {
  width: 100%;
  margin-top: 1.5em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5em;
  font-family: looking-flowers-caps;
}
fieldset .extraoption label {
  font-size: 2em;
  font-family: looking-flowers-caps;
}
fieldset .extraoption input {
  font-size: 0.85em !important;
  margin-top: 0.2em !important;
}
fieldset input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid black;
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
}
fieldset input[type=radio]::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--accent-color);
}
fieldset input[type=radio]:checked::before {
  transform: scale(1);
}
fieldset input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid black;
  display: grid;
  place-content: center;
  cursor: pointer;
}
fieldset input[type=checkbox]::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  transform: scale(0);
  box-shadow: inset 1em 1em var(--accent-color);
}
fieldset input[type=checkbox]:checked::before {
  transform: scale(1);
}
fieldset input[type=text], fieldset textarea {
  width: 100%;
  background: white;
  border: 2px solid black;
  padding: 0em 0.5em;
  font-size: 1.75em;
  text-align: center;
  resize: none;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
}
fieldset input[type=text] + label, fieldset textarea + label {
  font-style: italic;
  margin-top: 0.5em;
}
fieldset input[type=text] textarea, fieldset textarea textarea {
  padding-top: 0.25em;
}

figure#passepartout {
  position: sticky;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  z-index: 100;
  opacity: 1;
  transform-origin: center 50svh;
  pointer-events: none;
}
figure#passepartout.reverse-sticky {
  top: unset;
  bottom: 0;
  order: 1;
}
figure#passepartout.reverse-sticky .horizontal-container {
  top: -100svh;
}
figure#passepartout.fill .background.green.left {
  grid-area: 1/1/span 2/span 1;
}
figure#passepartout.fill .background.green.right {
  grid-area: 1/3/span 2/span 1;
}
figure#passepartout .horizontal-container {
  height: 100svh;
  width: 100%;
  display: grid;
  grid-template-rows: 10svh auto;
  grid-template-columns: 1fr min(100%, 60svh) 1fr;
  position: relative;
}
figure#passepartout .vertical-container {
  position: relative;
  grid-area: 1/2/span 2/span 1;
}
figure#passepartout .background.green {
  background-color: hsl(80, 68%, 70%);
}
figure#passepartout .background.green.left {
  grid-area: 2/1/span 1/span 1;
}
figure#passepartout .background.green.right {
  grid-area: 2/3/span 1/span 1;
}
figure#passepartout .shape {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 1fr 2em;
  height: 100%;
}
figure#passepartout .background-fill {
  background-color: hsl(80, 68%, 70%);
}
figure#passepartout .mask {
  justify-self: stretch;
  background-color: hsl(80, 68%, 70%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 3.5em, 2em 3em, 2em calc(100% - 2em), 70% calc(100% - 0%), calc(100% - 2em) calc(100% - 2.5em), calc(100% - 2em) 3em, 30% 0%, 2em 3em, 0% 3.5em);
}
figure#passepartout figure.flower {
  position: absolute;
}
figure#passepartout figure.flower:nth-of-type(1) {
  left: 80%;
  top: 1em;
}
figure#passepartout figure.flower:nth-of-type(1) svg {
  height: 4svh;
}

figure#hill {
  --grass-background: hsl(80, 68%, 70%);
  position: absolute;
  width: 100%;
  top: 730svh;
  height: 1000px;
  z-index: 20;
}
figure#hill .outline, figure#hill .shape {
  width: 100%;
  height: 100%;
}
figure#hill .outline {
  filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.75));
}
figure#hill .shape {
  background-color: var(--grass-background);
  clip-path: ellipse(200svh 58% at 55% 58%);
}
figure#hill .sign {
  position: absolute;
  top: -6svh;
  left: 50%;
  width: 35svh;
  transform: translate(-50%);
}
figure#hill .sign .plate {
  width: 100%;
  height: auto;
  position: relative;
}
figure#hill .sign .pillar {
  position: absolute;
  background: #6e6e6e;
  border: 1px solid black;
  border-bottom: none;
}
figure#hill .sign .pillar .grass {
  position: relative;
}
figure#hill .sign .pillar .grass [data-name=fill] {
  fill: var(--grass-background);
}
figure#hill .sign .pillar.left {
  width: 2.5svh;
  height: 4.5svh;
  left: 4svh;
  top: 4.5svh;
}
figure#hill .sign .pillar.left .grass {
  width: 8svh;
  left: -3.4svh;
  top: 0.5svh;
}
figure#hill .sign .pillar.right {
  width: 2.5svh;
  height: 4.5svh;
  left: 28.5svh;
  top: 3.75svh;
}
figure#hill .sign .pillar.right .grass {
  width: 8svh;
  left: -2.5svh;
  top: 1.5svh;
}

figure#dome {
  position: absolute;
  width: 100%;
  top: 713svh;
  z-index: 19;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 7svh;
}
figure#dome img {
  height: 20svh;
  width: auto;
}

sky-line {
  display: block;
  --hour: 8;
}
sky-line .horizon-origin {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0px;
  height: 0px;
}
sky-line .sun {
  --rotation: calc((var(--hour) - 9) * 30deg);
  will-change: transform;
  position: absolute;
  transform: rotate(var(--rotation)) translateX(-60svh);
}
sky-line .sun img {
  transform: translate(-50%, 50%) rotate(calc(-1 * var(--rotation)));
  height: 10svh;
  width: auto;
}

article#wedding {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
article#wedding span.white {
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
article#wedding wedding-invitation {
  display: contents;
}
article#wedding stylish-button::part(button) {
  background: hotpink;
}
article#wedding h2 {
  font-family: "peachy-keen-jf";
  font-size: 2em;
  margin-bottom: 1.5em;
  line-height: 2em;
}
article#wedding h3 {
  font-family: "peachy-keen-jf";
  font-size: 1.5em;
  margin-bottom: 1em;
  line-height: 1.5em;
}
article#wedding h4 {
  font-family: "peachy-keen-jf";
  font-size: 1.25em;
  margin-bottom: 1em;
  line-height: 1.25em;
}
article#wedding .delimter {
  width: 60svh;
  max-width: 100%;
}
article#wedding .background {
  position: absolute;
  z-index: -1;
  background-color: hsl(80, 68%, 70%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 10svh;
}
article#wedding section.wedding {
  background: white;
  padding: 3em;
  padding-top: 5em;
  padding-bottom: 4em;
}
article#wedding section.wedding > p:first-of-type {
  font-size: 2.5em;
  font-weight: bold;
  font-family: looking-flowers-script;
  position: relative;
  text-align: left;
  padding-left: 10%;
}
article#wedding section.wedding hr {
  color: gold;
  border-width: 4px;
  border-radius: 40px;
  margin-bottom: 1em;
  margin-top: 1em;
  border-bottom: 1px solid;
}
article#wedding section.wedding:not(.participate) ~ section.presents {
  display: none;
}
article#wedding section.wedding:not(.participate) ~ section.bus {
  display: none;
}
article#wedding section.wedding div.presents {
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 3em;
  margin-bottom: 2em;
}
article#wedding section.wedding div.presents img.coin {
  position: absolute;
  width: 3em;
  transform: translateY(-50%);
}
article#wedding section.wedding div.presents .card {
  border-radius: 1em;
  background: hsl(60, 100%, 90%);
  color: #44443b;
  padding: 1em;
  padding-top: 2.5em;
}
article#wedding section.bus {
  background: #faf2e7;
  position: relative;
}
article#wedding section.bus figure.partybus {
  background: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
article#wedding section.bus figure.partybus img.bus {
  width: 50%;
  z-index: 1;
  position: relative;
  top: 1em;
}
article#wedding section.bus > .content {
  padding: 0 3em;
  padding-bottom: 20%;
}
article#wedding section.bus:not(.use-bus) div.train-warning, article#wedding section.bus:not(.use-bus) .extraoption {
  display: none;
}
article#wedding section.bus div.train-warning {
  isolation: isolate;
  position: relative;
  margin-top: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  container: warning/inline-size;
}
article#wedding section.bus div.train-warning .card {
  border-radius: 1em;
  background: #e6e4e0;
  color: #44443b;
  padding: 1em;
}
article#wedding section.bus div.train-warning .warning {
  color: #ec7a1c;
  font-weight: bold;
  font-family: "peachy-keen-jf";
  margin-bottom: 0.8em;
  margin-top: 0.2em;
  font-size: 1.5em;
}
article#wedding section.bus div.train-warning img {
  position: absolute;
  width: 10em;
  top: -10em;
  width: 54cqw;
  top: -54cqw;
  filter: saturate(0.5) brightness(1.5);
  z-index: -1;
}
article#wedding section.bus div.train-warning a {
  color: #ec7a1c;
}

article#party {
  background: white;
  --accent-color: #ff6969 !important;
}
article#party input {
  --accent-color: #ff6969 !important;
}
article#party textarea {
  color: #ff6969 !important;
}
article#party stylish-button {
  display: block;
  margin-bottom: 2em;
}
article#party stylish-button::part(button) {
  background: var(--accent-color);
}
article#party h2 {
  font-family: "peachy-keen-jf";
  font-size: 2em;
  margin-bottom: 1.5em;
  line-height: 2em;
}
article#party h3 {
  font-family: "peachy-keen-jf";
  font-size: 1.5em;
  margin-bottom: 1em;
  line-height: 1.5em;
  margin-top: 2em;
}
article#party h4 {
  font-family: "peachy-keen-jf";
  font-size: 1.25em;
  margin-bottom: 1em;
  line-height: 1.25em;
  margin-top: 2em;
}
article#party a {
  color: var(--accent-color);
}
article#party section.intro {
  padding: 3em;
  padding-top: 5em;
  padding-bottom: 2em;
  background-color: white;
  position: relative;
  z-index: 10;
}
article#party section.invitation {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}
article#party section.invitation img {
  margin-bottom: 2em;
  margin-top: 1em;
  max-width: 100%;
}
article#party section.invitation img.buffet, article#party section.invitation img.drinks, article#party section.invitation img.dancer {
  width: 90%;
  margin-bottom: 1em;
  filter: sepia(0.25);
}
article#party section.invitation img.dancer {
  width: 50%;
}
article#party section.invitation .secret, article#party section.invitation .contribution {
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  container: card/inline-size;
}
article#party section.invitation .secret .card, article#party section.invitation .contribution .card {
  border-radius: 1em;
  padding: 1em;
  width: 100%;
}
article#party section.invitation .secret img, article#party section.invitation .contribution img {
  position: absolute;
  z-index: -1;
  margin: 0 !important;
}
article#party section.invitation .contribution {
  margin-top: 65%;
}
article#party section.invitation .contribution .card {
  background: #463e3b;
  color: #fefbf4;
}
article#party section.invitation .contribution img {
  width: 11em;
  top: -10em;
  width: 67cqw;
  top: -55cqw;
  filter: sepia(0.25);
}
article#party section.invitation .secret {
  margin-top: 40%;
}
article#party section.invitation .secret .card {
  background: hsla(286, 32%, 37%, 0.75);
  color: #fefbf4;
}
article#party section.invitation .secret img {
  width: 11em;
  top: -10em;
  width: 70cqw;
  top: -30cqw;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5)) sepia(0.5);
}
article#party:not(.participate) .contribution {
  display: none !important;
}
article#party:not(.participate) .fun {
  display: none !important;
}
article#party:not(.invited-to-party):not(.participate-cake) .sorry {
  display: none !important;
}

section.invitation scroll-container {
  max-width: 60svh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content auto max-content max-content;
  container: scroll/inline-size;
}
section.invitation scroll-container[method=overflow] .marker {
  display: none;
}
section.invitation scroll-container[method=overflow] .overflow-container {
  overflow: hidden;
  position: sticky;
  height: 100svh;
}
section.invitation scroll-container[method=clip] .content {
  clip-path: inset(var(--inset-top) 0 var(--inset-bottom) 0);
}
section.invitation scroll-container header, section.invitation scroll-container footer {
  width: 100%;
  z-index: 1;
  position: relative;
}
section.invitation scroll-container header img, section.invitation scroll-container footer img {
  width: 100%;
  height: auto;
  margin: 0 !important;
}
section.invitation scroll-container header .marker, section.invitation scroll-container footer .marker {
  height: 1px;
  background: red;
  position: absolute;
  z-index: 1;
  bottom: 50%;
  right: 0;
  left: 0;
  visibility: hidden;
}
section.invitation scroll-container header {
  grid-area: 1/1/span 2/span 1;
  position: sticky;
  top: 5svh;
}
section.invitation scroll-container footer {
  grid-area: 4/1/span 2/span 1;
  position: sticky;
  bottom: 5svh;
}
section.invitation scroll-container .overflow-container {
  grid-area: 2/1/span 3/span 1;
}
section.invitation scroll-container .content {
  padding-left: 18cqw;
  padding-right: 15cqw;
  padding-top: 16cqw;
  padding-bottom: 22cqw;
  position: relative;
  will-change: clip-path;
  contain: paint;
  isolation: isolate;
  background-image: url("assets/img/medieval/scroll/background.png");
  background-size: 100%;
  background-position: center top;
}

@property --orbit-rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
figure.cake {
  width: 80%;
  margin: auto;
  filter: sepia(0.5);
  position: relative;
  margin-bottom: 1em;
  --orbit-rotation: 0deg;
  animation: orbit-rotation 60s linear infinite;
}
@keyframes orbit-rotation {
  0% {
    --orbit-rotation: 0deg;
  }
  100% {
    --orbit-rotation: 360deg;
  }
}
figure.cake.hide-planets .orbit {
  display: none;
}
figure.cake img {
  width: 100%;
  height: auto;
  margin: 0 !important;
}
figure.cake .orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  container: orbit/inline-size;
}
figure.cake .orbit div.planet {
  --distance: -35cqw;
  --planet-rotation: 0deg;
  --rotation: calc(var(--planet-rotation) + var(--orbit-rotation));
  position: absolute;
  width: 20cqw;
  transform: rotate(var(--rotation)) translate3d(0, var(--distance), 0);
  filter: drop-shadow(0px -2px 4px black);
}
figure.cake .orbit div.planet img {
  transform: rotate(calc(-1 * var(--rotation)));
}
figure.cake .orbit div.planet:nth-child(1) {
  --planet-rotation: 90deg;
}
figure.cake .orbit div.planet:nth-child(2) {
  --planet-rotation: 45deg;
}
figure.cake .orbit div.planet:nth-child(3) {
  --planet-rotation: 0deg;
}
figure.cake .orbit div.planet:nth-child(4) {
  --planet-rotation: -45deg;
}
figure.cake .orbit div.planet:nth-child(5) {
  --planet-rotation: -90deg;
}
figure.cake .orbit div.planet:nth-child(6) {
  --planet-rotation: -135deg;
}
figure.cake .orbit div.planet:nth-child(7) {
  --planet-rotation: -180deg;
}
figure.cake .orbit div.planet:nth-child(8) {
  --planet-rotation: -225deg;
}

@property --hour {
  syntax: "<number>";
  inherits: true;
  initial-value: 13;
}
figure#medieval {
  position: sticky;
  top: 0;
  z-index: 5;
  --medieval-conceal-rate: calc(max(0, (var(--medieval-reveal-rate) - 1) * -1));
  filter: grayscale(calc(1 * var(--medieval-conceal-rate))) sepia(calc(0.5 * var(--medieval-conceal-rate)));
  transform: scale(calc(1 - (1 - var(--medieval-frame-scale)) * var(--medieval-conceal-rate)));
  --hour: 13;
  --brightness-ambient: 0.15;
  --brightness-ground: calc((1 - (clamp(15, var(--hour), 20) - 15) * 0.2) * 1);
  --brightness-sky: calc((1 - (clamp(18, var(--hour), 23) - 18) * 0.2) * 1);
}
figure#medieval + section {
  margin-top: var(--scroll-position);
}
figure#medieval .container {
  height: 100svh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content-visibility: auto;
  contain: paint layout;
}
figure#medieval .stars, figure#medieval .sky, figure#medieval .scene {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
figure#medieval .stars {
  overflow: hidden;
}
figure#medieval .stars > div.stars-background {
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  transform: rotate(calc((clamp(18, var(--hour), 36) - 18) * 0.0555555556 * 15deg));
  will-change: transform;
  background-color: black;
  background-image: url("assets/img/background_astral.svg");
  background-position: center;
  background-size: auto 75svh;
}
figure#medieval .sky {
  background-color: #d595b2;
  background-color: hsl(190, 60%, 75%);
  width: 200%;
  left: -50%;
  opacity: var(--brightness-sky);
  will-change: opacity;
}
figure#medieval .sky > div.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
figure#medieval .sky > div.background:nth-child(3) {
  opacity: calc((1 - (clamp(15, var(--hour), 18) - 15) * 0.3333333333) * 1);
  background-color: #99d9e6;
  will-change: opacity;
}
figure#medieval .sky > div.background:nth-child(2) {
  opacity: calc((1 - (clamp(18, var(--hour), 21) - 18) * 0.3333333333) * 1);
  background-color: #c8a4be;
  will-change: opacity;
}
figure#medieval .sky > div.background:nth-child(1) {
  background-color: #57555e;
}
figure#medieval .scene {
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding-top: 20svh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  isolation: isolate;
}
figure#medieval .scene .clouds, figure#medieval .scene .lights, figure#medieval .scene .ground {
  grid-area: 1/1/span 1/span 1;
  position: relative;
  aspect-ratio: 1600/614;
  place-self: center;
  height: 100%;
  width: auto;
}
figure#medieval .scene .clouds {
  transform: translate(calc(max(0, var(--hour) - 12.5) * -2%), 0);
  filter: brightness(max(var(--brightness-ambient), var(--brightness-sky)));
  will-change: transformm, filter;
}
figure#medieval .scene .clouds img {
  position: absolute;
  transform: translate(-50%, -50%);
  width: auto;
}
figure#medieval .scene .clouds img:nth-child(1) {
  height: 44%;
  left: 31.5%;
  top: 35%;
}
figure#medieval .scene .clouds img:nth-child(2) {
  height: 50%;
  left: 80%;
  top: 8%;
}
@keyframes rainbow-steps {
  0% {
    background-color: red;
  }
  16% {
    background-color: orange;
  }
  33% {
    background-color: yellow;
  }
  50% {
    background-color: green;
  }
  66% {
    background-color: blue;
  }
  83% {
    background-color: indigo;
  }
  100% {
    background-color: violet;
  }
}
figure#medieval .scene .lights > div {
  position: absolute;
  transform: translate(-50%, -50%);
}
figure#medieval .scene .lights > div.background {
  background-color: black;
  left: 48.5%;
  top: 44.9%;
  height: 60.1%;
  width: 10%;
}
figure#medieval .scene .lights > div.light {
  background-color: yellow;
  opacity: 0;
  animation-iteration-count: infinite !important;
}
figure#medieval .scene .lights > div.light.round {
  opacity: calc((clamp(17.5, var(--hour), 17.55) - 17.5) * 20 * 1);
  animation: rainbow-steps 5s steps(4, end);
  animation-delay: 2s;
}
figure#medieval .scene .lights > div.light.middle {
  opacity: calc((clamp(18, var(--hour), 18.05) - 18) * 20 * 1);
  animation: rainbow-steps 20s steps(2, end);
  animation-delay: 4s;
}
figure#medieval .scene .lights > div.light.top.left {
  opacity: calc((clamp(18.5, var(--hour), 18.55) - 18.5) * 20 * 1);
  animation: rainbow-steps 8s steps(1, end);
  animation-delay: 1s;
}
figure#medieval .scene .lights > div.light.top.right {
  opacity: calc((clamp(19, var(--hour), 19.05) - 19) * 20 * 1);
  animation: rainbow-steps 10s steps(7, end) reverse;
  animation-delay: 2s;
}
figure#medieval .scene .lights > div.door {
  left: 43%;
  top: 74%;
  height: 6%;
  width: 2%;
  background-color: black;
}
figure#medieval .scene .lights > div.round {
  left: 46%;
  top: 59%;
  height: 6%;
  width: 2%;
}
figure#medieval .scene .lights > div.middle {
  left: 48%;
  top: 33%;
  height: 6%;
  width: 2%;
}
figure#medieval .scene .lights > div.top.left.L1 {
  left: 44.4%;
  top: 22%;
  height: 6%;
  width: 1%;
}
figure#medieval .scene .lights > div.top.left.L2 {
  left: 45.3%;
  top: 20.3%;
  height: 6%;
  width: 1%;
}
figure#medieval .scene .lights > div.top.right.L1 {
  left: 48%;
  top: 18%;
  height: 6%;
  width: 2%;
}
figure#medieval .scene .lights > div.top.right.L2 {
  left: 50%;
  top: 19%;
  height: 6%;
  width: 2%;
}
figure#medieval .scene .lights > div.top.right.L3 {
  left: 52%;
  top: 19%;
  height: 6%;
  width: 2%;
}
figure#medieval .scene .lights .anchor {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
@keyframes spotlight-pan {
  0% {
    transform: translate(-50%, 0) rotate(35deg);
  }
  20% {
    transform: translate(-50%, 0) rotate(35deg);
  }
  50% {
    transform: translate(-50%, 0) rotate(-35deg);
  }
  70% {
    transform: translate(-50%, 0) rotate(-35deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(35deg);
  }
}
figure#medieval .scene .lights .anchor .spotlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 55svh;
  width: 25svh;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translate(-50%, 0) rotate(10deg);
  transform-origin: center bottom;
}
figure#medieval .scene .lights .anchor .spotlight:nth-child(1) {
  background: linear-gradient(0deg, hotpink, transparent);
  animation: spotlight-pan 15s linear infinite;
  opacity: calc((clamp(20, var(--hour), 20.05) - 20) * 20 * 1);
}
figure#medieval .scene .lights .anchor .spotlight:nth-child(2) {
  background: linear-gradient(0deg, gold, transparent);
  animation: spotlight-pan 15s linear infinite;
  animation-delay: 8s;
  transform: translate(-50%, 0) rotate(35deg);
  opacity: calc((clamp(21, var(--hour), 21.05) - 21) * 20 * 1);
}
figure#medieval .scene .ground {
  z-index: 1;
  filter: brightness(max(var(--brightness-ambient), var(--brightness-ground))) grayscale(min(0.75, 1 - var(--brightness-ground)));
}
figure#medieval .scene .ground .castle {
  height: 100%;
  position: relative;
  z-index: -1000;
}
figure#medieval .scene .ground .castle-front, figure#medieval .scene .ground .castle-back {
  position: absolute;
}
figure#medieval .scene .ground .castle-back {
  z-index: 20;
  top: 63.15%;
  left: 42.6%;
  height: 14%;
}
figure#medieval .scene .ground .castle-front {
  z-index: 2000;
  top: 73.4%;
  left: 38.2%;
  height: 24.7%;
}
figure#medieval .scene .ground .door {
  position: absolute;
  left: 42.2%;
  top: 71.3%;
  height: 4.5%;
  width: auto;
  z-index: 20001;
  visibility: hidden;
}
figure#medieval .scene .ground .door.closed {
  visibility: visible;
}
figure#medieval .scene .ground .door.closed + div.guests {
  display: none;
}
figure#medieval .horizon-origin {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0px;
  height: 0px;
  transform: translateX(-80svh);
}
figure#medieval .horizon-origin .sun {
  --rotation: calc(90deg + (var(--hour) - 11.5) * 15deg);
  will-change: transform;
  position: absolute;
  transform: rotate(var(--rotation)) translate(-110svh, 0);
}
figure#medieval .horizon-origin .sun img {
  transform: translate(-50%, 50%) rotate(calc(-1 * var(--rotation)));
  height: 10svh;
  width: auto;
}
figure#medieval button.shortcut {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 1em;
  display: none;
}

section.museum {
  height: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr min(100%, 60svh) 1fr;
  grid-template-rows: 0 auto 1fr;
  transform: scale(calc(1 + var(--medieval-reveal-rate) * (var(--window-frame-height-scale) - 1)));
  transform-origin: center var(--window-frame-shift);
  will-change: transform;
}
section.museum.hidden {
  display: none;
}
section.museum.hidden ~ figure#medieval {
  transform: none !important;
}
section.museum:not(.hidden) ~ figure#medieval .container {
  width: 125%;
  left: 50%;
  transform: translateX(-50%);
}
section.museum .background.white {
  background-color: white;
}
section.museum .background.white.left {
  grid-area: 2/1/span 1/span 1;
}
section.museum .background.white.right {
  grid-area: 2/3/span 1/span 1;
}
section.museum .background.white.top {
  grid-area: 1/1/span 1/span 3;
}
section.museum .background.white.bottom {
  grid-area: 3/1/span 1/span 3;
}
section.museum .history {
  grid-area: 3/2/span 1/span 1;
  padding: 3em;
  padding-top: 2em;
  pointer-events: auto;
}
section.museum .frame {
  grid-area: 2/2/span 1/span 1;
  position: relative;
}
section.museum .frame img {
  width: 100%;
  height: auto;
}
section.museum .frame .canvas {
  position: absolute;
  top: 18.5%;
  bottom: 18.5%;
  right: 25%;
  left: 25%;
}

div.guests {
  position: absolute;
  left: 38.6%;
  height: 36%;
  bottom: 0;
  width: 58.9%;
  overflow: hidden;
}
div.guests .paths {
  z-index: 1;
  position: relative;
  visibility: hidden;
}
div.guests .paths svg {
  width: 100%;
  height: auto;
}
div.guests figure.guest {
  position: absolute;
  bottom: -200%;
  width: 11svh;
  isolation: isolate;
  will-change: transform;
}
div.guests figure.guest .head {
  width: 100%;
  position: absolute;
  z-index: 0;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}
div.guests figure.guest .body {
  position: relative;
  z-index: 1;
}
div.guests figure.guest img {
  width: 100%;
  height: auto;
}
div.guests figure.guest[data-costume=archer] .head {
  -webkit-mask-image: url("assets/img/costumes/archer/head_mask.png");
          mask-image: url("assets/img/costumes/archer/head_mask.png");
  width: 60.3%;
  top: 4.1%;
  left: 18.8%;
}
div.guests figure.guest[data-costume=witch] .head {
  -webkit-mask-image: url("assets/img/costumes/witch/head_mask.png");
          mask-image: url("assets/img/costumes/witch/head_mask.png");
  width: 76%;
  top: 15%;
  left: 10%;
}
div.guests figure.guest[data-costume=wizard] .head {
  -webkit-mask-image: url("assets/img/costumes/wizard/head_mask.png");
          mask-image: url("assets/img/costumes/wizard/head_mask.png");
  width: 86.3%;
  top: 10.5%;
  left: 6.2%;
}
div.guests figure.guest[data-costume=dino] .head {
  -webkit-mask-image: url("assets/img/costumes/dino/head_mask.png");
          mask-image: url("assets/img/costumes/dino/head_mask.png");
  width: 54.3%;
  top: -1.5%;
  left: 15.5%;
}
div.guests figure.guest[data-costume=fairy] .head {
  -webkit-mask-image: url("assets/img/costumes/fairy/head_mask.png");
          mask-image: url("assets/img/costumes/fairy/head_mask.png");
  width: 51%;
  top: -1%;
  left: 23%;
}
div.guests figure.guest[data-costume=knight] .head {
  -webkit-mask-image: url("assets/img/costumes/knight/head_mask.png");
          mask-image: url("assets/img/costumes/knight/head_mask.png");
  width: 93%;
  top: 11%;
  left: -1%;
}
div.guests figure.guest[data-costume=spaceman] .head {
  -webkit-mask-image: url("assets/img/costumes/spaceman/head_mask.png");
          mask-image: url("assets/img/costumes/spaceman/head_mask.png");
  width: 93%;
  top: 0%;
  left: 0%;
}
div.guests figure.guest[data-costume=princess] .head {
  -webkit-mask-image: url("assets/img/costumes/princess/head_mask.png");
          mask-image: url("assets/img/costumes/princess/head_mask.png");
  width: 85%;
  top: -2%;
  left: 4%;
}
div.guests figure.guest[data-costume=harlekin] .head {
  -webkit-mask-image: url("assets/img/costumes/harlekin/head_mask.png");
          mask-image: url("assets/img/costumes/harlekin/head_mask.png");
  width: 69%;
  top: 5%;
  left: 16%;
}
div.guests figure.guest[data-costume=goblin] .head {
  -webkit-mask-image: url("assets/img/costumes/goblin/head_mask.png");
          mask-image: url("assets/img/costumes/goblin/head_mask.png");
  width: 100%;
  top: 0%;
  left: 0%;
}

avatar-creator[data-costume=archer] div.mask {
  -webkit-mask-image: url("assets/img/costumes/archer/head_mask.png");
          mask-image: url("assets/img/costumes/archer/head_mask.png");
}
avatar-creator[data-costume=archer] div.costume {
  background-image: url("assets/img/costumes/archer/head.png");
}
avatar-creator[data-costume=witch] div.mask {
  -webkit-mask-image: url("assets/img/costumes/witch/head_mask.png");
          mask-image: url("assets/img/costumes/witch/head_mask.png");
}
avatar-creator[data-costume=witch] div.costume {
  background-image: url("assets/img/costumes/witch/head.png");
}
avatar-creator[data-costume=wizard] div.mask {
  -webkit-mask-image: url("assets/img/costumes/wizard/head_mask.png");
          mask-image: url("assets/img/costumes/wizard/head_mask.png");
}
avatar-creator[data-costume=wizard] div.costume {
  background-image: url("assets/img/costumes/wizard/head.png");
}
avatar-creator[data-costume=dino] div.mask {
  -webkit-mask-image: url("assets/img/costumes/dino/head_mask.png");
          mask-image: url("assets/img/costumes/dino/head_mask.png");
}
avatar-creator[data-costume=dino] div.costume {
  background-image: url("assets/img/costumes/dino/head.png");
}
avatar-creator[data-costume=fairy] div.mask {
  -webkit-mask-image: url("assets/img/costumes/fairy/head_mask.png");
          mask-image: url("assets/img/costumes/fairy/head_mask.png");
}
avatar-creator[data-costume=fairy] div.costume {
  background-image: url("assets/img/costumes/fairy/head.png");
}
avatar-creator[data-costume=knight] div.mask {
  -webkit-mask-image: url("assets/img/costumes/knight/head_mask.png");
          mask-image: url("assets/img/costumes/knight/head_mask.png");
}
avatar-creator[data-costume=knight] div.costume {
  background-image: url("assets/img/costumes/knight/head.png");
}
avatar-creator[data-costume=spaceman] div.mask {
  -webkit-mask-image: url("assets/img/costumes/spaceman/head_mask.png");
          mask-image: url("assets/img/costumes/spaceman/head_mask.png");
}
avatar-creator[data-costume=spaceman] div.costume {
  background-image: url("assets/img/costumes/spaceman/head.png");
}
avatar-creator[data-costume=princess] div.mask {
  -webkit-mask-image: url("assets/img/costumes/princess/head_mask.png");
          mask-image: url("assets/img/costumes/princess/head_mask.png");
}
avatar-creator[data-costume=princess] div.costume {
  background-image: url("assets/img/costumes/princess/head.png");
}
avatar-creator[data-costume=harlekin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/harlekin/head_mask.png");
          mask-image: url("assets/img/costumes/harlekin/head_mask.png");
}
avatar-creator[data-costume=harlekin] div.costume {
  background-image: url("assets/img/costumes/harlekin/head.png");
}
avatar-creator[data-costume=goblin] div.mask {
  -webkit-mask-image: url("assets/img/costumes/goblin/head_mask.png");
          mask-image: url("assets/img/costumes/goblin/head_mask.png");
}
avatar-creator[data-costume=goblin] div.costume {
  background-image: url("assets/img/costumes/goblin/head.png");
}
avatar-creator div.avatar-container {
  max-width: 300px;
  container: avatar/inline-size;
  margin: auto;
}
avatar-creator figure.avatar {
  width: 100%;
  position: relative;
  left: -3%;
  padding: 10%;
  padding-left: 14%;
  aspect-ratio: 1;
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
avatar-creator figure.avatar img {
  margin: 0 !important;
  width: 100%;
  height: auto;
}
avatar-creator figure.avatar div.image {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: auto;
  container: image/size;
}
avatar-creator figure.avatar div.image .mask {
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  width: 100%;
  height: 100cqw;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
avatar-creator figure.avatar div.image img.avatar {
  place-self: center;
  transform: scale(var(--avatar-ts)) translate(var(--avatar-tx), var(--avatar-ty));
}
avatar-creator figure.avatar div.image img.avatar.tall {
  width: 100%;
  height: auto;
}
avatar-creator figure.avatar div.image img.avatar.wide {
  width: auto;
  height: 100%;
}
avatar-creator figure.avatar div.image div.costume {
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
avatar-creator figure.avatar img.background, avatar-creator figure.avatar img.overlay, avatar-creator figure.avatar div.costume {
  position: absolute;
  left: 0;
  top: 0;
}
avatar-creator figure.avatar button {
  pointer-events: auto;
}
avatar-creator figure.avatar button.arrow {
  position: absolute;
  top: 50%;
  width: 20%;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));
  transition-property: filter;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transform: translateY(-50%);
}
avatar-creator figure.avatar button.arrow:active {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
}
avatar-creator figure.avatar button.arrow.prev {
  left: 7%;
  transform: translate(-50%, -50%);
}
avatar-creator figure.avatar button.arrow.next {
  right: -17%;
  transform: translate(-50%, -50%) scaleX(-1);
}
avatar-creator figure.avatar button.zoom {
  position: absolute;
  left: 0;
  height: auto;
}
avatar-creator figure.avatar button.zoom.plus {
  top: 0;
  width: 24.2%;
}
avatar-creator figure.avatar button.zoom.minus {
  bottom: 0;
  width: 22.6%;
}
avatar-creator p.how-to-costume, avatar-creator p.how-to-upload {
  font-style: italic;
}
avatar-creator.has-avatar p.how-to-upload {
  display: none;
}
avatar-creator:not(.has-avatar) p.how-to-upload {
  display: block;
}
avatar-creator:not(.has-avatar) p.how-to-costume {
  display: none;
}
avatar-creator:not(.has-avatar) div.costume {
  display: none;
}
avatar-creator:not(.has-avatar) .mask {
  -webkit-mask: none !important;
          mask: none !important;
}
avatar-creator:not(.has-avatar) figure.avatar button {
  display: none;
}
avatar-creator:not(.has-avatar) div.image {
  pointer-events: none !important;
}
avatar-creator input[type=file] {
  display: none;
}

main {
  display: contents;
}
main article {
  font-family: puffin-display-soft;
  font-size: 1em;
  line-height: 1.5em;
  text-align: center;
}
main article p {
  margin-bottom: 1em;
}
main article a {
  text-decoration: underline;
  color: hotpink;
}

progress-indicator {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%);
  color: white;
  font-family: ocr-a-std;
  font-size: 2em;
}

starry-background {
  background: #100d15;
  left: 0;
  top: 0;
  width: 100%;
  height: 500svh;
}
starry-background .stars {
  width: 100%;
  height: 100%;
  background-image: url("assets/img/background_astral_big.jpg");
  background-position: center 63%;
  background-size: 500px;
  opacity: 0;
}

.space-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  height: 100svh;
  z-index: 15;
  font-family: ocr-a-std;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.space-overlay space-position {
  padding: 1em;
  color: transparent;
  font-size: 2em;
  white-space: nowrap;
}
.space-overlay space-position button {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  pointer-events: auto;
  opacity: 1;
}
.space-overlay space-position.can-skip button.skip {
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.5s;
}
.space-overlay space-position:not(.can-skip) button.skip {
  opacity: 0;
  pointer-events: none;
}

space-calendar.hidden .cube-container, space-calendar.autohide .cube-container {
  transform: translateY(calc(-125% - var(--cuboid-margin)));
  perspective-origin: center 0px;
  transition-delay: 0s, 0s;
}
space-calendar .calendar-container {
  display: flex;
  margin-top: 0.3em;
  color: #dc0b3c;
  font-size: 2em;
  font-weight: bold;
  z-index: 1;
}
space-calendar .cube-container {
  --cuboid-width: 20em;
  --cuboid-height: 5.5em;
  --cuboid-depth: 10em;
  --cuboid-margin: 5em;
  font-size: min(1.5svh, 0.75em);
  width: var(--cuboid-width);
  height: var(--cuboid-height);
  perspective: 500px;
  perspective-origin: center -70px;
  margin-top: var(--cuboid-margin);
  transform: none;
  transition-property: perspective-origin, transform;
  transition-duration: 0.25s, 0.5s;
  transition-timing-function: ease;
  transition-delay: 0.25s, 0s;
}
space-calendar .cube {
  position: relative;
  width: var(--cuboid-width);
  height: var(--cuboid-height);
  transform-style: preserve-3d;
  animation: float 4s ease-in-out infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes float {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0%);
  }
}
space-calendar .face {
  width: var(--cuboid-width);
  height: var(--cuboid-height);
  background: #99CCE0;
  border: 2px solid black;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
space-calendar .face.front, space-calendar .face.back {
  width: var(--cuboid-width);
  height: var(--cuboid-height);
}
space-calendar .face.front {
  position: relative;
  transform: translateZ(calc(var(--cuboid-depth) / 2));
  padding: 0.75em;
}
space-calendar .face.back {
  transform: translateZ(calc(var(--cuboid-depth) / -2)) rotateY(180deg);
}
space-calendar .face.left, space-calendar .face.right {
  width: var(--cuboid-depth);
  height: var(--cuboid-height);
}
space-calendar .face.left {
  transform: translateX(calc(var(--cuboid-width) / -2)) rotateY(-90deg);
}
space-calendar .face.right {
  transform: translateX(calc(var(--cuboid-width) / 2)) rotateY(90deg);
}
space-calendar .face.top, space-calendar .face.bottom {
  width: var(--cuboid-width);
  height: var(--cuboid-depth);
}
space-calendar .face.top {
  background: #4595BF;
  width: var(--cuboid-width);
  height: var(--cuboid-depth);
  transform: translateY(calc(var(--cuboid-height) / -2)) rotateX(90deg);
  transform: translateY(calc(var(--cuboid-height) / -2)) rotateX(89deg);
  border-width: 4px;
  border-top-width: 16px;
}
space-calendar .face.bottom {
  width: var(--cuboid-width);
  height: var(--cuboid-depth);
  transform: translateY(calc(var(--cuboid-height) / 2)) rotateX(-90deg);
}
space-calendar .face .eyes {
  position: absolute;
  left: 50%;
  top: 0%;
  background-image: url("assets/img/clock/eyes.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -80%);
  width: 7em;
  height: 4.31034483em;
}
space-calendar .face .inner {
  background: white;
  width: 100%;
  height: 100%;
  border: 3px inset black;
  display: flex;
  justify-content: center;
  align-items: center;
}

universe-view {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  position: relative;
  font-family: ocr-a-std;
  pointer-events: none;
  opacity: 0;
  content-visibility: auto;
  contain: layout paint;
}

space-container.bottom {
  background-color: #ffd7cc;
}

atmosphere-layers {
  height: 270svh;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
atmosphere-layers.flashing {
  animation: flashing 2s infinite ease;
}
@keyframes flashing {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.25);
  }
  100% {
    filter: brightness(1);
  }
}
atmosphere-layers div {
  width: 100%;
  position: absolute;
  left: 0;
}
atmosphere-layers div:nth-of-type(1) {
  top: 0%;
  height: 50%;
  background: linear-gradient(to bottom, hsla(204.26, 94.44%, 71.76%, 0), hsla(204.26, 94.44%, 71.76%, 0.03051) 5.79%, hsla(204.26, 94.44%, 71.76%, 0.0816) 10.88%, hsla(204.26, 94.44%, 71.76%, 0.14883) 15.63%, hsla(204.26, 94.44%, 71.76%, 0.22778) 20.37%, hsla(204.26, 94.44%, 71.76%, 0.31402) 25.46%, hsla(204.26, 94.44%, 71.76%, 0.40312) 31.25%, hsla(204.26, 94.44%, 71.76%, 0.49067) 38.08%, hsla(204.26, 94.44%, 71.76%, 0.57222) 46.3%, hsla(204.26, 94.44%, 71.76%, 0.64336) 56.25%, hsla(204.26, 94.44%, 71.76%, 0.69965) 68.29%, hsla(204.26, 94.44%, 71.76%, 0.73668) 82.75%, hsla(204.26, 94.44%, 71.76%, 0.75));
}
atmosphere-layers div:nth-of-type(2) {
  top: 50%;
  height: 25%;
  background: linear-gradient(to bottom, hsla(204.26, 94.44%, 71.76%, 0.75), hsla(204.26, 94.44%, 71.76%, 0.71949) 5.79%, hsla(204.26, 94.44%, 71.76%, 0.6684) 10.88%, hsla(204.26, 94.44%, 71.76%, 0.60117) 15.63%, hsla(204.26, 94.44%, 71.76%, 0.52222) 20.37%, hsla(204.26, 94.44%, 71.76%, 0.43598) 25.46%, hsla(204.26, 94.44%, 71.76%, 0.34688) 31.25%, hsla(204.26, 94.44%, 71.76%, 0.25933) 38.08%, hsla(204.26, 94.44%, 71.76%, 0.17778) 46.3%, hsla(204.26, 94.44%, 71.76%, 0.10664) 56.25%, hsla(204.26, 94.44%, 71.76%, 0.05035) 68.29%, hsla(204.26, 94.44%, 71.76%, 0.01332) 82.75%, hsla(204.26, 94.44%, 71.76%, 0));
}
atmosphere-layers div:nth-of-type(3) {
  top: 12.5%;
  height: 62.5%;
  background: linear-gradient(to bottom, hsla(311.19, 88.06%, 86.86%, 0), hsla(311.19, 88.06%, 86.86%, 0.04068) 5.79%, hsla(311.19, 88.06%, 86.86%, 0.1088) 10.88%, hsla(311.19, 88.06%, 86.86%, 0.19844) 15.63%, hsla(311.19, 88.06%, 86.86%, 0.3037) 20.37%, hsla(311.19, 88.06%, 86.86%, 0.41869) 25.46%, hsla(311.19, 88.06%, 86.86%, 0.5375) 31.25%, hsla(311.19, 88.06%, 86.86%, 0.65422) 38.08%, hsla(311.19, 88.06%, 86.86%, 0.76296) 46.3%, hsla(311.19, 88.06%, 86.86%, 0.85781) 56.25%, hsla(311.19, 88.06%, 86.86%, 0.93287) 68.29%, hsla(311.19, 88.06%, 86.86%, 0.98223) 82.75%, hsl(311.19, 88.06%, 86.86%));
}
atmosphere-layers div:nth-of-type(4) {
  top: 75%;
  height: 25%;
  background: linear-gradient(to bottom, hsl(311.19, 88.06%, 86.86%), hsla(311.19, 88.06%, 86.86%, 0.95932) 5.79%, hsla(311.19, 88.06%, 86.86%, 0.8912) 10.88%, hsla(311.19, 88.06%, 86.86%, 0.80156) 15.63%, hsla(311.19, 88.06%, 86.86%, 0.6963) 20.37%, hsla(311.19, 88.06%, 86.86%, 0.58131) 25.46%, hsla(311.19, 88.06%, 86.86%, 0.4625) 31.25%, hsla(311.19, 88.06%, 86.86%, 0.34578) 38.08%, hsla(311.19, 88.06%, 86.86%, 0.23704) 46.3%, hsla(311.19, 88.06%, 86.86%, 0.14219) 56.25%, hsla(311.19, 88.06%, 86.86%, 0.06713) 68.29%, hsla(311.19, 88.06%, 86.86%, 0.01777) 82.75%, hsla(311.19, 88.06%, 86.86%, 0));
}
atmosphere-layers div:nth-of-type(5) {
  top: 50%;
  height: 50%;
  background: linear-gradient(to bottom, hsla(23.33, 90%, 92.16%, 0), hsla(23.33, 90%, 92.16%, 0.04068) 5.79%, hsla(23.33, 90%, 92.16%, 0.1088) 10.88%, hsla(23.33, 90%, 92.16%, 0.19844) 15.63%, hsla(23.33, 90%, 92.16%, 0.3037) 20.37%, hsla(23.33, 90%, 92.16%, 0.41869) 25.46%, hsla(23.33, 90%, 92.16%, 0.5375) 31.25%, hsla(23.33, 90%, 92.16%, 0.65422) 38.08%, hsla(23.33, 90%, 92.16%, 0.76296) 46.3%, hsla(23.33, 90%, 92.16%, 0.85781) 56.25%, hsla(23.33, 90%, 92.16%, 0.93287) 68.29%, hsla(23.33, 90%, 92.16%, 0.98223) 82.75%, hsl(23.33, 90%, 92.16%));
}
atmosphere-layers div:nth-of-type(6) {
  top: 75%;
  height: 25%;
  background: linear-gradient(to bottom, hsla(12.94, 100%, 90%, 0), hsla(12.94, 100%, 90%, 0.04068) 5.79%, hsla(12.94, 100%, 90%, 0.1088) 10.88%, hsla(12.94, 100%, 90%, 0.19844) 15.63%, hsla(12.94, 100%, 90%, 0.3037) 20.37%, hsla(12.94, 100%, 90%, 0.41869) 25.46%, hsla(12.94, 100%, 90%, 0.5375) 31.25%, hsla(12.94, 100%, 90%, 0.65422) 38.08%, hsla(12.94, 100%, 90%, 0.76296) 46.3%, hsla(12.94, 100%, 90%, 0.85781) 56.25%, hsla(12.94, 100%, 90%, 0.93287) 68.29%, hsla(12.94, 100%, 90%, 0.98223) 82.75%, hsl(12.94, 100%, 90%));
}

registration-form {
  padding: 1em;
  padding-bottom: 3em;
  position: absolute;
  top: 500svh;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
registration-form form, registration-form .outer-border, registration-form .inner-border, registration-form .content {
  border-radius: 1em;
}
registration-form form {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
  position: relative;
  background: white;
  max-width: 700px;
  width: 100%;
  color: white;
  line-height: 1.5em;
  font-size: 1.5em;
  font-family: puffin-display-soft;
}
@media (max-width: 500px) {
  registration-form form {
    font-size: 4vw;
  }
}
registration-form form .outer-border {
  background: linear-gradient(to bottom, #ffdf33 0%, #ccac00 100%);
  padding: 4px;
}
registration-form form .inner-border {
  background: linear-gradient(to bottom, #676767 0%, #363636 100%);
  padding: 2px;
}
registration-form form .content {
  padding: 1em 1em;
  background: linear-gradient(to bottom, #3076ab 0%, #8b4f3b 100%);
  background: #8b4f3b;
  background: #975942;
  background: linear-gradient(to bottom, #305cde 0%, #274ab3 100%);
}
registration-form form h1 {
  font-size: 3em;
  margin-bottom: 0.5em;
  margin-top: 0.25em;
  font-family: adorn-smooth-pomander;
  font-family: miss-fitzpatrick;
  font-family: mr-sandsfort;
  font-family: looking-flowers-script;
}
registration-form form p {
  margin: 0.5em 0;
  font-family: congenial-light;
  font-weight: 400;
}
registration-form form table td {
  border: none !important;
}
registration-form form table td:first-child {
  width: 6em;
}
registration-form form .mouth {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-size: 1.5em;
  font-family: looking-flowers-caps;
  font-weight: bold;
}
registration-form form .mouth input {
  display: block;
  width: 100%;
  margin: auto;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: white;
  text-align: center;
  font-size: 1.25em;
  color: black;
  height: 2rem;
}
registration-form form .mouth button {
  display: none;
  background-color: hotpink;
  margin: auto;
  border-radius: 0 0 8px 8px;
  color: white;
  padding: 0.25em 0.5em;
  padding-top: 1em;
  position: absolute;
  top: 2rem;
}

section#cloud1 {
  width: 100%;
  position: absolute;
  top: 266svh;
  z-index: 14;
  display: flex;
  justify-content: center;
}
section#cloud1 img {
  width: 46svh;
  height: auto;
}
section#cloud1 .marker {
  height: 1px;
  width: 100%;
  background: red;
  z-index: 1;
  position: absolute;
  bottom: 33%;
  left: 0;
  visibility: hidden;
}

section#cloud_layer_0 {
  width: 100%;
  top: 150svh;
  z-index: 15;
  display: flex;
  justify-content: center;
}
section#cloud_layer_0 .cloud {
  position: absolute;
}
section#cloud_layer_0 img.ballon {
  position: absolute;
  top: 200svh;
  height: 20svh;
  transform: translateX(15svh);
}

section#cloud_layer_1 {
  width: 100%;
  top: 140svh;
  z-index: 14;
  display: flex;
  justify-content: center;
}
section#cloud_layer_1 .cloud {
  position: absolute;
}
section#cloud_layer_1 img:nth-child(1) {
  top: 150svh;
  height: 10svh;
  transform: translateX(-25svh);
}

section#cloud_layer_2 {
  width: 100%;
  top: 135svh;
  z-index: 12;
  display: flex;
  justify-content: center;
}
section#cloud_layer_2 .cloud {
  position: absolute;
}
section#cloud_layer_2 img:nth-child(1) {
  top: 50svh;
  height: 10svh;
  transform: translateX(25svh);
}
section#cloud_layer_2 img:nth-child(2) {
  top: 100svh;
  height: 10svh;
  transform: translateX(20svh);
}
section#cloud_layer_2 canvas.lugia {
  position: absolute;
  top: 100svh;
  height: 12svh;
  transform: translateX(-25svh);
}

section#cloud_layer_3 {
  width: 100%;
  top: 125svh;
  z-index: 11;
  display: flex;
  justify-content: center;
}
section#cloud_layer_3 .cloud {
  position: absolute;
}
section#cloud_layer_3 img:nth-child(1) {
  top: 35svh;
  height: 3svh;
  transform: translateX(-10svh);
}
section#cloud_layer_3 img:nth-child(2) {
  top: 45svh;
  height: 3svh;
  transform: translateX(-40svh);
}

section#clouds {
  height: 400vh;
  z-index: 30;
  display: none;
  position: relative;
  padding-top: 2000px;
}

.main-container.hide-sky > .space-overlay {
  display: none;
}
.main-container.hide-sky space-container > starry-background {
  display: none;
}
.main-container.hide-sky space-container > atmosphere-layers {
  display: none;
}
.main-container.hide-sky space-container > floating-text {
  display: none;
}
.main-container.hide-sky space-container > floating-satellite {
  display: none;
}
.main-container.hide-sky space-container > sky-line {
  display: none;
}
.main-container.hide-sky space-container > figure.dome {
  display: none;
}
.main-container.hide-sky space-container > section {
  display: none !important;
}
.main-container.hide-sky space-container > registration-form {
  display: none;
}

.door.closed + div.guests {
  display: none;
}

/* * Theme Name: The Wedding
 * * Theme URI: https://lab.madwizard.de/web/wedding
 * * Author: Kevin Koslowski
 * * Author URI: http://madwizard.de/
 * * Description: Handgeschnitztes Design für die Einladung zu unserer Hochzeit.
 * * Version: 0.1
 * */
#viewport-dummy {
  width: 1svw;
  height: 1svh;
  visibility: hidden;
  position: absolute;
}