:root {
	--solarized-base03:	#002b36;
	--solarized-base02:	#073642;
	--solarized-base01:	#586e75;
	--solarized-base00:	#657b83;
	--solarized-base0:	#839496;
	--solarized-base1:	#93a1a1;
	--solarized-base2:	#eee8d5;
	--solarized-base3:	#fdf6e3;
	--solarized-yellow:	#b58900;
	--solarized-orange:	#cb4b16;
	--solarized-red:	  #dc322f;
	--solarized-magenta:#d33682;
	--solarized-violet:	#6c71c4;
	--solarized-blue:	  #268bd2;
	--solarized-cyan:	  #2aa198;
	--solarized-green:	#859900;
	--debug-border:     0px;
}

html, body {
  height: 100%
}

html, body, a.command-hint {
  margin: 0;
  background:  var(--solarized-base3);
  color: var(--solarized-base03);
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
}

a.command-hint {

}

main {
  margin: 4px;
  padding-top: 32px;
  height: calc(100% - 32px)
}

main > span {
  white-space: pre-wrap;
}

#cancel-button {
  display: none;
}

nav {
  padding: 4px 0px;
  display: flex;
  justify-content: flex-end;
  background: var(--solarized-base2);
  color: var(--solarized-base00);
  position: fixed;
  top: 0px;
  left 0px;
  width: 100%;
  height: 20px;
}

nav a {
  color: var(--solarized-base00);
  display: block;
  padding-right: 12px;
}

textarea {
  display: inline;
  border: 1px solid red;
  resize: none;
}

#symbol {
  opacity: 0
}

.m1 {
    font-weight: bold;
}

.m4 {
  text-decoration: underline;
}

.m8 {
  opacity: 0;
}

.m30 {
  color: black;
}

.m31 {
  color: var(--solarized-red);
}

.m32 {
  color: var(--solarized-green)
}

.m33 {
  color: var(--solarized-yellow)
}

.m34 {
  color: var(--solarized-blue)
}

.m35 {
  color: var(--solarized-magenta)
}

.m36 {
  color: var(--solarized-cyan)
}

.m37 {
  color: lightgray;
}

.m90 {
  color: darkgray
}

.m91 {
  color: lightred
}

.m92 {
  color: lightgreen
}

.m93 {
  color: lightyellow
}

.m94 {
  color: lightblue
}

.m95 {
  color: lightmagenta
}

.m96 {
  color: lightcyan
}

.m97 {
  color: white
}

.m40 {
  background: black
}

.m41 {
  background: var(--solarized-red)
}

.m42 {
  background: var(--solarized-green)
}

.m43 {
  background: var(--solarized-yellow)
}

.m44 {
  background: var(--solarized-blue)
}

.m45 {
  background: var(--solarized-magenta)
}

.m46 {
  background: var(--solarized-cyan)
}

.m47 {
  background: lightgray;
}

.m100 {
  background: darkgray
}

.m101 {
  background: darkred
}

.m102 {
  background: lightgreen
}

.m103 {
  background: lightyellow
}

.m104 {
  background: lightblue
}

.m105 {
  background: lightmagenta
}

.m106 {
  background: lightcyan
}

.m107 {
  background: white
}

@media (prefers-color-scheme: dark) {
  html, body, a.command-hint {
    background:  var(--solarized-base03);
    color: var(--solarized-base0);
  }

  nav {
    padding: 4px 0px;
    display: flex;
    justify-content: flex-end;
    background: var(--solarized-base02);
    color: var(--solarized-base00);
  }

  nav a {
    color: var(--solarized-base00);
    display: block;
    padding-right: 12px;
  }
}