@font-face {
  font-family: "Florisel";
  src: url("Floriselscript.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "SC Jurere";
  src: url("SC-Jurere.otf") format("opentype"),
    url("SC-Jurere.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #fffcf7;
  --green: #dce4bd;
  --olive: #647a3c;
  --pink: #f85ba4;
  --stage-width: 375px;
  --stage-height: 2704px;
  --mobile-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: none;
  user-select: none;
}

p,
h1,
h2 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.invite {
  position: relative;
  width: 100vw;
  height: calc(var(--stage-height) * var(--mobile-scale));
  overflow: hidden;
  background: var(--paper);
}

.invite-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: scale(var(--mobile-scale));
  transform-origin: top left;
}

.block {
  position: absolute;
  left: 0;
  width: 375px;
  overflow: hidden;
}

.script {
  font-family: "Florisel", cursive;
  font-weight: 300;
  font-style: normal;
}

.plex {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.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;
}

.block-hero {
  top: 0;
  height: 563px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 375px;
  height: 563px;
  object-fit: cover;
}

.ribbon {
  position: absolute;
  left: 0;
  width: 375px;
  height: 163px;
  overflow: hidden;
}

.ribbon > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  height: 163px;
  object-fit: cover;
}

.ribbon-hero {
  top: 0;
}

.hero-small-title {
  position: absolute;
  left: 65px;
  top: 424px;
  color: var(--olive);
  font-size: 43px;
  line-height: normal;
  white-space: nowrap;
}

.balloons {
  position: absolute;
  top: 160px;
  width: 217px;
  height: 270px;
  overflow: hidden;
}

.balloons img {
  position: absolute;
  left: -53px;
  top: 0;
  width: 270px;
  height: 270px;
  object-fit: cover;
}

.balloons-left {
  left: 0;
}

.balloons-right {
  left: 158px;
  transform: rotate(180deg) scaleY(-1);
}

.child-photo {
  position: absolute;
  left: 60px;
  top: 90px;
  width: 256px;
  height: 349px;
  overflow: hidden;
}

.child-photo img {
  position: absolute;
  left: -3px;
  top: -37px;
  width: 270px;
  height: 386px;
}

.garland {
  position: absolute;
  left: -40px;
  top: 430px;
  width: 453px;
  height: 272px;
  overflow: hidden;
  z-index: 2;
}

.garland img {
  width: 453px;
  height: 272px;
  object-fit: cover;
}

.block-story {
  top: 630px;
  height: 846px;
  background: linear-gradient(180deg, #fffcf7 0%, #fffcf7 68.269%, #dce4bd 100%);
}

.age-title {
  position: absolute;
  left: 20px;
  top: 90px;
  width: 335px;
  color: var(--pink);
  font-size: 100px;
  line-height: normal;
  text-align: center;
}

.story-copy {
  position: absolute;
  left: 20px;
  width: 335px;
  color: var(--olive);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.story-copy-one {
  top: 218px;
}

.story-copy-two {
  top: 412px;
}

.story-text {
  position: absolute;
  left: 20px;
  top: 464px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 335px;
  color: var(--olive);
  line-height: 20px;
  text-align: center;
}

.story-text .plex {
  font-size: 16px;
}

.story-text .script {
  color: var(--pink);
  font-size: 48px;
  line-height: 48px;
}

.moet {
  position: absolute;
  width: 207.97px;
  height: 207.97px;
}

.moet img {
  width: 207.97px;
  height: 207.97px;
  object-fit: cover;
}

.moet-left {
  left: -54px;
  top: -13px;
  transform: rotate(25.3deg);
}

.moet-right {
  left: 221px;
  top: -13px;
  transform: rotate(154.7deg) scaleY(-1);
}

.cake {
  position: absolute;
  left: 79px;
  top: 547px;
  width: 217px;
  height: 271px;
  object-fit: cover;
}

.lilac {
  position: absolute;
  left: 138px;
  top: 294px;
  width: 100px;
  height: 102px;
  overflow: hidden;
}

.lilac img {
  position: absolute;
  left: 0;
  top: 0;
  width: 102px;
  height: 102px;
}

.block-details {
  top: 1476px;
  height: 563px;
  background: var(--green);
}

.details-frame {
  position: absolute;
  left: 20px;
  top: 38px;
  width: 335px;
  height: 487px;
  overflow: hidden;
}

.details-frame img {
  position: absolute;
  left: -95px;
  top: -114px;
  width: 523px;
  height: 716px;
}

.ribbon-details {
  top: 0;
}

.time-text {
  position: absolute;
  left: 40px;
  top: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 295px;
  color: var(--pink);
  font-size: 90px;
  line-height: 80px;
  text-align: center;
}

.time-text p {
  width: 100%;
}

.address-text {
  position: absolute;
  left: 40px;
  top: 328px;
  width: 295px;
  color: var(--olive);
  text-align: center;
}

.address-label {
  width: 100%;
  font-size: 60px;
  line-height: 60px;
}

.address-value {
  display: block;
  width: 295px;
  margin-top: 8px;
  font-size: 20px;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

.green-fade {
  position: absolute;
  left: 0;
  top: 2039px;
  width: 375px;
  height: 280px;
  background: linear-gradient(180deg, #dce4bd 0%, #fffcf7 100%);
  transform: translate(0, -1px);
}

.dog-picture {
  position: absolute;
  left: 20px;
  top: 2067px;
  width: 335px;
  height: 419px;
}

.dog-picture img {
  width: 335px;
  height: 419px;
  object-fit: cover;
}

.final-title {
  position: absolute;
  left: 20px;
  top: 2534px;
  width: 335px;
  color: var(--pink);
  font-size: 90px;
  line-height: 90px;
  text-align: center;
}

@media (min-width: 601px) {
  body {
    background:
      linear-gradient(rgba(255, 252, 247, 0.86), rgba(255, 252, 247, 0.86)),
      url("figma-bg-hero.png") center top / 375px auto repeat;
  }

  .invite {
    width: var(--stage-width);
    height: var(--stage-height);
    box-shadow: 0 0 60px rgba(100, 122, 60, 0.14);
  }

  .invite-stage {
    transform: none;
  }
}

@media (max-width: 600px) {
  body {
    display: block;
  }
}