:root {
    --avatar-size: 80px;
    --avatar-gap: 15px;
    --message-padding: 16px;
    --message-gap-bottom: 16px;
    --message-background-color: #18181b;
    --rewardColor: purple;
    --badge-size: 15px;
    --badge-spacing: 2px;
    --emote-size: 16px;
    --emote-only-size: 32px;
    --font-color: #fff;
    --font-size: 16px;
    --font-family: 'Roboto', sans-serif;
    --time-size: 12px;
    --time-align: right;
    --animate-duration: .3s;
    --animate-delay: 0;

}

.reward {
    border-left: 5px solid var(--rewardColor);
}


.badges img {
    width: var(--badge-size);
    margin-left: var(--badge-spacing);
}

.message {
    padding-right: var(--message-gap);
    background-color: var(--message-background-color);
    color: var(--font-color);
    font-size: var(--font-size);
    overflow-wrap: anywhere;
}

.message .emote {
    height: var(--emote-size);
}

.emoteonly .message .emote {
    height: var(--emote-only-size);
}

.name {
    color: var(--userColor);
    font-weight: bold;
}

.time {
    font-size: var(--time-size);
    float: var(--time-align);
}

.broadcaster {}

.subcriber {}

.reply {}

.highlight {}

.me {}
