Youtube Chat Transparent Background (Solely CSS)

So, I was searching through youtube chat CSS today and found that if you type this into the CSS section of browser configuration (of YouTube chat), you will get a transparent background. I will also show how to do other things.
body {
margin: 0px auto;
overflow: hidden;
}
#item-list {
background-color: rgba(0, 0, 0, 0);
}

.yt-live-chat-item-list-renderer-1[allow-scroll] #items.yt-live-chat-item-list-renderer {
overflow-y: hidden;
}
yt-live-chat-renderer.style-scope.yt-live-chat-app.x-scope.yt-live-chat-renderer-0 {
background-color: RGBA(0,0,0,0);
}



This will make the background transparent, if you want it a certain color (with or without opacity) you type this in:

yt-live-chat-renderer.style-scope.yt-live-chat-app.x-scope.yt-live-chat-renderer-0 {
background-color: RGBA(r,g,b,a);
}

now find an RGBA color, with a being alpha (1 is opaque, 0 is transparent), and plug it in like this: RGBA(50,200,56,.5);

If you want to remove the top of bottom GUI, type this in:

yt-live-chat-message-input-renderer.style-scope.yt-live-chat-renderer.x-scope.yt-live-chat-message-input-renderer-0 {
display: none;
}

yt-live-chat-header-renderer.style-scope.yt-live-chat-renderer.x-scope.yt-live-chat-header-renderer-0 {
display: none;
}


If you want to change font style of text, add this in:
#message {
css !important;
}
Here are some things you may want to add:
color: RGBA(r,g,b,a) !imortant; for font color
font-weight:weight !important; for font weight (bold, light, etc.)
font-size: size in px; for font size;
font-family: family; you will have to use a web safe, or import, a font family


If you want to get rid of the author image, the image next to messages, type this in:
#author-photo {
display:none !important;
}

if you want to get rid of author badges, the badges next to the stream host, admin, etc.
#author-badges{
display:none !important;
}