body {
  width: 100vw; /* ancho de la ventana */
  height: 100vh; /* alto de la ventana */
  display: flex;
  position: absolute;
  justify-content: center;
          /*  background-color: lightgray;*/
  background-image: url("imagen2.jpg");
 /* background-size: ;*/
  background-repeat: repeat;
}
.sobre {
  width: 15em;
  height: 10em;
  background-color: rgb(245, 98, 201);
  border-bottom-left-radius: 20px; /* redondear abajo izquierda */
  border-bottom-right-radius: 20px; /* redondear abajo derecha */
  position: absolute; /* todavia no se q hace xd*/
  top: 30vh;
  border: 2px rgb(158, 63, 158) solid;
  z-index: 0;
}

.apertura {
  width: 15em;
  height: 7em;
  clip-path: polygon(0 0, 100% 0, 50% 100%); /*triangulo*/
  position: relative;
  background: hsl(310, 72%, 48%);
  top: 30vh;
  border-top: 2px solid rgb(158, 63, 158);
  z-index: 0;
}

.carta {
  width: 7.5em;
  height: 12em;
  background-color: beige;
  position: absolute;
  top: 28vh;
  border-radius: 8px;
  z-index: -1;
  border: 0.5px dashed black;
  transform: rotate(90deg);
}

.open {
  width: 8em;
  height: 3.5em;
  position: absolute;
  top: 70vh;
  border-radius: 5px;
  background-color: lightpink;
}
p {
  font-size: 1%;
  font-family: cursive;
  color: mediumvioletred;
  text-align: justify;
  margin: 2%;
}
        
.image {
  position: fixed;
  width: 100%;
  height: 38%;
  bottom: 0%;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-image: url("imagen1.jpg");
  background-size: cover;
}

@keyframes salir {
  0% {transform: translateY(0) rotatez(90)}
  100% {transform: translateY(-12em) rotatez(0)}
}

@keyframes bajar {
  0% {z-index: 1;}
  100% {transform: translateY(2em) scale(250%); 
  z-index: 1;}
}

@keyframes ocultarSobre {
  from {opacity: 1;}
  to {opacity: 0; visibility: hidden;}

}