* {box-sizing:border-box;}

html,body {margin:0; height:100%; font-family:sans-serif; font-weight:300;}

div#container {height:100%;}
div#container {position:relative;}

div#container div#liveFeed {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
div#container div#liveFeed video {display:block; width:100%; height:50%; background-color:#000d;}

div#container div#userInterface {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
div#container div#userInterface {background-color:#FFF2;}		/* Debug */

div#container div#userInterface div {background-color:rgba(30,144,255,0.15); background-color:transparent;}	/* Debug */

div#container div#userInterface div#header {display:flex; color:#FFF; padding:1rem;}
div#container div#userInterface div#header div.static {flex:0 0 auto;}
div#container div#userInterface div#header div.stretchy {flex:1 1 auto;}
div#container div#userInterface div#header div {display:inline-block;}
div#container div#userInterface div#header div#userInfo {padding:.5rem;}
div#container div#userInterface div#header div#userInfo div.avatar {border-radius:50%; overflow:hidden; background-color:#0008;}
div#container div#userInterface div#header div#userInfo div.avatar img {width:100%; height:100%; visibility:hidden; width:2rem; height:2rem;}
div#container div#userInterface div#header div#userInfo div.userName {padding:.5rem; font-weight:500;}
div#container div#userInterface div#header div#userInfo div.toggleBtn {font-size:1.5rem;}
div#container div#userInterface div#header div#liveStamp {background:linear-gradient(to bottom,#cc0165,#d80144); border-radius:.35rem; font-weight:400; font-size:18px; padding:.75rem .75rem .5rem;}
div#container div#userInterface div#header div#viewerCount {background-color:#0008; font-size:18px; padding:.75rem .75rem .5rem 1.5rem; border-radius:.35rem; position:relative;}
div#container div#userInterface div#header div#viewerCount svg {font-size:13px; position:absolute; left:.5rem; top:50%; transform:translateY(-50%);}
div#container div#userInterface div#header div#viewerCount span#count {}
div#container div#userInterface div#header div#closeBtn {font-size:2.5rem; padding:0 .5rem;}

div#container div#userInterface div#footer {position:absolute; bottom:0; left:0; width:100%; max-height:50%;}
div#container div#userInterface div#footer div#convoBox {}
div#container div#userInterface div#footer div#reactBox {overflow-x:auto; white-space:nowrap; padding:0 .5rem;}
div#container div#userInterface div#footer div#reactBox {-ms-overflow-style:none; scrollbar-width:none;}
div#container div#userInterface div#footer div#reactBox::-webkit-scrollbar {display:none;}
div#container div#userInterface div#footer div#reactBox div.btn {display:inline-block; color:#FFF; background-color:#FFF2; cursor:pointer; padding: 1.25rem 1.5rem 1rem; margin-right:.25rem; border-radius:4rem; font-size:21px; user-select:none;}
div#container div#userInterface div#footer div#reactBox div.btn.emoji {/*font-size:24px;*/}

div#container div#userInterface div#footer div#chatBox {display:flex; /*background-color:rgba(30,144,255,0.15);*/}
div#container div#userInterface div#footer div#chatBox div.static {flex:0 0 auto;}
div#container div#userInterface div#footer div#chatBox div.stretchy {flex:1 1 auto;}
div#container div#userInterface div#footer div#chatBox div#commentBox {flex:1 1 auto; position:relative; padding:.5rem;}
div#container div#userInterface div#footer div#chatBox div#commentBox input {width:100%; height:100%; border-radius:4rem; border:1px solid #DDD; background-color:transparent; padding:1rem; outline:0 none; color:#FFF; font-size:18px; font-weight:200;}
div#container div#userInterface div#footer div#chatBox div#commentBox div.toggleBtn {position:absolute; top:50%; right:1.5em; transform:translateY(calc(-50% + 3px));}
div#container div#userInterface div#footer div#chatBox div#commentBox div.toggleBtn svg {font-size:1.25rem; color:#FFF;}
div#container div#userInterface div#footer div#chatBox div.btnBox {padding:.5rem .75rem;}
div#container div#userInterface div#footer div#chatBox div.btnBox div.btn {cursor:pointer; padding:.5rem; color:#FFF;}
div#container div#userInterface div#footer div#chatBox div.btnBox div#questionBtn {flex:0 0 auto; display:inline-block;}
div#container div#userInterface div#footer div#chatBox div.btnBox div#shareBtn {flex:0 0 auto; display:inline-block;}
div#container div#userInterface div#footer div#chatBox div.btnBox div#heartBtn {flex:0 0 auto; display:inline-block;}
div#container div#userInterface div#footer div#chatBox div.btnBox div.btn svg {font-size:2.25rem; /*margin:.25rem 0;*/}