body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #b784db;
}
.envelope {
  position: relative;
  cursor: pointer;
}

.back {
  position: relative;
  width: 250px;
  height: 200px;
  background: #6247aa;
}
.front {
  position: absolute;
  border-right: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height: 0;
  width: 0;
  top: 0;
  left: 120px;
  z-index: 3;
}
.front:before {
  content: "";
  position: absolute;
  border-left: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height: 0;
  width: 0;
  top: -100px;
  left: -120px;
}
.front:after {
  content: "";
  position: absolute;
  border-bottom: 105px solid #7251b5;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  height: 0;
  width: 0;
  top: -5px;
  left: -120px;
}
.top {
  position: absolute;
  border-top: 105px solid #9163cb;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  height: 0;
  width: 0;
  top: 0;
  transform-origin: top;
  transition: 0.4s;
}
.envelope:hover .top {
  transform: rotateX(160deg);
}
.letter {
  position: absolute;
  background: white;
  width: 230px;
  height: 180px;
  top: 10px;
  left: 10px;
  transition: 0.2s;
}
.envelope:hover .letter {
  transform: translateY(-100px);
  z-index: 2;
}
.text1 {
  position: absolute;
  color: white;
  font-family: sans-serif;
  top: -50%;
}
.text {
  text-align: center;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 20px;
  font-weight: bold;
  color: black;
  position: relative;
  top: -20px;
  left: 20px;
}

/*---heart -----*/
.heart {
  background-color: red;
  height: 70px;
  width: 70px;
  position: relative;
  top: 20px;
  left: 20px;
  transform: rotate(-45deg);
  box-shadow: -5px 10px 90px red;
  animation: untoldcoding 0.8s linear infinite;
}

@keyframes untoldcoding {
  0% {
    transform: rotate(-45deg) scale(1.05);
  }
  70% {
    transform: rotate(-45deg) scale(1);
  }
  100% {
    transform: rotate(-45deg) scale(0.8);
  }
}
.heart:before {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  background-color: red;
  top: -40px;
  border-radius: 50px;
}
.heart:after {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  background-color: red;
  right: -40px;
  border-radius: 50px;
}