:root {
    --width_c: 40%;
    --width_v: 60%;
    --width_live: 46%;
    --emote_h: 2.2em;
    --aspect_ratio: 16/9;
    --c_text_rgb: 173,216,230;
    --c_text_red_rgb: 200,42,11;
    --c_text_green_rgb: 40,102,142;
    --margin_msg: 0.72em;
    --shadow: 9,27,59;
    --shadow_loading: 0,2,8;
    --filter_grayscale: sepia(1) hue-rotate(176deg) saturate(1.32);
    --trans_chan: all 300ms ease-out 0s;
}
@font-face {
	font-family: live;
	src: url('../fonts/Oxanium-var.ttf');
    font-weight: 380; 
}
body, html {
    margin: 0px;
    padding: 0px;
    background-color: black;
    color: rgb(var(--c_text_rgb));
	font-family: 'live',sans-serif;	
	/*text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b;*/
    font-size: 11pt;
    letter-spacing: 0.0016em;
}
a {
    text-decoration: none;
    color: rgb(var(--c_text_rgb));
}
a:hover {
    color: rgb(var(--c_text_red_rgb));
}
#container_qa {
    display: flex;
}
#container_arena {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: sticky;
    top: 0px;
    height: 100vh;
    overflow: hidden;
}
#container_live {
    display: flex;
    width: var(--width_live);
    transition: opacity ease 0.3s 0s, width ease-out 0.3s 0s;
}
#container_live.invisible {
    width: 0px;
    opacity: 0;
}
#container_channels {
    display: flex;
    flex-direction: column;
    width: var(--width_c);
    min-height: 100vh;
    transition: all ease-out 0.3s 0s;
    overflow: hidden;
}
#container_channels.opacity {
    opacity: 0.76;
}
#container_channels.invisible {
    width: 0px;
    opacity: 0;
}
#arrow_channels {
    position: fixed;
    aspect-ratio: 10/14;
    height: 4em;
    bottom: 0px;
    background-image: url('../img/arrow_small.png');
    z-index: 10;
    background-size: contain;
    left: calc(var(--margin_msg) / 2);
    filter: drop-shadow(0px 0px 12px) drop-shadow(0px 1px 32px) drop-shadow(0px 1px 32px) drop-shadow(0px 1px 64px) grayscale(0.18);
    color: rgb(var(--shadow));
    transition: all ease 0.3s 0s;
}
#arrow_channels:hover {
    filter: drop-shadow(0px 0px 12px) drop-shadow(0px 1px 32px) drop-shadow(0px 1px 32px) drop-shadow(0px 1px 64px) grayscale(0.0) hue-rotate(180deg);
    cursor: pointer;
}
#arrow_channels.right {
    height: 2em;
    transform: rotate(180deg);
}
#arrow_channels.transparent {
    opacity: 0;
    pointer-events: none;
}
#container_live_center {
    display: flex;
    flex-direction: column;
    width: var(--width_v);
    height: 100vh;
    position: sticky;
    top: 0;
}
#container_live_center.full {
    width: 100%;
}
#container_video {
    width: 100%;
}
#container_video iframe {
    width: 100%;
    aspect-ratio: var(--aspect_ratio); 
    max-height: 100vh;
} 
#container_chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* enable flex child overflow scroll */
    mask-image: linear-gradient(180deg,rgba(0,0,0,0),rgba(255,255,255,1) 1em, rgba(255,255,255,1) calc(100% - 0.4em),rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,0),rgba(255,255,255,1) 1em, rgba(255,255,255,1) calc(100% - 0.4em),rgba(0,0,0,0) 100%);
}
.chat_status_join {
    color: rgb(var(--c_text_rgb));
    background-color: rgba(var(--c_text_rgb),0.2);
    padding: 0 var(--margin_msg) 0 var(--margin_msg);
    height: 2em;
    display: flex;
    align-items: center;
}
.chat_status_join {
    background-image: url('../img/bg_blue.jpg'),url('../img/bg_fence.png');
    background-attachment: fixed,scroll;
    background-size: cover,auto 400%;
    background-position: 0px 0px,0px 0px;
    background-blend-mode: color-burn;
    opacity: .82;
}
.container_chat_message.userstyle .chat_username {
    opacity: 0.8;
}
.chat_username {
    margin-right: 1em;
}
.chat_message a {
    font-style: oblique;
}
#chat_receive {
    flex: 1;
    overflow-y: scroll;
    scrollbar-width: none;
}
/*
#chat_receive * {
    overflow-anchor: none;
}
*/
#chat_receive .container_chat_message {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: var(--margin_msg);
}
#chat_receive::-webkit-scrollbar { 
    display: none;
}
#chat_receive_anchor {
    overflow-anchor: auto;
    height: 400px;
    margin-top: -400px;
  }
