/*Speech Bubble CSS by CodingDude - https://www.coding-dude.com/wp/css/css-speech-bubbles/ */
/*** Speech Bubble CSS Code Starts Here ***/

.speech-bubble{
  --arrow-w:0.5em;
  --arrow-h:1em;
  --bubble-corners:0;
  --w:14em;
  --border-size:2px;
  --text-color:black;
  --bubble-color:white;
  --border-color:black;
}
.speech-bubble{
  text-align:center;
  font-family:cursive;
  font-size: 16px;
  font-weight: normal;
  color:var(--text-color);
  background:var(--bubble-color);
  padding:1em;
  position:relative;
  border-radius:var(--bubble-corners);
  max-width:var(--w);
  box-shadow:0 0 0 var(--border-size) var(--border-color);
  min-width: 180px;
}

@media screen and (min-width: 768px) {
  .speech-bubble {
    font-size: 20px;
  }
}

.speech-bubble.round{
  --bubble-corners:1em;
}

.speech-bubble.circle{
  --bubble-corners:100%;
  padding:2em;
}

.speech-bubble:before,.speech-bubble:after{
  content:"";
  position:absolute;
  bottom:calc(-1 * var(--arrow-h) * 2 + 0.5px);
  left:50%;
  border-style:solid;
  border-width:var(--arrow-h) var(--arrow-w);
  border-color:var(--bubble-color) transparent transparent;
}

.speech-bubble:before{
  border-width:calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
  border-color:var(--border-color) transparent transparent;
  bottom:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
  left:calc(50% - var(--border-size));
}

.speech-bubble.t:after{
  border-color:transparent transparent var(--bubble-color);
  bottom:auto;
  top:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.t:before{
  border-width:calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
  border-color:transparent transparent var(--border-color);
  bottom:auto;
  top:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.l:after{
  border-color:transparent var(--bubble-color) transparent transparent;
  bottom:auto;
  border-width:var(--arrow-w) var(--arrow-h);
  top:calc(50% - var(--arrow-w));
  left:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.l:before{
  border-width:calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
  border-color:transparent var(--border-color) transparent transparent;
  bottom:auto;  
  top:calc(50% - var(--arrow-w) - var(--border-size));
  left:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.r:after{
  border-color:transparent transparent transparent var(--bubble-color);
  bottom:auto;
  left:auto;
  border-width:var(--arrow-w) var(--arrow-h);
  top:calc(50% - var(--arrow-w));
  right:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.r:before{
  border-width:calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
  border-color:transparent transparent transparent var(--border-color);
  bottom:auto;
  left:auto;
  top:calc(50% - var(--arrow-w) - var(--border-size));
  right:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.pop{
  animation-name: pop;
  animation-duration: 0.5s;
  animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);
}

.speech-bubble.float{
  animation-name: float-up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function:ease;
}

.speech-bubble.r.float{
  animation-name: float-left;
}

.speech-bubble.l.float{
  animation-name: float-right;
}

.speech-bubble.t.float{
  animation-name: float-down;
}

@keyframes pop {
  0% {transform: scale(0.8);}
  80% {transform: scale(1.1);}
  90% {transform: scale(0.9);}
  100% {transform: scale(1);}
}

@keyframes float-up {
  0% {transform: translateY(0);}
  50% {transform: translateY(calc(-1 * var(--arrow-h)));}
}

@keyframes float-left {
  0% {transform: translateX(0);}
  50% {transform: translateX(calc(-1 * var(--arrow-h)));}
}

@keyframes float-right {
  0% {transform: translateX(0);}
  50% {transform: translateX(var(--arrow-h));}
}

@keyframes float-down {
  0% {transform: translateY(0);}
  50% {transform: translateY(var(--arrow-h));}
}