/* adapted from https://codepen.io/quatmo/pen/jVoXQe */

:root {
    --bg: mintcream;
  }

.bubble {
  text-transform: uppercase;
  font-family: 'Comic Neue', sans-serif;
  display: inline-block;
  position: relative;
  padding: 1.25em 25px;
  border-radius: 20px;
  border: 3px solid black;
  background: var(--bg);
  clear: both;
  margin: 10px 20px 60px;
}
.bubble:before {
  content: "";
  position: absolute;
  bottom: -50px;
  height: 50px;
  width: 90px;
}
.bubble.left {
  /*float: left;*/
  /*margin: 10px 100px 60px 10px;*/
}
.bubble.left:before {
  border-radius: 0 0 100%;
  box-shadow: -2px -2px 0 0 #000 inset, -23px 0 0 0 #fff inset, -25px -2px 0 0 #000 inset;
  left: 0;
}
.bubble.right {
  /*float: right;*/
  /*margin: 10px 10px 60px 100px;*/
}
.bubble.right:before {
  border-radius: 0 0 0 100%;
  box-shadow: 2px -2px 0 0 #000 inset, 23px 0 0 0 #fff inset, 25px -2px 0 0 #000 inset;
  right: 0;
}
.bubble.think:before {
  height: 3px;
  width: 3px;
  bottom: -20px;
  border-radius: 100%;
  background: #fff;
}
.bubble.think.left:before {
  left: 50px;
  box-shadow: 0 0 0 7px white, 0 0 0 10px black, -20px 15px 0 5px white, -20px 15px 0 8px black, -40px 20px 0 2px white, -40px 20px 0 5px black;
}
.bubble.think.right:before {
  right: 50px;
  box-shadow: 0 0 0 7px white, 0 0 0 10px black, 20px 15px 0 5px white, 20px 15px 0 8px black, 40px 20px 0 2px white, 40px 20px 0 5px black;
}
.bubble.yell:before {
  height: 0px;
  width: 0px;
  bottom: -8px;
  border-radius: 0;
  background: #fff;
}
.bubble.yell:after {
  content: "";
  position: absolute;
  bottom: -41px;
  height: 20px;
  width: 59px;
}
.bubble.yell.left:before {
  transform: skew(-45deg);
  left: 50px;
  box-shadow: 0 -3px 0 5px var(--bg), 0 0 0 5px var(--bg), 0 8px 0 5px var(--bg), 8px 8px 0 5px var(--bg), 16px 8px 0 5px var(--bg), 24px 8px 0 5px var(--bg), 0 0 0 8px black, 0 8px 0 8px black, 8px 8px 0 8px black, 16px 8px 0 8px black, 24px 8px 0 8px black;
}
.bubble.yell.left:after {
  border-radius: 0 0 60%;
  transform: skew(-45deg);
  box-shadow: -3px -2px 0 0 #000 inset, -14px 0 0 0 #fff inset, -17px -2px 0 0 #000 inset;
  left: 0;
}
.bubble.yell.right:before {
  transform: skew(45deg);
  right: 50px;
  box-shadow: 0 -3px 0 5px var(--bg), 0 0 0 5px var(--bg), 0 8px 0 5px var(--bg), -8px 8px 0 5px var(--bg), -16px 8px 0 5px var(--bg), -24px 8px 0 5px var(--bg), 0 0 0 8px black, 0 8px 0 8px black, -8px 8px 0 8px black, -16px 8px 0 8px black, -24px 8px 0 8px black;
}
.bubble.yell.right:after {
  border-radius: 0 0 0 60%;
  transform: skew(45deg);
  box-shadow: 3px -2px 0 0 #000 inset, 14px 0 0 0 var(--bg) inset, 17px -2px 0 0 #000 inset;
  right: 0;
}