@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.speech-bubble-l, .speech-bubble-r {
  animation: float 4s ease-in-out infinite;
}

.speech-bubble-l {
  position: relative;
  background-color: #7777779d;
  border-radius: 20px;
  padding: 35px;
  min-height: 100px;
}

.speech-bubble-l::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -10px;
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: transparent #7777779d transparent transparent;
}
  
.speech-bubble-l h3 {
  text-align: center;
  margin: 0 0 10px 0;
}

.speech-bubble-l p {
  text-align: left;
  margin: 0;
}

.speech-bubble-r {
  position: relative;
  background-color: #7777779d;
  border-radius: 20px;
  padding: 35px;
  min-height: 30vh;
}

.speech-bubble-r::after {
    content: "";
    position: absolute;
    top: 40px;
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #7777779d;
}
  
.speech-bubble-r h3 {
  text-align: center;
  margin: 0 0 10px 0;
}

.speech-bubble-r p {
  text-align: left;
  margin: 0;
}