html, body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
body {
	background-color: var(--onedark-bg);
	padding: 2em;
	font-family: "Ubuntu";
}


span.line {
	display: block;
	color: var(--onedark-white);
}
span.line.stderr-debug { color: var(--onedark-green); }
span.line.stderr-info { color: var(--onedark-blue); }
span.line.stderr-warning { color: var(--onedark-orange); }
span.line.stderr-error { color: var(--onedark-red); }
span.line.stderr-javascript { color: var(--onedark-purple); }





div.collection {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

div.collection div.item {
	flex-basis: 50%;
	flex: 20rem;
	
	height: calc(100vh - 4em);
	max-width: 100%;
	
	position: relative;
	overflow: hidden;
	
	display: flex;
	flex-flow: column nowrap;
	
	margin: 0rem;
	padding: 0rem;
}

@media only screen and (max-width: 1200px) {
	html, body {
		overflow-y: visible;
	}
	div.collection div.item {
		flex-basis: 100%;
		height: auto;
		min-height: 8rem;
	}
	#console {
		min-height: 8rem;
	}
}










.button {
	align-items: center;
	
	padding: 1rem 1.5rem;
	width: fit-content;
	
	color: var(--onedark-white);
	
	background-color: var(--onedark-bg-light);
}

.button:not(.one-line) {
	display: inline-flex;
	margin: 1rem 1rem 0rem 0rem;
}
.button.one-line {
	display: flex;
	margin: 0rem 0rem 1rem 0rem;
}

.button:hover {
	cursor: pointer;
	background-color: var(--onedark-gray-dark-dark);
}

.button .text {
	display: inline-flex;
	flex-flow: column;
	margin-left: 1rem;
}
.button img.icon {
	height: 1.5rem;
}
.button .extra {
	color: var(--onedark-gray);
}















div.collection div.item.editor > div.prism-live {
	height: 100%;
}






div.collection div.item.console div.controls {
	padding-bottom: 1rem;
}
#console {
	margin: 0px;
	padding: 1rem;
	overflow: auto;
	font-size: 1rem;
	
	height: 100%;
	
	background-color: var(--onedark-bg-light);
}