style.css

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
  color: rgba(0, 0, 0, 0.87);
 background: rgb(247,185,249);
background: rgb(247,185,249);
background: linear-gradient(266deg, rgba(247,185,249,0.8248763721137797) 0%, rgba(144,226,238,0.8871909121731268) 62%);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

#app {
  margin: 0 auto;
}

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
  color: rgb(129, 12, 119);
  background-color: rgb(106, 172, 248);
}

button {
  color: #ff86eb;
  background-color: rgb(104, 13, 116);
  padding: 0px 3px;
}

h4 {
  padding: 0px;
  margin: 8px;
}

textarea {
  background-color: #ff86eb;
  color: rgb(0, 0, 0);
}

.cm-editor {
  max-height: 900px;
  max-width: 700px;
  min-width: 700px;
}

#out > div:nth-child(1) {
  max-height: 160px;
}

.cm-tooltip-autocomplete.cm-tooltip.cm-tooltip-below {
  background-color: rgb(138, 205, 250)
}

.cm-tooltip-autocomplete.cm-tooltip.cm-tooltip-above {
  background-color: rgb(138, 205, 250)
}

#log {
  font-family: monospace;
  max-height: 200px;
  min-height: 200px;
  overflow: scroll;
  text-align: left;
  width: 512px;
  margin: auto;
  border: 1px solid #afafaf;
  padding: 5px;
}

#output {
  width: 256px;
  height: 240px;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

#results {
  min-height: 20px;
}

#doc {
  min-height: 20px;
}