.banner {
  text-align: center;
  margin: 0 0.5em 0.5em 0.5em;
  padding: 0.5em 0;
  border-bottom:1px solid gray;
  font-size: 125%;
}
.hue-rotate {
  filter: hue-rotate(144deg);
}

#stream {
  position: relative;
  padding-bottom: calc(100% * 9 / 16);
}
#stream > video, #videojs, #offline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#offline > div:last-child {
  position: absolute;
  top: calc(50% - 0.607em);
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 400%;
  text-shadow: 0 0 8px #000,0 0 128px #000;
}
#offline > div:first-child {
  background-image: url("/static/noise.png");
  height: 100%;
  width: 100%;
  animation: noise-x 7s steps(14) infinite, noise-y 11s linear infinite;
  background-size: cover;
  filter: blur(2px) brightness(40%) contrast(70%);
}
@keyframes noise-x {
  0%   {background-position-x:   0%;}
  100% {background-position-x: 100%;}
}
@keyframes noise-y {
  0%   {background-position-y:   0%;}
  100% {background-position-y: 100%;}
}

#chat-border {
  border-top: 1px solid #434343;
}
#stream-info-container {
  border-top: 1px solid #434343;
}

#chat-window iframe {
  height: calc(100vh - (100vw * 9 / 16 + 20.5em));
  margin-bottom: 0.5em;
  min-height: 12em;
}
#chat {
  transform: scaleY(-1);
}
#noscript {
  text-align: center;
  margin-top: calc(-100vw * 9 / 16 / 2 - 1ex);
  position: relative;
}
#stream-info {
  min-height: 7em;
  height: 7em;
}
#source {
    display: none;
}
.users-logo {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
svg.users-logo {
    fill: white;
}
.chat-banner-left {
    float: left;
    width: 1em;
    margin-top: 2px; /* wasn't centred vertically for some reason */
}
.users-logo:hover {
    border-radius: 6px;
    background-color: #2f2f2f;
    padding: 4px;
    margin: -4px;
}
#users-toggle:checked + .banner .users-logo {
    border-radius: 6px;
    background-color: #3f3f3f;
    padding: 4px;
    margin: -4px;
}
#users-toggle:checked + .banner svg.users-logo {
    fill: #0078e7;
}
#users-toggle:checked + .banner .users-logo img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(5359%) hue-rotate(195deg) brightness(97%) contrast(103%); /* thanks to https://codepen.io/sosuke/pen/Pjoqqp */
}
form[target="users"] {
    display: none;
}
#users-toggle:checked + .banner form[target="chat"] button {
    filter: revert;
}
@media screen and (min-width:48em) {
  #chat-border {
    border-top: none;
    border-left: 1px solid #434343;
  }
  #chat-window iframe {
    height: calc(100vh - 1px - 10.5em);
  }
  #noscript {
    margin-top: calc(-100vw * 2 / 3 * 9 / 16 / 2 - 1ex);
  }
  #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;
}

/* for text-based browsers */
.textonly {
  display: none
}