* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: conic-gradient(from 210deg, rgb(197, 187, 184) 0deg, rgb(197, 187, 184) 24deg, rgb(184, 181, 184) 24deg, rgb(184, 181, 184) 48deg, rgb(169, 175, 183) 48deg, rgb(169, 175, 183) 72deg, rgb(154, 168, 181) 72deg, rgb(154, 168, 181) 96deg, rgb(139, 161, 179) 96deg, rgb(139, 161, 179) 120deg, rgb(125, 152, 175) 120deg, rgb(125, 152, 175) 144deg, rgb(112, 144, 171) 144deg, rgb(112, 144, 171) 168deg, rgb(101, 135, 166) 168deg, rgb(101, 135, 166) 192deg, rgb(92, 126, 161) 192deg, rgb(92, 126, 161) 216deg, rgb(85, 117, 155) 216deg, rgb(85, 117, 155) 240deg, rgb(81, 108, 148) 240deg, rgb(81, 108, 148) 264deg, rgb(79, 99, 141) 264deg, rgb(79, 99, 141) 288deg, rgb(80, 90, 133) 288deg, rgb(80, 90, 133) 312deg, rgb(84, 83, 125) 312deg, rgb(84, 83, 125) 336deg, rgb(91, 75, 116) 336deg, rgb(91, 75, 116) 360deg);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
@media (min-width: 320px) and (max-width: 1023px) {
  body {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}

* {
  outline: none;
}

.invitation {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.envelope {
  background: #d8d4bf;
  width: 100%;
  height: 307.6923076923px;
  position: relative;
  z-index: 1;
}
.envelope.is-open:before, .envelope.is-open:after {
  z-index: -2;
}

.envelope:before,
.envelope:after {
  content: "";
  position: absolute;
  bottom: 0;
}

.envelope:before {
  right: 0;
  border-bottom: 0px solid transparent;
  border-top: 307.6923076923px solid transparent;
  border-right: 500px solid #d4d0b9;
  z-index: 1;
}

.envelope:after {
  left: 0;
  border-bottom: 0px solid transparent;
  border-top: 307.6923076923px solid transparent;
  border-left: 500px solid #ccc7ac;
  z-index: 1;
}

.flap {
  border-right: 250px solid transparent;
  border-top: 153.8461538462px solid #c5bf9f;
  border-left: 250px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  z-index: 2;
}

.mask {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  clip-path: inset(0 0 50% 0);
  overflow: hidden;
  position: relative;
  width: 480px;
  height: 2010px;
  z-index: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.card {
  position: relative;
  width: 480px;
  height: 670px;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 10%;
          transform-origin: 50% 10%;
  -webkit-transform: translate(0, 128%) rotateY(0deg);
          transform: translate(0, 128%) rotateY(0deg);
  font-size: 1.2rem;
  text-align: center;
  font-family: "Playwrite GB J", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

h2 {
  white-space: nowrap;
  font-size: 1.7rem;
}

.extrude {
  color: #fff;
  display: block;
  margin-top: 0.5rem;
}

.face {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background: transparent 50% 100%/auto 100% no-repeat;
  -webkit-box-shadow: 0 3px 6x rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 6x rgba(0, 0, 0, 0.3);
}
.face:last-of-type {
  -webkit-transform: translateZ(-3px) rotateY(180deg);
          transform: translateZ(-3px) rotateY(180deg);
  background-size: 130% auto;
}

.front {
  background-image: url(./card.jpg);
  background-position: top;
  background-size: cover;
}

.face.back {
  background-image: url(./pattern.jpg);
  background-position: top;
  background-size: cover;
  color: #000;
  overflow: hidden;
  padding: 2rem;
}
.face.back img {
  position: absolute;
  top: 60px;
  display: inline-block;
  width: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

strong {
  font-weight: 400;
}

.button {
  font: normal 1.25em "Karla", sans-serif;
  padding: 15px 30px;
  border-radius: 30px;
  background: #505a85;
  color: #d8d4bf;
  border: none;
  position: absolute;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  left: 50%;
  top: 240px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: background 0.3s ease-out, color 0.3s ease-out;
  transition: background 0.3s ease-out, color 0.3s ease-out;
  text-decoration: none;
}
.button.invert {
  color: #505a85;
  background: #bbb48f;
}
.button.link {
  background: #24c112;
  color: #fff;
  display: none;
  top: 214px;
}

.flip {
  position: absolute;
  left: 10%;
  bottom: 2%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #505a85;
  border: none;
  z-index: 1;
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
  pointer-events: none;
}
.flip svg {
  width: 25px;
  height: 25px;
  fill: #fff;
}

.heart {
  width: 105px;
  height: 105px;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.heart:hover::before {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  border-radius: 100%;
  opacity: 0;
}

.heart::before {
  content: "";
  display: block;
  -webkit-transition: all 400ms;
  transition: all 400ms;
  -webkit-animation: pulse 1.2s steps(1) infinite;
          animation: pulse 1.2s steps(1) infinite;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -15px;
  -webkit-box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 30px 60px #3d0000, 45px 60px #5d1a1b, 60px 60px #8e1a19, 75px 60px #a80700, 90px 60px #b90a00, 45px 75px #3d0000, 60px 75px #551415, 75px 75px #670100, 60px 90px #340000;
          box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 30px 60px #3d0000, 45px 60px #5d1a1b, 60px 60px #8e1a19, 75px 60px #a80700, 90px 60px #b90a00, 45px 75px #3d0000, 60px 75px #551415, 75px 75px #670100, 60px 90px #340000;
}

@-webkit-keyframes pulse {
  50% {
    -webkit-filter: blur(1.4px);
            filter: blur(1.4px);
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
}

@keyframes pulse {
  50% {
    -webkit-filter: blur(1.4px);
            filter: blur(1.4px);
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
}
.maps-link {
  color: #000;
}