:root {
  --sky: #5181a5;
  --yellow: #ecc609;
  --leaf: #2e331d;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-family: serif;
  color: white;
}

code {
  font-size: 1.2em;
}

body {
  min-height: 100vh;
  /* width: 100vw; */
  margin: 0 auto;

  background-image: url("../img/bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-color: #8a6847;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  display: flex;
  flex-direction: column;
}

body::after {
  content: "";
  width: 100vw;
  aspect-ratio: 2448 / 768;

  background-image: url("../img/roof.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;

  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

heading div {
  display: flex;
}

heading img {
  width: 10vw;
  height: auto;
  aspect-ratio: 400 / 272;
  margin: auto 3vw;
  flex-basis: ;
}

heading h3 {
  flex-grow: 1;
  font-size: 3vw;
  font-variant: small-caps;
  color: var(--yellow);

         text-stroke: 0.08vw var(--sky);
 -webkit-text-stroke: 0.08vw var(--sky);
}

h1 {
  font-family: serif;
  font-size: 10vw;
  text-align: center;
  color: white;
  margin: 0.3em 1em;

         text-stroke: 0.3vw var(--sky);
 -webkit-text-stroke: 0.3vw var(--sky);

  animation: dive linear;
  animation-timeline: scroll();
}

aside {
  display: flex;
  flex-direction: row-reverse;

  z-index: 20;
}

aside p {
  font-size: 2vw;
  width: 9em;
  text-align: right;
  margin: 0 1em;

          text-stroke: 0.02em var(--leaf);
  -webkit-text-stroke: 0.02em var(--leaf);
}

main {
  display: flex;
  flex-direction: column;
}

main div {
  aspect-ratio: 2448 / 864;

  background-image: url("../img/sign-top.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  margin: 0;
  display: flex;
  font-size: 3.5vw;
}

main div em {
  font-family: serif;
  margin: 5.5vw 30vw 0 20vw;
  transform: skew(5deg, 10deg);
}

main::after {
  content: '';
  aspect-ratio: 2448 / 284;

  background-color: #8a6847;
  background-image: url("../img/sign-bottom.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
}

main section {
  background-image: url("../img/sign-middle.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: 0 0;
  margin: 0;
}

main section article {
  width: 50vw;
  color: #a80000;
  font-family: 'Inter', sans-serif;
  margin: -5vw 30vw 0 20vw;
}

blockquote {
  font-style: italic;
}

@keyframes dive-disabled {
  to {
    transform: translateY(13vw);
  }
}

footer {
  padding: 1vw;
  text-align: center;
  background-color: #2c2117;
}

footer a {
  color: #978fcf;
}

.facebook {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
}
.facebook svg {
  width: 32px;
  height: 32px;
  background: #3A5795;
  fill: #fff;
  border: 1px solid transparent;
          border-radius: 4px; /* future proofing */
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
   -khtml-border-radius: 4px; /* for old Konqueror browsers */
}
.facebook svg:hover {
  fill: #eeeeee;
  border-color: #ffffff;
}

#mc_embed_signup{
}
/* real people should not fill this in and expect good things - do not
   remove this or risk form bot signups */
#mc_embed_signup div {
  position: absolute;
  left: -5000px;
}