html {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background-color: black;
}
.viewport, .canvas {
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.viewport {
  background-color: black;
}
.canvas {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slant {
  position: absolute;
  padding: 0;
  margin: 0;
  line-height: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
}
.status div,
.hud,
.speed div {
  font-weight: bold;
  font-family: monospace;
  color: white;
  text-align: center;
  font-size: 10pt;
}
.status div {
  position: absolute;
  top: 0;
  padding: 0.2em 0;
  white-space: nowrap;
  overflow: hidden;
}
.status {
  padding: 0;
  margin: 0;
}
.status .fps {
  right: 0;
  top: 1.2em;
  z-index: 30000;
}
.hud {
  position: absolute;
  padding: 0.2em 0.8em;
}
.speed {
  font-size: 14pt;
  left: 0;
  position: absolute;
  top: 2em;
  width: 10%;
  border: 1px solid white;
  padding: 0 2px;
}
.speed div {
  left: 2px;
  top: 0;
}
.terminal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50000;
  width: 98%;
  padding: 1%;
  background-color: black;
  color: #80A0FF;
  font-family: "VT-100", monospace;
  font-weight: bold;
  font-size: 100%;
}
.terminal p {
  padding: 0;
  margin: 0 0 1em 0;
}
.terminal .cursor {
  background-color: #80A0FF;
  width: 1em;
  height: 1em;
}
.terminal div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("monitor-effect.png") repeat;
}