@consoleColor: #090;

*, *:after, *:before {
	box-sizing: inherit;
}
html, body, form, label {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	line-height: 1.2;
	box-sizing: border-box;
	background-color: #254b72;
	background-image: url('/assets/images/table.svg');
	background-size: 100% 100%;
}

html {
	font-size: 6vh;
	@media (max-width: 132.6029165vh) {
		font-size: 4.524787356vw;
	}
}

#compy {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 132.6029165vh;
	height: auto;
	@media (max-width: 132.6029165vh) {
		height: 75.4131226vw;
		width: 100%;
	}
	margin: auto auto 0;
	font-family: computerfontregular, monospace;
	color: @consoleColor;
	> #case {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: url('/assets/images/screen.svg');
		background-size: 100% 100%;
		>.knob {
			position: absolute;
			top: 87.3%;
			left: 8.5%;
			height: 7%;
			width: 4.7%;
			background: url('/assets/images/knob.svg');
			background-size: 100% 100%;
			cursor: pointer;
			&#knobup {
				left: 13%;
			}
		}
	}
	> #screen {
		position: absolute;
		top: 1em;
		bottom: 2.25em;
		left: 1.5em;
		right: 1.5em;
		overflow: hidden;
		word-break: break-all;
		z-index: 0;
		>#scanlines {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: -3em;
			animation: scroll 2s linear infinite;
			background: url('/assets/images/scanline.svg') black;
			background-size: 100% 15%;
			background-repeat: repeat-y;
			background-position: 50% 0%;
			transition: background-color 2s;
		}
	}
}
#scrollback {
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 100%;
	padding: 1.2em 1.6em 0.7em;
	font-size: 0.8em;
	background-color: black;
}
#commandLine, #history {
	white-space: pre-wrap;
}
#command {
	position: absolute;
	z-index: -2;
}
#cursor {
	position: absolute;
	display: inline-block;
	border-bottom: 0.1em solid;
	margin-bottom: -0.2em;
	height: 1em;
	width: 0.5em;
	animation: blink 0.5s linear infinite;
}
#selection {
	color: black;
	background-color: @consoleColor;
}
@keyframes blink {
	0% {
		border-bottom-width: 0.1em;
	}
	49% {
		border-bottom-width: 0.1em;
	}
	50% {
		border-bottom-width: 0.9em;
	}
	99% {
		border-bottom-width: 0.9em;
	}
	100% {
		border-bottom-width: 0.1em;
	}
}
@keyframes scroll {
	0% {
		transform: translate3d(0,0,0);
	}
	100% {
		transform: translate3d(0,-15%,0);
	}
}