style.css

.inputarea {
  font-family: monospace;
  font-size:1.225em;
  border: 0px thin black;
  border-radius: 5px;
  overflow: hidden;
  padding: 0.2em;
  background-color: #e0f0e0;
  white-space: nowrap;
  line-height: 1.225em;
  overflow-x: scroll;
  width:calc(100% - 3em);
}

.inputarea:hover {
  background-color: #f5f5f5;
  border: 1px solid black;
}

.inputarea:focus {
  background-color: #ffffbf;
  color: #1a1a1a;
  border: 1px solid black;
}

.good {
  background: #d0f0d0;
  border: 2px solid green;
  padding: 1em;
  border-radius: 1em;
}

.bad {
  background: #f0d0d0;
  border: 2px solid red;
  padding: 1em;
  border-radius: 1em;
}

.info {
  background: #d0d0f0;
  border: 2px solid blue;
  padding: 1em;
  border-radius: 1em;
}

.inputprompt {
  font-family: 1em monospace;
  overflow: hidden;
  outline: none;
  resize:none;
  background-color: #e0e0e0;
  white-space: nowrap;
  height:1em;
  width:calc(100% - 3em);
  line-height: 1em;
  border-radius: 5px;
  border: 0px solid #000000;
  box-shadow: 0 0 0 0;
  outline: none;
}

.inputprompt:hover {
	background-color: #f5f5f5
}

.inputprompt:focus {
	background-color: #ffffbf;
	color: #1A1A1A
}

div.prompt-entry {
    width: 8px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    border-right: none;
}

canvas {
  display: block;
  width: calc(100% - 1em);
  height: 100%;
}