hydra/public/css/style.css

/*.styled-background {
  background-color: #f00;
}*/

html, body {
  background: #000;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  color: #fff;
  line-height: 1.4;
}

.camera-inputs{
  color: black;
  background: white;
}
textarea {
    background: #000;
}

canvas {
  /* background-color: #000; */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a:hover {
  /* opacity: 0.5; */
  background-color: white;
  color: black;
}

#hydra-ui {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#code {
    z-index: 5;
}

#hydra-canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -2;
}

#audio-canvas {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: transparent;
}

.CodeMirror {
  position: absolute;
  /* top: 20px;
  left: 20px; */
  z-index: 5;
  /* width: calc(100% - 20px);
  height: calc(100% - 20px); */
  background: transparent;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

.console {
  /* bottom: 0px;
  position: absolute;
  padding: 20px;
  padding-bottom: 5px;
  width: calc(100% - 40px); */
  z-index: 6;
  left: 0px;
  font-family: monospace;
  font-size: 14px;
  color: #aaa;
  pointer-events: none;
  padding: 15px;
  padding-bottom: 5px;
}

.log-error {
  color: #f00;
}

.styled-background {
  /* background-color: #f00 !important; */
  background: rgba(0, 255, 255, 0.5) !important;
  mix-blend-mode: difference;
}

#editor-container {
  width: 100%;
  height: 100%;
  /* position: fixed; */

  position: absolute;
  /* padding: 20px;  */
}