body {
  font-size: 1em;
  background-color: #1e1e1e;
  font-family: monospace;
  -webkit-text-size-adjust: none;
}

#code-area,
#hint-area,
#background {
  font-family: monospace;
  height: 90ch;
  top: 5ch;
  left: 2ch;
  resize: none;
  box-sizing: border-box;
  position: absolute;
  tab-size: 4;
  border: 0;
  border-radius: 0;
}

#background {
  width: 80ch;
  background-color: #252526;
  pointer-events: none;
}

#hint-area {
  width: 120ch;
  background-color: transparent;
  color: hotpink;
  pointer-events: none;
}

#code-area {
  width: 120ch;
  background-color: transparent;
  color: #dcdcdc;
  caret-color: #dcdcdc;
}

#code-area:focus {
  outline: none;
}

#top-row {
  font-family: monospace;
  white-space: nowrap;
  color: #a9a9a9;
  position: absolute;
  display: block;
  top: 1ch;
  left: 2ch;
}

#language {
  font-family: monospace;
  background-color: #1e1e1e;
  color: #a9a9a9;
  border: none;
  outline: none;
  font-size: 1em;
  border-radius: 0;
}

#github-link {
  color: #a9a9a9;
}

#loading-bar {
  position: absolute;
  top: 3ch;
  left: 2ch;
}

#loading-progress {
  appearance: none;
  width: 82ch;
  height: 1ch;
}

#loading-progress::-webkit-progress-bar {
  background-color: #252526;
}

progress::-webkit-progress-value {
  background-color: hotpink;
}