style.css

* {
  transition: all 0.1s ease;
}

.numberOrBoolean {
  color: #c3c321;
}
.string {
  color: #75b927;
}
.error {
  /* color: rgb(255, 0, 0); */
  color: #c22644;
}
.space {
  opacity: 0;
}
.undefined {
  color: #5f5f5e;
}
.null {
  font-weight: bolder;
}
.RegExp {
  color: #c22644;
}
.function {
  color: #55acbb;
}

#input {
  --padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
}
#input textarea {
  background-color: rgb(50, 51, 44);
  border-width: 0;
  padding: var(--padding);
  width: 100%;
  display: inline-block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  overflow: scroll;
}
#output {
  background-color: rgb(46, 47, 44);
  overflow: scroll;
  padding: 0;
}
#output,
#input {
  margin-top: 5px;
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 16px;
  color: whitesmoke;
  height: calc(100% - 35px);
  line-height: 20px;
}
#output > div {
  border-bottom: 1px rgb(70, 70, 70) solid;
  padding: 8px 10px;
}

body,
button {
  color: whitesmoke;
  font-size: 16px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
button {
  background-color: rgb(0, 95, 149);
  border-width: 0;
  border-radius: 2px;
  float: right;
}
body {
  background-color: #272822;
}
.panel {
  width: 49%;
  display: inline-block;
  height: 100%;
}
#outPanel {
  float: right;
}
@media screen and (max-width: 550px) {
  .panel {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: 50%;
  }
}