.envelope {
  width: 100%;
  height: 100vh;
  /*background-color: #e61515;*/
  position: relative;
  margin: 0px auto;
  perspective: 600px;
  transform-style: preserve-3d;
}

.flap {
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: #cccccc;
  transform-origin: center;
  transition: transform 1s;
  z-index: 2;
}

.top {
  top: 0;
  transform-origin: top;
}

.bottom {
  bottom: 0;
  transform-origin: bottom;
}

.envelope.open .top {
  transform: rotateX(180deg);
  border: 1px solid white;
}

.envelope.open .bottom {
  transform: rotateX(-180deg);
}

.letter {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: white;
  /*border-radius: 10px;*/
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateY(0);
  transition: transform 1s;
}

iframe {
  width: 100%;
  min-height: 99vh;
  border: none;
}

/* Rest of your CSS */

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

#stamp {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
  animation: pulse 2s infinite;
  transition: opacity 1s;
}

.envelope:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 3px solid #dddddd;
  z-index: 3;
}

.envelope, .flap {
  background: url('../../assets/img/fondobase.webp') no-repeat center center;
  background-size: cover;
}

.envelope.hide-line:before {
  display: none;
}

body.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}