.banner {
  text-align: center;
  margin: 0.5em;
}

.border {
  border: 1px solid #434343;
}

.red {
  color: #ff8280;
  fill: #ff8280;
}

#stream {
  height: calc(100vw * 9 / 16);
}

#chat {
  height: calc(100vh - (100vw * 9 / 16 + 20em));
  min-height: 12em;
}

#noscript {
  text-align: center;
  margin-top: calc(-100vw * 9 / 16 / 2 - 1ex);
  position: relative;
}

iframe.stream-info {
  min-height: 7em;
  height: 7em;
}

#source {
    display: none;
}

@media screen and (min-width:48em) {
  #chat {
    height: calc(100vh - 1px - 10em);
  }
  #stream {
    height: calc(100vw * 2 / 3 * 9 / 16); /* 16:9 video taking up 2/3 of the page horizontally */
  }
  #noscript {
    margin-top: calc(-100vw * 2 / 3 * 9 / 16 / 2 - 1ex);
  }
  iframe.stream-info {
    height: calc(100vh - 100vw * 2 / 3 * 9 / 16 - 2px);
  }
  #source {
    display: revert;
  }
}

iframe {
  border:0;
  width: 100%;
}

.dark-theme a:hover,
.dark-theme a:active {
  color: #00b6f0;
}

.dark-theme a {
  color: #a0a0a0;
  text-decoration: none;
}

body.dark-theme {
  background-color: #232323;
  color: #f0f0f0;
}

.dark-theme input,
.dark-theme select,
.dark-theme textarea {
  color: #232323;
}

/* workaround to make some custom user css work
e.g. https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/usercss/2154.user.css */
div[class="vjs-text-track-display"] {
  display: none;
}