twitch-customchat-css

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&display=swap');
body, html { height: 100%; overflow: hidden; }
body { height: 100%; }
#log {
    font-family: 'Zilla Slab', serif;
    font-size: 32px;
    padding: 0 7px;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    text-align: justify;
    text-justify: inter-word;
}
span.meta {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

span.badges {
    margin: 0 5px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

#log > div {
    background: rgba(63,63,63,1);
    margin-top: 10px;
    padding: 15px 5px;
    border-radius: 5px;
    color: #191919;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;

    /* transition?? */

}

span.name {
    font-weight: 700;
    align-self: center;
    margin-top: -15px;
}

span.name:after {
    content: ':';
}

span.message {
    font-weight: 400;
    color: #fff;
    margin-left: 10px;
    align-self: center;
}