Crk workskin(CSS and HTML)

CSS:

#workskin .textbox {
  position: relative;
  border-top-right-radius: 4em 4em;
  border-top-left-radius: 4em 4em;
  border-bottom-right-radius: 4em 4em;
  border-bottom-left-radius: 4em 4em;
  background-color: #FEF2E6;
  padding: 0.5em 3em 0.5em 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  min-height: 7em;
  width: 99%;
  line-height: 1.5em;
  border-style: solid;
  border-width: 1px 2px 3px 2px;
  border-color: #30342E;
  box-shadow: 0 5px #FFFFFF inset;
  font-family: "Moichy Pop One", Lexend, "Comic Sans MS";
  font-size: 1.1em;
  color: #000000;
  z-index: 0;
  box-sizing: border-box;
}

#workskin .nametag {
  position: absolute;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
  background-color: #854619;
  padding: 0.25em 1em 0.25em 1em;
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: auto;
  margin-right: auto;
  color: #FFFFFF;
  display: inline-block;
  line-height: 2em;
  height: 2em;
  min-width: 5em;
  width: fit-content;
  top: -1.5em;
  border-style: solid;
  border-width: 0.1875em;
  border-color: #FFFFFF;
  text-align: center;
  z-index: 1;
}
#workskin .textbox a {
  color: #000000;
}

#workskin .nametag p {
  margin: 0;
}

#workskin .left {
  left: 2em;
}

#workskin .center {
  left: 0;
  right: 0;
  margin: auto;
}

#workskin .right {
  right: 2em;
}

#workskin .character1 {
  background-color: orange;
}

#workskin .character2 {
  background-color: maroon;
}

#workskin .character3 {
  background-color: darkblue;
}

HTML:

<div class="textbox">
<div class="nametag left character1">
<p>Test Character 1</p>
</div>

<p>The orange character had something <em>extremely</em> witty to say.</p></div>

<div class="textbox">
 <div class="nametag center character2">
<p>Test Character 2</p>
</div>

<p>The maroon character responded with something witty in kind.</p>
</div>

<div class="textbox">
 <div class="nametag right character3">
<p>Test Character 3</p>
</div>

<p>The dark blue character, though - this one took their time.  They went on and on and on and on and <strong>on</strong>, whinging for hours about nothing at all while the two other characters stood uncomfortably, uncertain whether it was polite to leave halfway through a tirade of this length.  It was so unbelievably long that, were it to go on for much longer, it would begin to stretch the bounds of reality itself, pushing outward and causing the textbox to grow in kind.  The amount of text required for this would be truly absurd, but it would still work - which was a godsend, really, because otherwise the fabric of spacetime might have been destroyed long ago.</p>
</div>

<div class="textbox">
<p>With that, the other two went on their merry ways.  The dark blue fellow could run their mouth by themselves.</p>
</div>