.container_stream {
    display: flex;
    flex-direction: column; 
    position: relative;
}
.container_stream:hover:not(.selected) {
    cursor: pointer;
}
.container_stream:not(.selected):not(:hover) .img_stream.after {
    opacity: 0;
}
.container_stream:not(.selected):hover .img_stream.before {
    mask-position: 0px 0px;
    -webkit-mask-position: 0px 0px;
}
.container_stream .img_stream {
    transition: all ease 480ms 0s;
  }
.container_stream.selected .stream_username {
    color: rgb(var(--c_text_red_rgb));
}
.container_stream:hover:not(.selected) .stream_username {
    color: rgb(var(--c_text_red_rgb));
}
.stream_title,.stream_username,.stream_viewercount {
    padding: 0 var(--margin_msg) 0 var(--margin_msg);
}
.container_stream :last-child {
    margin-bottom: 1em;
}
.stream_title {    
    display: flex;
    justify-content: left;  
}
.stream_username {
    color: rgb(var(--c_text_green_rgb));
    filter: drop-shadow(0.6px 0px 0px);
}
.stream_username,.stream_viewercount {
    display: flex;
    justify-content: end;  
}
img.emote {
    height: var(--emote_h);
    margin-top: calc(-1 * var(--emote_h) / 2);
    margin-bottom: calc(-1 * var(--emote_h) / 2);
    z-index: -1;
}
img.img_stream {
    width: 100%;
    aspect-ratio: var(--aspect_ratio); 
    transition: var(--trans_chan);
}
img.img_stream.before {
    filter: var(--filter_grayscale);
    mask-image: url('../svg/nnnoise_inv_2.svg'),radial-gradient(rgba(255,255,255,0.76) 14%,rgba(0,0,0,0) 92%);
    -webkit-mask-image: url('../svg/nnnoise_inv_2.svg'),radial-gradient(rgba(255,255,255,0.76) 14%,rgba(0,0,0,0) 92%);
    opacity: 0.62;
}
img.img_stream.after {
    position: absolute;
    width: 100%;
    aspect-ratio: var(--aspect_ratio);
    mask-image: radial-gradient(rgb(255,255,255) 12%,rgba(0,0,0,0) 76%);
    -webkit-mask-image: radial-gradient(rgb(255,255,255) 12%,rgba(0,0,0,0) 76%);
}
#chat_send {    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 2em;
    position: relative;
    transition: opacity ease 300ms 0s;
}
#chat_send.transparent::before {    
    opacity: 0;
}
#chat_send.transparent input {    
    opacity: 0;
}
#chat_send.transparent {    
    pointer-events: none;
}
#chat_send::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all ease 300ms 0s;
    /*
    background-image: url('../img/bg_fence.png'),url('../img/bg_blue.jpg');
    background-size: 196px 196px, cover;
    background-position: 0px 4px,0px 0px;
    */
    background-image: url('../img/makkon_grate_sml.png'),url('../img/bg_blue.jpg');
    background-attachment: scroll,fixed;
    background-size: auto 100%, cover;
    background-position: 0px 0px,0px 0px;
    background-blend-mode: hard-light;
}
#chat_send:hover::before {
    filter: hue-rotate(92deg) saturate(1.2) brightness(1.6);
  }
input {
	font-family: 'live',sans-serif;
    font-size: 11pt;	
    letter-spacing: 0.0016em;
}
input[type=text] {
    padding: 0 var(--margin_msg) 0 var(--margin_msg);
    margin: -100% 0 0 0;
    height: 100%;
    position: relative;
    outline: none;
    border: 0px;
    background-color: transparent;    
    color: rgb(var(--c_text_rgb));
    /*text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b;*/
}
input.chat_send.full {
    transition: opacity ease 300ms 0s;
}
input.chat_send.full:not(.connect) {
    width: calc(100% - (var(--margin_msg) * 2) - 40px);
    padding: 0 calc(var(--margin_msg) + 20px) 0 calc(var(--margin_msg) + 20px); 
}
input.chat_send.connect {
    padding: 0;
}
input.chat_send.connect:hover {
    cursor: pointer;
}
input[type=text]:hover {
    /* background-color: rgba(var(--c_text_rgb),0.2); */
}
#connect_iframe {
    display: none;
}
::placeholder {
    text-align: center; 
    opacity: 0.9;
}
::selection {
    background: rgb(var(--c_text_red_rgb));
}