.dybo {
  position: relative;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent #36e3d9 transparent;
  z-index: 2;
}
.letter-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
}

.animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  animation: moveMail 4s ease-in-out infinite;
}

@keyframes moveMail {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
}

.animated-mail .dybo {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent #36e3d9 transparent;
  z-index: 2;
}

.animated-mail .top-fold {
  position: absolute;
  top: 50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  transform-origin: 50% 0%;
  animation: foldMail 4s ease-in-out infinite;
  border-color: #03524d transparent transparent transparent;
  z-index: 2;
}

@keyframes foldMail {
  0%, 100% {
    transform: rotateX(0);
    z-index: 2;
  }
  25%, 75% {
    transform: rotateX(180deg);
    z-index: 0;
  }
}

.animated-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background: #25c3ba;
  z-index: 0;
}

.animated-mail .left-fold {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent #58f5ec;
  z-index: 2;
}

.animated-mail .letter {
  left: 20px;
  bottom: 0;
  position: absolute;
  width: 160px;
  height: 60px;
  background: white;
  z-index: 1;
  overflow: hidden;
  animation: extendLetter 4s ease-in-out infinite;
}

@keyframes extendLetter {
  0%, 100% {
    height: 60px;
  }
  50% {
    height: 180px;
  }
}

.animated-mail .letter .letter-border {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #36e3d9,
    #03524d 8px,
    transparent 8px,
    transparent 18px
  );
}

.animated-mail .letter .letter-title {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 40%;
  background: #36e3d9;
}

.animated-mail .letter .letter-context {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 20%;
  background: #36e3d9;
}

.animated-mail .letter .letter-stamp {
  margin-top: 30px;
  margin-left: 120px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  background: #36e3d9;
  opacity: 0.3;
}

.shadow {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 400px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 100%;
  background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
  animation: shrinkShadow 4s ease-in-out infinite;
}

@keyframes shrinkShadow {
  0%, 100% {
    width: 400px;
  }
  50% {
    width: 250px;
  }
}