In looking at the HTML there is a lot of repeated styling in the classes for each person. You could simplify the style by taking advantage of the Cascading part of CSS. For example, you have speech bubbles that have a class for each speaker (gina, abigal, the main character, etc.) and each of those classes repeats all the same styling setting up the same background color, the same border size, border style, padding, etc. The only changes are the text color and border color. You could simplify this by making a class for the speech bubble that sets up the border size, border style, padding, etc. But use a custom property for the colors used for the font and the border, call it something like "--speech-color" and give it a default value for example white. So in a :root pseudo selector at the top of the styles list you could have ":root{--speech-color: white;}"
Then in the class for the speech bubble say ".speech-bubble" you would set the font color by "color: var(--speech-color);" and set up the border including border color as "border 3px solid var(--speech-color);}. Then when Gina speaks in her pink color, you'd have a class for gina that all it needs to do is override the --speech-color so the class would look like ".gina{ --speech-color: pink;}"
Also, for the images that are in the speech bubbles. rather than putting their style information in each image tag, create a style for them. So if you use a class name of "speech" for the speech bubbles. you could create a style for the avatar images in the speech bubbles as ".speech-bubble > img {margin-right: 20px; vertical-align: middle; float:left; width: 75px;}"
