html {
	font-family: "Noto Sans", sans-serif;
}

body {
	background-color: rgba( 180, 180, 180, 1 );
	transition: 500ms all;
	overflow: hidden;
}

#history {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 3em;
	text-align: center;
	overflow: hidden;

	font-family: "Share Tech Mono", monospace;

	border: none;
	background-color: rgba( 255, 255, 255, 0.1 );
}

#char {
	position: relative;
	margin: 0 auto;

	color: #fff;
	font-size: 3000%;
	font-weight: bold;
	line-height: 1.7em;
	text-align: center;
	text-transform: uppercase;
}
	#char div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		animation-duration: 500ms;
		animation-fill-mode: forwards;
		text-shadow: 10px 10px 0 rgba( 0, 0, 0, 0.3 );
	}
		#char div.new {
			animation-name: slidein;
		}
		#char div.old {
			animation-name: slideout;
		}
		#char div span {
			font-family: "Merriweather", serif;
			text-transform: lowercase;
			margin-left: 0.1em;
		}

#counter {
	position: absolute;
	bottom: 2em;
	left: auto;

	width: 90%;
	text-align: center;
	overflow: hidden;

	font-family: "Share Tech Mono", monospace;
	color: #fff;
}


@keyframes slidein {
	0% { transform: translateX( 100% ); }
	100% { transform: translateX( 0 ); }
}
@keyframes slideout {
	0% { transform: translateX( 0 ); }
	100% { transform: translateX( -100% ); }
}