/* The page draws two things: the video, and the static loading screen that
   covers it until the first frame. Colours and text live here and in
   index.html, listed under Tweak points in page/README.md. */
html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#stream {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #101014;
  color: #e8e8f0;
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 1rem;
}

#loading[hidden] {
  display: none;
}

#loading .brand {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}