.speech-bubble {
    filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
    border-radius: 0.5rem;
    max-width: 600px;
    margin: 1rem 1rem 40px;
    padding: 1.5rem 2rem;
    position: relative;
    font-size: 1.2rem;
    font-weight: 400;
    background: #fc9a9a;
    color: #000;
}

.speech-bubble-right {
    filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
    border-radius: 0.5rem;
    max-width: 600px;
    margin: 1rem 1rem 40px;
    padding: 1.5rem 2rem;
    position: relative;
    font-size: 1.2rem;
    font-weight: 400;
    background: #d1f1ff;
    color: #000;
}

.speech-bubble::before {
    border: 12.5px solid transparent;
    border-top: 12.5px solid #fc9a9a;
    border-bottom: 0;
    height: 0;
    width: 0;
    border-top-width: 25px;
    content: "";
    display: block;
    position: absolute;
    left: 3rem;
    bottom: -25px;
    transform-origin: center;
    transform: rotate(90deg) skew(-25deg) translateY(16.6666666667px);
}

.speech-bubble-right::before {
    border: 12.5px solid transparent;
    border-top: 12.5px solid #d1f1ff;
    border-bottom: 0;
    height: 0;
    width: 0;
    border-top-width: 25px;
    content: "";
    display: block;
    position: absolute;
    right: 2rem;
    bottom: -25px;
    transform-origin: center;
    transform: rotate(0deg) skew(-25deg) translateY(-1px);
}

.speech-bubble cite {
    position: absolute;
    bottom: -2rem;
    left: 4.5rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #000000;
}

.speech-bubble-right cite {
    position: absolute;
    bottom: -2rem;
    right: 4rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #000000;
}