p { margin-bottom: 20px; }

.codepen {
	padding: 20px 0;
	margin: 0 auto;
	text-align: center; 
}

.viewer {
	width: 100%;
	border: 1px solid #ddd;
	height: 440px;
	display: inline-block;
	background-color: white;
}

.editor {
    width: 100%;
	border: 1px solid #ddd;
	height: 440px;
	display: inline-block;
	background-color: white;
	text-align: left; 
	font-size: 1vw;
}

.output {
	width: 100%;
	padding-left: 1.15%;
	padding-right: 1.15%;
	padding-top: 0.45%;
	padding-bottom: 0.45%;
	text-align: left;
	font-size: 25px;
	color: white;
	font-family: neuronbold;
	display: inline-block;
	border: 1px solid #ddd;
	background-color: white;
	transition: background-color 1s;
	letter-spacing: 0;
}

.error {
	background-color: #D49090;
}

.compile {
	background-color: #81BC00;
}

.slate{
	background-color: rgba(1, 1, 1, 0.1);
	border-radius: 2vw;
	margin: 0 auto;
	padding: 2vw;
	padding-top: 0.5vw;
	width: 83%;
	font-size: 1.25vw;
	color: #00394D;
	font-family: monospace;
}

.viewer canvas {
	height: 100%;
	width: 100%;
}

code { 
	font-family: monospace; 
	background-color: #ddd; 
	display: block; 
	padding: 20px;
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 100;
	color: black;
}

arg {
	color: #164;
}

str {
	color: #A11;
}

comment {
	color: #A50;
}

keyword {
	color: #708;
}

func {
	color: blue;
}

help {
	margin: 0;
	font-weight: 800;
	font-size: 2vw;
	color: #00394D;
	font-family: monospace;
}

/* AIE CSS
----------------------------------------------*/

.grey-box {
    background-color: #fff;
    color: black;
    display: block;
    font-family: monospace;
    font-size: 16px;
    font-weight: 100;
    margin: 0 0 20px;
    padding: 20px;
	border-radius: 3px;
	border: 2px solid #00afd7;
}
.grey-box p {
    font-family: monospace;
	margin-bottom: 10px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}
.purple {
	color: #708;
}
.red {
	color: #a11;
}
.blue {
	color: blue;
}
.orange {
	color: #a50;
}
.green {
	color: #164;
}