How To Create a Chat Overlay

Custom CSS by:
https://rumble.com/c/WhatUpIan
https://rumble.com/c/GlobalGamer2015

Custom CSS to copy into browser source:
body {
background-color: green !important;
/* Use a source key to remove this background color; */
margin: 0px auto;
overflow: hidden;
}

.container {
background: green !important;
/* Use a source key to remove this background color; */
}

.chat {
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
min-width: 700px;
max-width: 700px;
font-size: 28px;
}

.chat--height {
height: 100vh;
}

#chat-history-list {
overflow: hidden;
align-self: flex-end;
}

.chat-history--row {
background: transparent;
/*background: linear-gradient(9deg, rgba(2, 0, 36, 1) 0%, rgba(189, 189, 189, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
padding: 8px;
border-radius: 10px;
animation: fadeOut 2s forwards;
animation-delay: 10s;
padding: 10px;
text-align: center;
}

@keyframes fadeOut {
from {
background-color: white !important;
opacity: 1;
}

to {
opacity: 0;
}
}

.chat-history--user-avatar {
width: 60px;
height: 60px;
border-radius: 100;
}

.chat-history--username {
color: white;
/* Username Color */
font-weight: 800;
padding: 1px;
overflow: hidden;
}

.chat-history--badges-wrapper .chat-history--user-badge {
width: 30px;
height: 30px;
}

.chat-history--message-wrapper .chat-history--emote {
width: 48px;
height: 48px;
}

i.user-image--letter {
width: 60px;
height: 60px;
}

.chat-history--message {
color: white;
/* Message Text Color */
display: block;
overflow: hidden;
font-weight: 600;
}

/* Below Removes Unwanted Sections */
div.chat--header {
display: none;
}

div.chat--signin-container {
display: none;
}

ul#chat-sticky-rants {
... (15 lines left)