:root {
  --mcm-stage-direction-bg-color: #b2ffff;
  --mcm-read-aloud-bg-color: #ffff99;
  --mcm-dialog-bg-color: #2a52be;
  --mcm-dialog-fg-color: white;
  --mcm-color-gold: var(--dnd5e-color-gold);
  --dot-size: 8px;
}

.mcm-dialog {
  background-color: var(--mcm-dialog-bg-color);
  color: var(--mcm-dialog-fg-color);
}

div.mcm-dialog {
  border-left-style: dotted;
  border-right-style: dotted;
  border-color: black;
  border-width: 3px;
  border-color: white;
  padding: 1.5rem;
}

.mcm-stage-direction {
  background-color: var(--mcm-stage-direction-bg-color);
}

div.mcm-stage-direction {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-color: var(--mcm-color-gold);
  padding: 1.5rem;
}

.mcm-stage-direction button {
  margin: 3px;
}

.mcm-read-aloud {
  position: relative;
  background-color: var(--mcm-read-aloud-bg-color);
}

div.mcm-read-aloud {
  border-left-style: solid;
  border-right-style: solid;
  border-color: var(--mcm-color-gold);
  border-width: 1px;
  text-align: justify;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.5rem;
}

.mcm-read-aloud > p:last-of-type::after,
.mcm-read-aloud::after {
  right: calc(var(--dot-size) / -2);
}
.mcm-read-aloud::before,
.mcm-read-aloud > p:last-of-type::before {
  left: calc(var(--dot-size) / -2);
}
.mcm-read-aloud > p:last-of-type::before,
.mcm-read-aloud > p:last-of-type::after {
  bottom: calc(var(--dot-size) / -2);
}

.mcm-read-aloud::before,
.mcm-read-aloud::after {
  top: calc(var(--dot-size) / -2);
}

.mcm-read-aloud::before,
.mcm-read-aloud > p:last-of-type::before,
.mcm-read-aloud::after,
.mcm-read-aloud > p:last-of-type::after {
  content: "";
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 100%;
  background: var(--mcm-color-gold);
}