:root {
  --container-width: 900px;
  --stream-container-width: 900px; /* 100% or 900px */
  --chat-height: 500px;
  --chat-width: 300px;
}

div {
  box-sizing: border-box;
}

body {
  margin: 0;
}


#header h1 {
  margin: 0;
  padding: 0;
}

#stream-container {
  min-height: var(--chat-height);
  width: var(--stream-container-width);
  max-width: 100%;
  margin: 0 auto;
}
#stream-embed-iframe {
  height: 100%;
  max-height: 100vh;
}
#stream-embed-wrapper {
  float: left;
  height: var(--chat-height);
  width: calc( 100% - var(--chat-width) );
}

#chat-embed-wrapper {
  float: right;
  height: var(--chat-height);
  width: var(--chat-width);
}

@media (max-width: 600px) {
  #stream-embed-wrapper {
    float: none;
    width: 100%;
  }
  #chat-embed-wrapper {
    float: none;
    width: 100%;
  }
}

.clear_both {
  clear: both;
}

#footer {
  color: #eee;
  text-align: center;
  font-weight: bold;

  width: var(--container-width);
  max-width: 100%;
  margin: 0 auto;

}
#footer a {
  color: #ccc;
}