html {
	height: 100%;
}

body {
	background: #002B36;
	color: #839496;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

#tools {
	background: #00212b;
	padding: 8px;
	font-size: 14px;
	flex-shrink: 0;
}

#tools .function {
	display: inline-block;
	padding: 4px 8px;
	margin: 0 4px;
	color: #839496;
	border-radius: 3px;
	text-decoration: none;
}

#tools .function.enabled {
	cursor: pointer;
	color: #93a1a1;
}

#tools .function.enabled:hover {
	background: #073642;
	color: #eee8d5;
}

#content {
	flex-grow: 1;
	padding: 1em;
	overflow-y: auto;
}

textarea {
	background: transparent;
	border: 0;
	color: #eee8d5;
	font-family: monospace;
	font-size: 1em;
	height: 100%;
	outline: none;
	padding: 0;
	resize: none;
	width: 100%;
}

#code {
	border: 0;
	font-size: 1em;
	margin: 0;
	outline: none;
	padding: 0 0 4em 0;
	white-space: pre-wrap;
	word-wrap: break-word;
}

#code code {
	background: transparent !important;
	padding: 0;
}

pre {
	counter-reset: line-numbering;
}

pre .line::before {
	color: #4c6a71;
	content: counter(line-numbering);
	counter-increment: line-numbering;
	display: inline-block;
	margin-right: 1em;
	text-align: right;
	width: 1.5em !important;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}