body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: url('../img/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
}

.container{
    padding: 10px;
}

.speech-divider {
    padding: 5px 5px;
}

.speech-wrapper {
    .bubble {
        width: 100%;
        min-height: 100px;
        display: block;
        background: #f5f5f5;
        border-radius: 4px;
        box-shadow: 2px 3px 3px #c5c0c0;
        position: relative;
        margin: 0 0 25px;

        &.alt {
            margin: 0 0 0 60px;
        }

        .txt {
            padding: 8px 55px 8px 14px;

            .name {
                font-weight: 600;
                font-size: 12px;
                margin: 0 0 4px;
                color: #3498db;

                span {
                    font-weight: normal;
                    color: #b3b3b3;
                }

                &.alt {
                    color: #2ecc71;
                }
            }

            .message {
                font-size: 12px;
                margin: 0;
                color: #2b2b2b;
            }

            .timestamp {
                font-size: 11px;
                position: absolute;
                bottom: 8px;
                right: 10px;
                text-transform: uppercase;
                color: #999;
            }
        }

        .bubble-arrow {
            position: absolute;
            width: 0;
            bottom: 60px;
            left: -30px;
            height: 0;

            &.alt {
                right: -2px;
                bottom: 40px;
                left: auto;
            }
        }

        .bubble-arrow:after {
            content: '';
            position: absolute;
            border: 0 solid transparent;
            border-top: 9px solid #f5f5f5;
            border-radius: 0 20px 0;
            width: 25px;
            height: 40px;
            transform: rotate(145deg);
        }

        .bubble-arrow.alt:after {
            transform: rotate(45deg) scaleY(-1);
        }
    }
}