* {
    font-family: sans-serif;
}

canvas {
    border: solid black 1px;
}

.controlbox {
    display: inline-block;
}

button, input {
    height: 30px;
}

#playground {
	/*background-color: yellow;*/
	display: flex;
}

#editor {
	/*background-color: aqua;*/
	width: 600px;
	float: left;
	min-height: match-parent;
	height: match-parent;
	max-height: match-parent;
	flex: 1;
	clear: both;		
	margin-left: 2%;
}

#display {
	/*background-color: blue;*/
	width: 600px;
}

#code_log {
	width: 100%;
	height: 75%;
	max-height: 477.6px;
	/*background-color: red;*/
	flex: 1;
	display: inline-block;
	overflow-y: scroll;
}

#code_input {
	/*background-color: coral;*/
	width: 100%;
	height: 25%;
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

#codebox {
	width: auto%;
	resize: none;
	flex: 1;
}

#evalButton {
	width: 100%;
	height: 25px;
}

.error_log {
	background-color: BlueViolet;
}

.ok_log {
	background-color: Chartreuse;
}