/* https://gist.github.com/lukaszgrolik/5849599 */

@font-face {
  font-family: iosevka;
  font-weight: 400;
  src: url("Iosevka-Regular.ttc") format( "truetype" );
}

@font-face {
  font-family: corsair;
  font-weight: 400;
  src: url("./CorsairPE-Rg-CEFvsI5I.woff2") format( "woff2" );
}

:root {
  font-family: system-ui;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #444;
  color: #eee;
}

#app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.webgl {
}

.status {
  position: absolute;
  /* top: .5em; */
  /* left: .5em; */
  /* top: .5em; */
  /* right: .5em; */
  top: 1em;
  left: 1em;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  z-index: 1;
  text-align: right;
  font-family: monospace;
  font-size: 32px;
  pointer-events: none;
  color: white;
  white-space: pre;
  background: rgba(0 0 0 / .5);
}

.video-box {
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 0 4px black;
  image-rendering: pixelated;
  transform-origin: top right;

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scale: -1 1;
  }

  canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}