* {
	padding: 0;
	margin: 0;
}
html, body {
	height: 100%;
	overflow: hidden;
}
body {
	display: flex; /* fix chrome pageload transition bug */
	position: relative;
	background-color: #FFF;
	color: #000;
	font: 2.0835vw/1.145 "Courier New", monospace; /*  */
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#container {
	position: relative;
	margin: 0 auto;
	width: 100vw;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out;
}
#container.show-ui {
	transform: scale(0.666666);
}
#canvas, .canvas, #cursor{
	_min-height: 320px;
}
#canvas, .canvas, #cursor, #timeline {
	font: inherit;
	white-space: pre;
	overflow: hidden;
	width: 100%;
}
p {
	font-size: 10px;
	line-height: 1;
}
#cursor {
	white-space: pre;
	position: absolute;
	z-index: 2;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#cursor.hidden {
	visibility: hidden;
}

#timeline {
	position: fixed;
	bottom: 0;
	width: auto;
	z-index: 1;
	color: #55B3EA;
}

#toggler {
	padding: 0;
	margin: 0;
	border: 0;
	position: fixed;
	bottom: 0;
	right: 0;
	color: #55B3EA;
	background-color: transparent;
	white-space: pre;
	font: inherit;
	z-index: 1000;
}
#toggler:after {
	animation: toggle .2s linear normal forwards;
	--block: "░░";
	content: "\a0\a0\a0\a0\a0\a0\a0\a0\A\a0\a0"var(--block)var(--block)"\a0\a0\A\a0\a0"var(--block)"\a0\a0\a0\a0\A\a0\a0\a0\a0\a0\a0\a0\a0";
	content: var(--block)var(--block)"\A"var(--block)"\a0\a0";
}

#toggler:hover:after, #toggler:active:after {
	animation-direction: reverse;
}

@keyframes toggle {
	0% {
		--block: "██";
	}
	33.333333% {
		--block: "▓▓";
	}
	66.666666% {
		--block: "▒▒";
	}
	100% {
		--block: "░░";
	}
}