body {
  background-color: #eee8d5;
  max-width: 1200px;
  margin: 0px auto;
  padding: 5px;
  color: #073642;
}

h1,
p {
  font-family: sans-serif;
  padding: 0px 10px;
}

#content {
  width: 100%;
  padding: 0px;
  height: 460px;
}

#content::after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

#left,
#right,
textarea {
  width: 50%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-family: monospace;
}

#bottom {
  width: 100%;
  height: 400px;
  padding: 10px;
  box-sizing: border-box;
  font-family: monospace;
}

#left {
  float: left;
}

#right {
  float: right;
}

#fj-input,
#unify-output {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  background-color: #002b36;
  /* color: #93a1a1; */
  /* color: #cacaca; */
  color: #efefef;
  font-size: 14px;
}

#fj-input {
  resize: none;
  outline: none;
}

#ast-output {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid black;
}

.binding {
  font-family: monospace;
  white-space: pre;
}

.name::before {
  content: "val ";
  color: #839496;
}

.name::after {
  content: " : ";
  color: #839496;
}

.name,
.type {
  display: inline;
}

.name {
  color: #93a1a1;
  font-weight: bold;
}

.type {
  color: #859900;
  font-weight: bold;
  display: inline-block;
}

.code-line {
    !padding: 0;
    !margin: 0;
    text-indent: 1em;
}