@font-face {font-family: 'ubuntu mono'; src: url('../fonts/UbuntuMono-Regular.ttf'));}
@font-face {font-family: 'vt323'; src: url('../fonts/VT323-Regular.ttf');}

* 
{
	margin: 0; padding: 0; 
	user-select: none; 
	box-sizing: border-box;
	color: var(--console-color-green);
	/* font-family: 'vt323', monospace; */
	font-family: 'ubuntu mono', monospace;
}
:root 
{
	--console-font-size: 2rem;
	--console-full-width: 100vw;
	--console-red-width: 65vw;
	--console-nav-height: 40px;
	--console-trim-color: gainsboro;
	--console-trim-thickness: 5px;
	--console-display-color: black;
	--console-input-height: 60px;
	--console-spacing: 20px;
	--console-full-height: 100vh;
	--console-red-height: 75vh;
	--console-display-full-height: calc(var(--console-full-height) - var(--console-nav-height)  - var(--console-input-height) - calc(var(--console-trim-thickness) * 2));
	--console-display-red-height: calc(var(--console-display-full-height) - calc(var(--console-full-height) - var(--console-red-height)));
}
html {font-size: 100%;}

div#console.exit {border: none;}
div#console
{
	width: var(--console-full-width);
	margin: 0 auto;
	border: var(--console-trim-thickness) solid var(--console-trim-color);
	border-top: none;
	height: var(--console-full-height);
} 

div#console.reduced 
{
	width: var(--console-red-width);
	height: var(--console-red-height);
	margin-top: calc(var(--console-spacing) * 2);
}
div#console-nav, div#display, div.prompt-wrap, textarea#input
{
	width: 100%;
	display: block;
	background-color: var(--console-display-color);
}
div.prompt-wrap {position: relative;}
span.prompt 
{
	color: var(--console-color-green); 
	font-weight: bold; 
	position: absolute;
	font-size: var(--console-font-size); 
	top: 2px;
	left: calc(var(--console-spacing) / 2);
}
textarea#input
{
	height: var(--console-input-height);
	padding-left: calc(var(--console-spacing) * 2);
	padding-top: 3px;
	font-size: var(--console-font-size); 
	border-top: none;
	outline: none;
}
div#display
{
	height: var(--console-display-full-height);
	font-size: calc(var(--console-font-size) / 1.25); 
	padding: var(--console-spacing);
	overflow-x: hidden;
	overflow-y: auto;
}
div#display.reduced 
{
	height: var(--console-display-red-height);
}
div#console-nav > span:nth-child(2) > img {height: 20px;} 
div#console-nav > span:not(.console-icon):hover {background-color: silver;} 
div#console-nav > span:last-child:hover {background-color: firebrick;} 
div#console-nav > span 
{
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--console-spacing) calc(var(--console-spacing) / 1.5);
	transition: background-color 200ms;
} 
div#console-nav > span > img 
{
	height: 25px;
	display: block;
	cursor: pointer;
}
div#console-nav > span.console-icon > img 
{
	height: calc(var(--console-nav-height) / 1.25);
	margin: 0;
	cursor: default;
	display: block;
}
div#console-nav > span.console-icon
{
	display: block;
	position: absolute;
	padding: 0;
	left: 0;
	margin-top: 5px;
}
div#console-nav
{
	background-color: var(--console-trim-color);
	height: var(--console-nav-height);
	border: var(--console-trim-thickness) solid var(--console-trim-color);
	border-top: none;
	outline: var(--console-trim-thickness) solid var(--console-trim-color);
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	position: relative;
}