html, body { height: 100%; margin: 0; }
body { background-color: #232323; }


/* topbar */

.topbar h1 { color: #666; display: inline-block; }
.btn {
	border-radius: 16px;
	color: #E5FF60;
	background-color: #000;
	padding: 10px;
	cursor: pointer;
	margin: 0 1em;
}
.btn:hover {
	color: #000;
	background-color: #E5FF60;
}



.whole-script textarea {
	width: 100%;
	height: 20em;
	background-color: transparent;
	color: white;
}


/* objects column */


.objects { width: 19%; float: left; font-family: sans-serif; font-size: .9em; }
.obj { margin: .3em; padding: .4em; cursor: pointer; color: #E5FF60; }
.obj.current { background-color: #E5FF60; color: #000; }
.state { margin: .3em; padding: .4em; color: #AD60FF; text-align: left;
   -webkit-animation: pulse 1s ease-in 1;
   animation: pulse 1s ease-in 1;
}

@keyframes pulse {
  from { background-color: transparent; }
  50% { background-color: #AD60FF; color: white; }
  to { background-color: transparent; }
}


/* editor column */

.editor { width: 40%; display: inline-block; }
.editor textarea { 
	width: 100%;
	height: 20em;
	background-color: #111; 
	color: #DDD; 
	padding: .5em; 
	box-sizing: border-box; 
}
.editor a { color: #F55; cursor: pointer; text-decoration: underline; }


/* game column */


.game { width: 40%; color: white; float: right; }
.game-box { padding: 0 .5em; }
.game a, .game a:visited { color: #F5F09D; text-decoration: underline; cursor: pointer; }
.game h1 { margin: 0; line-height: 1em; color: #E8FF74; }


/* small browser displays */

@media (max-width: 600px) {
	.objects { width: 100%; float: none; }
	.editor { width: 100%; float: none;  }
	.game { width: 100%; float: none; }
}