html {
  height: 100%;
  min-height: 403px;
  font-size: 12px;
  font-family:  Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
html *,
body * {
  margin: 0;
  padding: 0;
}
body {
  background: #000000;
  width: 100%;
  height: inherit;
  min-height: inherit;
}
canvas#clock {
  top: 0;
  right: 0;
  margin: 10px;
  display: block;
  overflow: hidden;
  position: absolute;
}
div.container {
  border: dashed 1px #000;
  margin: 0 auto;
  width: 810px;
  background: #000000;
  color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  overflow: hidden;
  position: relative;
}
div.container canvas#canvas {
  width: 810px;
  height: 201px;
  background: #000000;
  display: block;
  overflow: hidden;
  position: absolute;
  opacity: 0.3;
}
div.container pre {
  position: relative;
  padding-left: 2px;
  width: 670px;
  margin: 0 auto;
  font-family:  Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

div.coord-container {
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
}
div.coord-container p {
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 8px;
  font-family:  Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
}
/* all webkit */
/*div.container pre:not(*:root) { background-color: orangered; }*/
/* all webkit */
@supports (-webkit-appearance:none) {
  div.container pre {  }
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div.container pre { background-color: orangered; }
}
*/
/** Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  div.container pre { }
}

/** Microsoft Edge */
@supports (-ms-ime-align: auto) {
  div.container pre { }
}

/** Mozilla Firefox */
@-moz-document url-prefix() {
  div.container pre { width: 710px; }
}

/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
  div.container pre { }
}