style.css

@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap);

* { box-sizing: border-box; }

html, body { height: 50%; overflow: hidden; }

body { background: transparent !important; line-height: 1.5em; color: #fff;}

#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
#log>div { animation: bounceInUp .3s ease forwards, fadeOut 0.5s ease 0 forwards;
  -webkit-animation: bounceInUp .3s ease forwards, fadeOut 0.5s ease 0 forwards;}

.colon { display: none; }

#log {position: absolute; width: 100%; bottom: 0; left: 0; padding: 0 10px 10px;}
#log>div.deleted { visibility: hidden; }

/* ===== USERNAME ===== */
#log .meta {position: absolute; top: 0; left: 10px; padding: 9px 14px; line-height: 15px; border-radius: 8px; z-index: 1;
  font-family: 'Merriweather'; font-size: 14px; font-weight: 900;}
  #log .meta .badges {float: left; margin-right: 10px;}
    #log .meta .badges > img { width: 18px; height: 18px; margin-right: 5px;}
      #log .meta .badges > img:last-child {margin-right: 0;}
  #log .meta .name {float: left; line-height: 21px;}

/* ===== USERMESSAGE ===== */
#log .message {position: relative; min-height: 20px;}
  #log .message .container-message {background: rgba(0, 0, 0, 0.7); padding: 20px 18px 15px 18px; border: 2px solid #ffd539; border-radius: 0 10px 10px 10px; display: inline-block;
    font-family: 'Ubuntu'; font-size: 18px; word-break: break-word;}
    #log .message .container-message .emote {background-image: none !important;}
    #log .message .container-message .emote img {max-width: 25px;}