:root {
    --message-background-color: black;

    --avatar-size: 50px;
    --avatar-gap: 16px;

    --border-radius: 50px;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
}

.msg,
.badges,
.content,
.time {
    display: inline-block;
}

#chat li {
    border-radius: var(--border-radius);
}

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

.avatar img {
    width: var(--avatar-size);
    border-radius: var(--border-radius);
}


.message {
    color: var(--font-color);
    font-size: var(--font-size);
    overflow-wrap: anywhere;
    text-shadow: 1px 1px black;
}

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

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

.content {
    text-shadow: 1px 1px #000000c7;
}

.emote {
    vertical-align: middle;
    height: var(--font-size);
}

.time {
    font-size: var(--time-size);
    float: var(--time-align);
    align-self: flex-start;
    position: relative;
    right: calc(var(--border-radius) - 25px);
    top: 5px;
}
