body#website {
  height: 100%;
  /* background-color: #EEECEC; */

  .letter {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #EEECEC;
    /* inset: 25px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.5); */
  }
  
  .letter__header {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    /* box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.5); */
    /* border-radius: 0 0 5% 5%; */
  }
  
  .frosted-left {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    width: 52%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    /* border-radius: 16px; */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: rotateY(0deg);
    transform-origin: left center;
  }
  
  .frosted-right {
    z-index: 9;
    position: absolute;
    right: 0;
    top: 0;
    width: 52%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    /* border-radius: 16px; */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: rotateY(0deg);
    transform-origin: right center;
  }
  
  .letter-wrapper {
    position: absolute;
    width: 100%;
    height: 170px;
    bottom: -75px;
    left: 0;
    top: 47%;
    transform: translateY(-50%);
    /* transform: translateX(0); */
    background: #D3D8D6;
    /* border-radius: 16px; */
    /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
    rotate: 3.5deg;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .4);
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
  }
  
  h1 {
    font-size: 103px;
  }
  
  .letter__body {
    padding: 25px 15px;
    font-size: 20px;
    text-align: center;
    color: rgb(47, 47, 47);
    margin-top: 10%;
    display: flex;
    justify-content: center;
    /* align-items: center; */
  }
  
  .letter-seal {
    z-index: 15;
    position: absolute;
    width: 130px;
    height: 130px;
    top: 40%;
    right: -50px;
    /* transform: translateX(-50%); */
    background-image: url("/assets/invitation/wax-seal-4a1e1bfb.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0px 4px 18px 0 rgba(0, 0, 0, 0.5);
    transform-origin: center center;
    &:hover {
      margin-top: 2px;
      box-shadow: 0px 4px 28px 0 rgba(0, 0, 0, 0.2);
    }
    /* clip-path: polygon(50% 5%, 95% 87%, 93% 100%, 3% 100%, 3% 93%) !important; */
  }
  
  
  
  
  
  .envelope2 {
    position: relative;
    --width: 524px;
    aspect-ratio: 1 / 1;
    /* background-color: red; */
    width: var(--width);
    height: auto;
  
    .envelope__header-wrapper {
      position: absolute;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      top: 0;
      /* background-color: rgb(132, 10, 246); */
      height: calc(39%);
    }
  
    .envelope__top-gradient {
      z-index: 8;
      position: absolute;
      background-image: url("/assets/invitation/top_gradient-e3853021.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      background-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
  
    .envelope__top-color {
      z-index: 5;
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: rgb(183, 0, 255);
      /* background-color: #c01fc6; */
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      mask-image: url("/assets/invitation/top_color-9f492312.png");
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  
    .envelope__top-cover {
      z-index: 3;
      position: absolute;
      background-color: transparent;
      background-image: url("/assets/invitation/inner2-4da16e25.png");
      clip-path: polygon(50% 5%, 95% 87%, 93% 100%, 3% 100%, 3% 93%) !important; /* HOMEMADE */
      /* clip-path: polygon(50% 4%, 95% 35%, 94% 100%, 6% 100%, 5% 35%) !important; */
      background-size: 100%;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
  
    .envelope__bottom-wrapper {
      position: absolute;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      bottom: 0;
      /* background-color: blueviolet; */
      height: calc(61%);
    }
    
    .envelope__bottom-color {
      z-index: 5;
      position: absolute;
      height: 100%;
      width: 100%;
      /* background-color: rgb(247, 242, 236); */
      background-color: rgb(183, 0, 255);
      /* background-color: #c01fc6; */
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      mask-image: url("/assets/invitation/bottom_color-88540763.png");
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__bottom-cover {
      z-index: 3;
      position: absolute;
      background-color: transparent;
      background-image: url("/assets/invitation/inner2-4da16e25.png");
      /* clip-path: polygon(50% 4%, 95% 35%, 94% 100%, 6% 100%, 5% 35%) !important; */
      background-size: 100%;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
  
    .envelope__bottom-gradient {
      /* display: none; */
      z-index: 8;
      position: absolute;
      background-image: url("/assets/invitation/bottom_gradient-cbe55b11.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-image: url("/assets/invitation/bottom_gradient-cbe55b11.png");
      mask-image: url("/assets/invitation/bottom_gradient-cbe55b11.png");
      background-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
    
    .envelope__close-top {
      z-index: 5556;
      -webkit-mask-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      mask-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      background-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      position: absolute;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 206px;
      /* height: var(--current-top-height); */
      background-size: 100% 100%;
      width: 100%;
      top: 151px;
      left: 0;
    }
    
    .envelope__close-top-shadow {
      --envelope-margin-ratio: 0.51px;
      z-index: 5554;
      position: absolute;
      width: 100%;
      height: 206px;
      top: 153px;
      left: 0;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("/assets/invitation/envelop_top_shadow-dc9602d2.png");
    }
    
    .envelope__close-top-color {
      background-color: rgb(213, 147, 67);
      z-index: 5555;
      -webkit-mask-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png");
      mask-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png");
      /* background-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png"); */
      position: absolute;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 206px;
      background-size: 100% 100%;
      width: 100%;
      top: 151px;
        left: 0;
    }
    
    .envelope__open-shadow {
      /* --envelope-margin-ratio: 0.51px; */
      /* background-image: url("/assets/invitation/opened-shadow-c2fc0ae2.png"); */
      position: absolute;
      z-index: 0;
      min-height: calc(100% + calc(20 * var(--envelope-margin-ratio)));
      min-width: calc(100% + calc(9 * var(--envelope-margin-ratio)));
      margin-left: calc(-4.5 * var(--envelope-margin-ratio));
      margin-right: calc(-4.5 * var(--envelope-margin-ratio));
      margin-top: calc(-4.5 * var(--envelope-margin-ratio));
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__closed > .envelope__cover {
      opacity: 0;
    }
    
    .envelope__top-gradient {
      transform-origin: bottom;
      z-index: 8;
      width: 100%;
      position: absolute;
      background-image: url("/assets/invitation/top_gradient-e3853021.png");
      -webkit-mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__close-top-color {
    
    }
    
    .envelope__close-top-shadow {
    
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .envelope {
    --current-top-height: 241px;
    --current-bottom-height: 384px;
    --width: 524px;
    --envelope-margin-ratio: 1.28px;
    --envelope-margin-no-px: 1.28px;
    /* min-width: var(--width);
    max-width: var(--width); */
  
    /* min-height: calc(var(--current-top-height) + var(--current-bottom-height)); */
    aspect-ratio: .84 / 1;
    height: 70vh;
    /* height: 300px !important; */
    
    /* display: flex;
    justify-content: center; */
    align-items: center;
  
    /* margin-bottom: 15px; */
    /* background-color: #fff; */
    position: relative;
  
    .envelope__header-wrapper {
      /* position: relative;
      z-index: 0;
      width: 100%; */
      /* height: 31px; */
    }
    
    .envelope__bottom-wrapper {
      position: absolute;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      top: 31px;
      height: calc(100% - 31px);
    }
    
    .envelope__color {
      z-index: 5;
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: rgb(247, 242, 236);
      /* background-color: #c01fc6; */
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      mask-image: url("/assets/invitation/envelope-color-81c5302d.png");
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__cover {
      z-index: 3;
      position: absolute;
      background-color: transparent;
      background-image: url("/assets/invitation/inner2-4da16e25.png");
      clip-path: polygon(50% 4%, 95% 35%, 94% 100%, 6% 100%, 5% 35%) !important;
      background-size: 100%;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
    
    .envelope__gradient {
      /* display: none; */
      z-index: 8;
      position: absolute;
      background-image: url("/assets/invitation/whole-envelope-gradient2-8b353fbf.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-image: url("/assets/invitation/whole-envelope-gradient2-8b353fbf.png");
      mask-image: url("/assets/invitation/whole-envelope-gradient2-8b353fbf.png");
      background-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
    
    .envelope__close-top {
      z-index: 5556;
      -webkit-mask-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      mask-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      background-image: url("/assets/invitation/envelope_close_top_gradient-511b09ed.png");
      position: absolute;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 206px;
      /* height: var(--current-top-height); */
      background-size: 100% 100%;
      width: 100%;
      top: 151px;
      left: 0;
    }
    
    .envelope__close-top-shadow {
      --envelope-margin-ratio: 0.51px;
      z-index: 5554;
      position: absolute;
      width: 100%;
      height: 206px;
      top: 153px;
      left: 0;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("/assets/invitation/envelop_top_shadow-dc9602d2.png");
    }
    
    .envelope__close-top-color {
      background-color: rgb(213, 147, 67);
      z-index: 5555;
      -webkit-mask-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png");
      mask-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png");
      /* background-image: url("/assets/invitation/envelope_close_top_color-258d1fa3.png"); */
      position: absolute;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      height: 206px;
      background-size: 100% 100%;
      width: 100%;
      top: 151px;
        left: 0;
    }
    
    .envelope__open-shadow {
      /* --envelope-margin-ratio: 0.51px; */
      /* background-image: url("/assets/invitation/opened-shadow-c2fc0ae2.png"); */
      position: absolute;
      z-index: 0;
      min-height: calc(100% + calc(20 * var(--envelope-margin-ratio)));
      min-width: calc(100% + calc(9 * var(--envelope-margin-ratio)));
      margin-left: calc(-4.5 * var(--envelope-margin-ratio));
      margin-right: calc(-4.5 * var(--envelope-margin-ratio));
      margin-top: calc(-4.5 * var(--envelope-margin-ratio));
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__closed > .envelope__cover {
      opacity: 0;
    }
    
    .envelope__top-gradient {
      transform-origin: bottom;
      z-index: 8;
      width: 100%;
      position: absolute;
      background-image: url("/assets/invitation/top_gradient-e3853021.png");
      -webkit-mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      mask-image: url("/assets/invitation/top_gradient-e3853021.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .envelope__close-top-color {
    
    }
    
    .envelope__close-top-shadow {
    
    }
  }
  
  
  
  /* .envelope__open .envelope__cover {
    opacity: 0;
  } */  
}