@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");
body {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  background: #f59b9b;
}

.letter {
  margin-top: 100px;
  position: relative;
  background: transparent;
  height: 0px;
  width: 0px;
  border-top: 80px solid transparent;
  border-bottom: 50px solid #7CC0C8;
  border-left: 100px solid #95DAE2;
  border-right: 100px solid #9BDEE6;
}
.letter:before {
  z-index: -2;
  content: '';
  position: absolute;
  height: 140px;
  width: 140px;
  background: #CCE3E6;
  transform: rotate(45deg) translate(-50%, -50%);
  left: -70px;
  top: -50px;
}
.letter:after {
  font-family: 'Roboto Condensed', sans-serif;
  z-index: -1;
  content: 'I LOVE YOU 🥳';
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #866FFF;
  position: absolute;
  height: 100px;
  width: 140px;
  background: white;
  left: -70px;
  animation: pop 1500ms infinite ease-in-out;
}

@keyframes pop {
  0% {
    top: -140px;
  }
  40% {
    top: -140px;
    transform: rotate(0deg);
  }
  70% {
    top: -60px;
    transform: rotate(8deg);
  }
  100% {
    top: -140px;
  }
}