html, body {
  padding: 0;
  margin: 0;
  overflow: auto;
  background-color: #f7df1e;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
label {
  white-space: nowrap;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
}
legend {
  font-weight: bold;
  margin-bottom: 5px;
}
body {
  font-family: sans-serif;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}
textarea {
  font-family: monospace;
  display: block;
  flex-grow: 1;
  border: 1px solid black;
}
.CodeMirror {
  flex-grow: 1;
  border: 1px solid black;
}
textarea:disabled {
  border: 1px solid black;
  color: black;
}

#input-section, #output-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

#output {
  flex-grow: 1;
  background-color: white;
  border: 1px solid black;
  font-family: monospace;
  white-space: pre-wrap;
}
#output > div {
  padding-left: 0.3em;
}

[class*="log"] {
  border-bottom: 1px solid black;
}

.log-warn {
  background-color: yellow;
}

.log-debug {}

.log-error {
  background-color: #FF000070;
}


#features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
label {
  margin-right: 1ex;
  margin-bottom: 5px;
}
#github {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 149px;
  height: 149px;
  background-image: url('./src/github_ribbon.png');
}
@media (min-width: 800px) {
  html, body {
    height: 100%;
  }
  main {
    flex-direction: row;
  }
  main > *:not(:first-child) {
    margin-left: 10px;
  }
  #features {
    flex-wrap: wrap;
  }
  #input-section, #output-section {
    max-width: 50vw;
  }
  #output {
    min-height: 200px;
  }
}