#characon{
        background-image: url('/public/default.png');
        background-size: cover;
        width: 200px;
        height: 200px;
        display: inline-block;
}

#characon.awawawa {
    background-image: url('/public/awawawa.png');
}

#characon.umm {
    background-image: url('/public/umm.png');
}

#speechBubble {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  vertical-align: top;
}

#speechBubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

#speechBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 7.8px 15.5px 7.8px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}

.pentaContainer {
  margin : 50px;
  white-space: nowrap;
}