body,html{width:100%;height:100%;padding:0;margin:0;}

body {
  background-color: black;
}

div {
  background-color: black;
}

.flex-container {
  display: flex;
  flex-direction: row;
  width:100%;
  height:100%;
  overflow: hidden;
}

#chat {
  height:auto;
  flex-grow: 1;
}

#stream {
  width:75vw;
  height:100%;
  position: relative;
}

#dragbar {
background-color:#202020;
height:100%;
float: right;
width: 7px;
cursor: ew-resize;
visibility: visible;
}

#angelthump {
  border:0; 
  width:100%; 
  height:100%;
}

.hide {
  visibility: hidden;
  height: 0px;
  width: 0px;
}

.enlarge {
  width:100% !important;
  aspect-ratio: unset;
}

.close {
  background-image: url("/img/close.svg");
}

.open {
  background-image: url("/img/open.svg");
}

.stickyright {
  position:absolute;
  top:0;
  right:0;
}

#chattoggle {
  width: 30px;
  height: 30px;
  justify-content: center;
  height: 25px;
  width: 25px;
  margin: 5px;
  background-color: #202020;
  cursor: pointer;
}

@media (max-width: 40em) {
  #dragbar, #chattoggle {
    visibility: hidden;
    height: 0px;
    width: 0px;
  }

#chat {
  height:100%;
  width: 100vw;
  visibility: visible;
}
 
.flex-container {
  flex-direction: column;
}

#stream {
  aspect-ratio: 4/3;
  width: 100vw;
  height:auto;
}

}