@import url('https://fonts.googleapis.com/css?family=Droid+Sans');

:root {
  --c_darkgray: #20252A;
  --c_darkgray_h: #323A42;
  --c_gray: #A9A9A9;
  --c_lightgray: #E5E5E5;
  --c_green: #10A84A;
  --c_green_h: #13C457;
  --c_yellow: #EFA51A;
  --c_lightblue: #A0D6FF;
  --c_white: #FFF;
  
  --f_std: 'Consolas', monospace;
  --f_code: 'Consolas', monospace;
  --f_heading: 'Droid Sans', sans-serif;
}

body {
  font-family: var(--f_std);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 0px;
}



/* GENERAL */

h1, h2, h3, h4, h5 {
  font-family: var(--f_heading);
}

button {
  font-size: 1em;
  font-family: var(--f_heading);
  border: none;
  border-radius: 1px;
  margin: 0.25em 0;
  padding: 0.25em 1em;
  cursor: pointer;
}
button:not([onclick]) {
  display: none;
}

textarea {
  font-family: var(--f_code);
  background: var(--c_white);
  color: var(--c_darkgray);
  resize: none;
  padding: 0.25em;
}



/* SIDEBAR */

#sidebar {
  color: var(--c_lightgray);
  background: var(--c_darkgray);
  height: calc(100vh - 4em);
  min-width: 20em;
  max-width: 40em;
  padding: 2em;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 0 1px var(--c_gray);
}

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5 {
  color: var(--c_yellow);
}

#sidebar pre {
  padding: 0.25em;
  border: 1px solid var(--c_yellow);
  font-family: var(--f_code);
  color: var(--c_darkgray);
  background: var(--c_white);
  overflow-x: auto;
  overflow-y: auto;
}

#sidebar code {
  padding: 0.25em 0.5em;
  margin: -0.25em 0;
  background: var(--c_darkgray_h);
  border-radius: 2px;
}

#sidebar a[href] {
  cursor: pointer;
  color: var(--c_lightblue);
  text-decoration: none;
}

#sidebar a[href]:hover {
  text-decoration: underline;
}

#sidebar hr {
  border: none;
  background: var(--c_yellow);
  height: 1px;
  margin: 2em 0 3em;
}

#sidebar button {
  color: var(--c_darkgray);
  background: var(--c_green);
}
#sidebar button:hover {
  background: var(--c_green_h);
}



/* PROGRAMMING AREA */

#programArea {
  background: var(--c_lightgray);
  height: calc(100vh - 2em);
  width: 100%;
  flex: 1 1 auto;
  padding: 1em;
  margin: 0px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
}

#programArea .textblock {
  margin: 1em 0;
}
#programArea .textblock :first-child {
  margin-top: 0;
}
#programArea .textblock :last-child {
  margin-bottom: 0;
}

#programArea h1,
#programArea h2,
#programArea h3,
#programArea h4,
#programArea h5 {
  color: var(--c_darkgray);
}

#programArea button {
  float: right;
  color: var(--c_green);
  background: var(--c_darkgray);
}
#programArea button:hover {
  background: var(--c_darkgray_h);
}

#input {
  font-family: var(--f_code);
  font-size: 1em;
  flex: 1 1 60%;
  max-height: 60vh;
  margin: 0;
  border: none;
  box-shadow: 0 0 0 1px var(--c_gray);
  position: relative;
}

#input pre {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--c_white);
  display: inline-block;
  color: var(--c_darkgray);
}

#input textarea {
  background: transparent;
  color: rgba(0, 0, 0, 0.1);
  caret-color: var(--c_darkgray);
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  outline: none;
  white-space: nowrap;
}

#input pre,
#input textarea {
  font-family: var(--f_code);
  font-size: 1em;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  margin: 0;
  padding: 3px;
  overflow: auto;
}

#output {
  height: calc(20em - 1em);
  width: calc(100% - 1em);
  margin: 0;
  flex: 1 1 20%;
}

.syntax {
  --c_comment: #c6c6c6;
  --c_escaped: #efa51a;
  --c_rule: #10a84a;
  --c_command: #ed143d;
  --c_call: #3b92c4;
}

.syntax.comment {
  color: var(--c_comment);
}

.syntax.escapeBackslash {
  color: var(--c_comment);
}

.syntax.ruleDefinition {
  color: var(--c_rule);
  text-shadow: 0.2px 0px 0px var(--c_rule);
}

.syntax.outcome {
  color: var(--c_rule);
  text-shadow: 0.2px 0px 0px var(--c_rule);
}

.syntax.outcomeWeight {
  color: var(--c_rule);
}

.syntax.specialChar {
  color: var(--c_escaped);
}

.syntax.command {
  color: var(--c_command);
}

.syntax.variableCall {
  color: var(--c_call);
}

.syntax.ruleCall {
  color: var(--c_call);
}