* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  height: 100vh;
}

/* NOTE:
  netizen colors CSS variables are made available via netitor.js
  change theme by opening the Web Console and run: ne.theme = "monokai"
  check out full list of colors using ur browser's web inspector
*/
#nfo {
  padding: 5px;
  background-color: var(--netizen-text);
  border: 20px solid var(--netizen-background);
  font-family: sans-serif;
  color: var(--netizen-background);
  display: none;
}

#nfo > p { line-height: 19px; font-size: 14px; margin: 4px; }
#nfo a, .link {
  cursor: pointer;
  color: var(--netizen-tag);
  font-weight: bold;
  text-decoration: underline;
}
#nfo a:hover, .link:hover { color: var(--netizen-string); }
#nfo > p code {
  color: var(--netizen-text);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 14px;
  background-color: var(--netizen-background);
}

#editor {
  overflow-y: scroll;
  background: var(--netizen-background);
}

#output {
  grid-row: 1 / 3;
  grid-column: 2 / 2;
}

.error {
  background-color: rgb(100, 0, 0) !important;
  padding: 20px !important;
  color: var(--netizen-text) !important;
}

.error a { color: var(--netizen-number) !important; }