body {
  margin: 0;
  padding: 0;
  background-color: #f09ea5;
}

.text {
  margin-top: 5em;
  font-family: 'Bad Script', cursive;
  text-align: center;
  color: #fff;
}

.arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2em;
  color: #fff;
  animation: arrow 1s linear alternate infinite;
}

.container {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-57%);
  width: 140px;
  height: 280px;
}

.container:hover {
  cursor: pointer;
}

.envelope__top {
  position: relative;
  margin-top: -3px;
  box-sizing: border-box;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-left-width: 80px;
  border-right-width: 80px;
  border-bottom-color: #fadebf;
  transform: rotate3d(1, 0, 0, 180deg);
  transform-origin: 0 100%;
  z-index: 2;
  transition: all 1s linear;
}

.container:hover .envelope__top {
  animation: open 1.3s ease-out both;
}

.envelope {
  box-sizing: border-box;
  width: 5px;
  height: 0px;
  margin-top: 0px;
  background-color: #fcead7;
  border: 50px solid #fbe3c9;
  border-left-width: 80px;
  border-right-width: 80px;
  border-top-color: #fef6ef;
  border-bottom-color: #fbe0c4;
  box-shadow: 0 3px 7px -4px #99656a;
}
.envelope:before {
  content: "";
  position: absolute;
  top: 35.4%;
  left: 1px;
  width: 158px;
  height: 100px;
  border-top: 2px solid #fbe3c9;
}

.element {
  position: absolute;
  top: 8em;
  left: 50%;
  transform: rotate(45deg) scale(0, 0);
  width: 50px;
  height: 50px;
  background-color: #f25489;
  border-radius: 50px 0 50px;
  z-index: 2;
}
.element:before, .element:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f25489;
  border-radius: 60% 0;
}
.element:before {
  top: -25px;
}
.element:after {
  top: 0px;
  left: -25px;
}

.text__hide {
  animation: hideText .2s linear both;
}

.text__show {
  animation: showText .3s linear .5s both;
}

.container:hover .element.element__one {
  animation: elementOne 3s both linear;
  animation-delay: .5s;
}

.container:hover .element.element__two {
  animation: elementTwo 3.5s forwards linear;
  animation-delay: .8s;
}

.container:hover .element.element__three {
  animation: elementThree 3s forwards linear;
  animation-delay: 1s;
}

.container:hover .element.element__four {
  animation: elementOne 4s forwards linear;
  animation-delay: 1.2s;
}

.container:hover .element.element__five {
  animation: elementThree 5.5s forwards linear;
  animation-delay: 1.4s;
}

.container:hover .element.element__six {
  animation: elementTwo 6.5s forwards linear;
  animation-delay: 1.6s;
}

/*--- Animations ---*/
@keyframes hideText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes arrow {
  0% {
    top: 5em;
  }
  100% {
    top: 5.4em;
  }
}
@keyframes open {
  0% {
    transform: rotate3d(1, 0, 0, 180deg);
    transform-origin: 0 100%;
    border-bottom-color: #fadebf;
  }
  50% {
    border-bottom-color: #fadebf;
  }
  100% {
    transform: rotate3d(0, 0, 0, 0);
    transform-origin: 0 101%;
    border-bottom-color: #fef6ef;
  }
}
@keyframes elementOne {
  0% {
    opacity: 1;
    top: 8em;
    left: 2em;
    transform: rotate(90deg) scale(0, 0) translateX(-50%);
  }
  20% {
    opacity: 1;
    top: 2em;
    left: 8em;
    transform: rotate(45deg) scale(0.4, 0.4) translateX(-50%);
  }
  100% {
    opacity: 1;
    top: -15em;
    left: 14em;
    transform: rotate(45deg) scale(1, 1) translateX(-50%);
  }
}
@keyframes elementTwo {
  0% {
    opacity: 1;
    top: 8em;
    left: 42%;
    transform: rotate(45deg) scale(0, 0) translateX(-50%);
  }
  20% {
    opacity: 1;
    top: 2em;
    transform: rotate(45deg) scale(0.4, 0.4) translateX(-50%);
  }
  100% {
    opacity: 1;
    top: -15em;
    transform: rotate(45deg) scale(1, 1) translateX(-50%);
  }
}
@keyframes elementThree {
  0% {
    opacity: 1;
    top: 8em;
    left: 40%;
    transform: rotate(0deg) scale(0, 0) translateX(-50%);
  }
  20% {
    opacity: 1;
    top: 0;
    left: -2em;
    transform: rotate(45deg) scale(0.4, 0.4) translateX(-50%);
  }
  100% {
    opacity: 1;
    top: -15em;
    left: -5em;
    transform: rotate(45deg) scale(1, 1) translateX(-50%);
  }
}