:root {
  --terminal-color-0: rgb(30,34,41);
  --terminal-color-1: rgb(237,21,21);
  --terminal-color-2: rgb(68,133,58);
  --terminal-color-3: rgb(246,116,192);
  --terminal-color-4: rgb(29,153,243);
  --terminal-color-5: rgb(155,89,182);
  --terminal-color-6: rgb(=26,188,156);
  --terminal-color-7: rgb(252,252,252);

  --terminal-color-0-intense: rgb(127,140,141);
  --terminal-color-1-intense: rgb(192,57,43);
  --terminal-color-2-intense: rgb(50,100,44);
  --terminal-color-3-intense: rgb(253,188,75);
  --terminal-color-4-intense: rgb(61,174,233);
  --terminal-color-5-intense: rgb(142,68,173);
  --terminal-color-6-intense: rgb(22,160,133);
  --terminal-color-7-intense: rgb(255,255,255);

  --terminal-color-default: rgb(23,168,139);
  --terminal-color-background: rgb(30,34,41);
}

.console_output {
  border: solid grey;
  background-color: var(--terminal-color-background);
  width: min(95%, 1024px);
  height: 30em;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
}

.console_output p {
  margin: 0;
  padding: 0;
  font-family: monospace;
  white-space: pre-wrap;
  color: var(--terminal-color-default);
  display: inline-block;
}

.user_input::before {
  content: '$ ';
  color: var(--terminal-color-7-intense);
}

.console_command {
  width: calc(min(95%, 1024px) - 8em);
}

.console_submit {
  width: 6em;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-shadow: 0;
}

.console_help {
  width: 2em;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-shadow: 0;
}

.TERM_FOREGROUND_0 {
  color: var(--terminal-color-0);
}
.TERM_FOREGROUND_1 {
  color: var(--terminal-color-1);
}
.TERM_FOREGROUND_2 {
  color: var(--terminal-color-2);
}
.TERM_FOREGROUND_3 {
  color: var(--terminal-color-3);
}
.TERM_FOREGROUND_4 {
  color: var(--terminal-color-4);
}
.TERM_FOREGROUND_5 {
  color: var(--terminal-color-5);
}
.TERM_FOREGROUND_6 {
  color: var(--terminal-color-6);
}
.TERM_FOREGROUND_7 {
  color: var(--terminal-color-7);
}

.TERM_FOREGROUND_0_INTENSE {
  color: var(--terminal-color-0-intense);
}
.TERM_FOREGROUND_1_INTENSE {
  color: var(--terminal-color-1-intense);
}
.TERM_FOREGROUND_2_INTENSE {
  color: var(--terminal-color-2-intense);
}
.TERM_FOREGROUND_3_INTENSE {
  color: var(--terminal-color-3-intense);
}
.TERM_FOREGROUND_4_INTENSE {
  color: var(--terminal-color-4-intense);
}
.TERM_FOREGROUND_5_INTENSE {
  color: var(--terminal-color-5-intense);
}
.TERM_FOREGROUND_6_INTENSE {
  color: var(--terminal-color-6-intense);
}
.TERM_FOREGROUND_7_INTENSE {
  color: var(--terminal-color-7-intense);
}

.TERM_FOREGROUND_BOLD {
  font-weight: bold;
}