*,
html,
body {
	padding: 0;
	margin: 0;
	outline: 0;
	margin: 0;
}

body {
	height: 100%;
	overflow: hidden;
	background-color: #2f3638;
}

#editor {
	box-sizing: border-box;
	padding: 1rem;
	font-size: 1.5rem;
	height: calc(100dvh - 2rem);
	width: 100dvw;
	outline: none;
	border: none;
	padding: none;
	margin: none;
	position: absolute;
	inset: 0;
	font-family: monospace;
	color: transparent;
	caret-color: white;
	z-index: 1;
	background-color: transparent;
	tab-size: 4;
	color: transparent;
	resize: none;
}
#editor::selection {
	color: white;
	background-color: rgb(100, 100, 219);
}

#display {
	box-sizing: border-box;
	padding: 1rem;
	color: white;
	font-size: 1.5rem;
	height: calc(100dvh - 2rem);
	width: 100dvw;
	position: absolute;
	outline: none;
	border: none;
	padding: none;
	margin: none;
	user-select: none;
	pointer-events: none;
	position: absolute;
	inset: 0;
	font-family: monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
	z-index: 0;
	tab-size: 4;
	color: white;
}

#run {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2rem;
	background-color: #333;
	border: none;
	color: white;
	font-family: monospace;
	font-size: 1.15rem;
	cursor: pointer;
}

.keybind {
	height: 0.5em;
	width: 0.5em;
	font-size: 0.5em;
	background-color: gray;
	padding: 0.7em;
	border-radius: 0.2rem;
}

.hidden {
	display: none !important;
}

#logs {
	height: calc(100dvh - 2rem) !important;
	z-index: 2;
}

#clear_logs {
	position: absolute;
	top: 1rem;
	right: 1rem;
	height: 3rem;
	width: 3rem;
	font-size: 2rem;
	background-color: transparent;
	border: none;
	color: rgb(181, 32, 32);
	z-index: 2;
	cursor: pointer;
}

#disclaimer {
	position: absolute;
	bottom: 5rem;
	right: -42.2rem;
	display: flex;
	color: white;
	background-color: rgb(42, 42, 42);
	border-radius: 5px;
	transition: right 250ms;
	font-family: monospace;
	z-index: 2;
}
#disclaimer > div {
	box-sizing: border-box;
	padding: 1rem;
}
#open_disclaimer {
	background: #181818;
	height: 5rem;
	width: 1.25rem;
	cursor: pointer;
	border-radius: 5px 0 0 5px;
}
#open_disclaimer::before {
	content: '<';
	color: white;
	font-size: large;
}

#disclaimer.open {
	right: 1rem;
}
#disclaimer.open > #open_disclaimer::before {
	content: '>';
}

nothing {
	color: #7e96ed;
}