@font-face {
  font-family: 'c64';
  src: url("fonts/c64.eot");
  src: url("fonts/c64.eot?#iefix") format("embedded-opentype"), url("fonts/c64.woff2") format("woff2"), url("fonts/c64.woff") format("woff"), url("fonts/c64.ttf") format("truetype"), url("fonts/c64.otf") format("opentype");
}

* {	
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.d-none {
	display: none !important;
}

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

:not(input) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

textarea:focus, input:focus{
    outline: none;
}

html, body {
	height: 100%;
	touch-action: none;
    cursor: default;
    overflow: hidden;
	font-family: 'c64', 'Courier New', monospace;
	font-size: 2.24vw;
	line-height: 1;
}

#bg {
	display: flex;
	justify-content: center;
	background: #718cd8;
	color: #718cd8;
	height: 100%;
}

#fg {
	width: 90%;
	width: 40rem;
	width: 40ch;
	background: #223ab3;
	margin: 4% 0;
	overflow: hidden;
}

/*#cmd {
	overflow: hidden;
}*/

.line {
	min-height: 1rem;
	white-space: pre-wrap;
    word-wrap: break-word;
}

#input {
	white-space: pre-wrap;
    word-wrap: break-word;
}

#caret {
	display: inline-block;
	vertical-align: bottom;
	width: 1rem;
	height: 1rem;
	background: #718cd8;
}

input {
	position: fixed;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	border: 0;
}