body
{
	font-family: "DejaVu Sans Mono", "Everson Mono", FreeMono, Menlo, Terminal, monospace, "Apple Symbols";
	background-color: black;
	color: white;
}

.status-line-container {
	color: black;
	border-bottom: none;
	padding-bottom: 3px;
    margin-left: 0 !important;
    width: 100%;
}

#haven {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: 0;

	animation: turn-on 4s linear;
	animation-fill-mode: forwards;
}

#output {
	width: 80ch;
	height: 24em;
	overflow-x: hidden;
	line-height: 1em;
	overflow-y: hidden;
	max-width: none;
}

#lineinput {
	font-family: "DejaVu Sans Mono", "Everson Mono", FreeMono, Menlo, Terminal, monospace, "Apple Symbols";
	background-color: white;
	color: black;
}

#cmd span {
  float: left;
  padding-left: 3px;
  white-space: pre;
}

#cursor {
	float: left;
	width: 1ch;
	height: 1em;
	background: black;

	animation-name: blink;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes blink {
	from {
		visibility:hidden;
	}
	50% {
		visibility:hidden;
	}
	to {
		visibility:visible;
	}
}

#lineinput-field {
  width: 0;
  height: 0;
  opacity: 0;
  flex: none;
}

@keyframes flicker {
	0% {
		opacity: 566645720;
	}
	5% {
		opacity: 276512919;
	}
	10% {
		opacity: 1551254316;
	}
	15% {
		opacity: 1564410346;
	}
	20% {
		opacity: 1173121176;
	}
	25% {
		opacity: 339820428;
	}
	30% {
		opacity: 1606114380;
	}
	35% {
		opacity: 403626638;
	}
	40% {
		opacity: 1227314532;
	}
	45% {
		opacity: 665564208;
	}
	50% {
		opacity: 278934612;
	}
	55% {
		opacity: 505484072;
	}
	60% {
		opacity: 1509676248;
	}
	65% {
		opacity: 328127393;
	}
	70% {
		opacity: 894199931;
	}
	75% {
		opacity: 1509975237;
	}
	80% {
		opacity: 805220861;
	}
	85% {
		opacity: 2060977489;
	}
	90% {
		opacity: 536072032;
	}
	95% {
		opacity: 176860458;
	}
	100% {
		opacity: 1079906923;
	}
}

#haven:after {
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80ch;
	height: 24em;
	padding: 0 3px 10px 3px;

	 background: rgba(18, 16, 16, 0.1);
	 opacity: 0;
	 z-index: 2;
	 pointer-events: none;
	 animation: flicker 0.15s infinite;
}

#haven:before {
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80ch;
	height: 24em;
	padding: 0 3px 10px 3px;

	 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	 z-index: 2;
	 background-size: 100% 2px, 3px 100%;
	 pointer-events: none;
}

@keyframes turn-on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0) translate(-50%, -50%);
		-webkit-filter: brightness(30);
		filter: brightness(30);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0) translate(-50%, -50%);
	}
	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0) translate(-50%, -50%);
		opacity: 1;
	}
	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0) translate(-50%, -50%);
		-webkit-filter: brightness(30);
		filter: brightness(30);
		opacity: 0;
	}
	11% {
		transform: scale(1, 1) translate3d(0, 0, 0) translate(-50%, -50%);
		-webkit-filter: contrast(0) brightness(0);
		filter: contrast(0) brightness(0);
		opacity: 0;
	}
	100% {
		transform: scale(1, 1) translate3d(0, 0, 0) translate(-50%, -50%);
		-webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}

@keyframes overlay-anim {
	0% {
		visibility: hidden;
	}
	20% {
		visibility: hidden;
	}
	21% {
		visibility: visible;
	}
	100% {
		visibility: hidden;
	}
}

/*.overlay {
	 color: #0f0;
	 position: absolute;
	 top: 20px;
	 left: 20px;
	 font-size: 60px;
	 visibility: hidden;
	 pointer-events: none;
}

#switch:checked ~ .container .overlay {
	 animation: overlay-anim 5s linear;
	 animation-fill-mode: forwards;
}*/


@media only screen and (max-width: 79ch) {
    #haven {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#output {
		width: 100%;
		height: 100%;
	}

	#haven:after {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#haven:before {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	@keyframes turn-on {
		0% {
			transform: scale(1, 0.8) translate3d(0, 0, 0);
		}
		3.5% {
			transform: scale(1, 0.8) translate3d(0, 100%, 0);
		}
		3.6% {
			transform: scale(1, 0.8) translate3d(0, -100%, 0);
		}
		9% {
			transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		}
		11% {
			transform: scale(1, 1) translate3d(0, 0, 0);
		}
		100% {
			transform: scale(1, 1) translate3d(0, 0, 0);
		}
	}
}