body {
	margin: 0px;
	font-family: droid sans mono;
	background-color: #000;
	overflow: hidden;
	color: #aaa;
}

a, strong {
	color: #fff;
	font-weight: normal;
}

canvas {
	display: block;
}

#column {
	width: 500px;
	position: absolute;
	right: 0;
	top: 0;
	padding: .5em;
}

#column td {
	padding: 6px 0px;
}

#column td:first-child {
	color: #fff;
	font-variant: small-caps;
	font-size: 18px;
}

#column #movement {
	display: inline-block;
	vertical-align: middle;
	font-size: 80%;
	text-align: center;
}

#column #messages {
	margin-top: 1em;
	position: relative;
	overflow: hidden;
}

#column #messages > div {
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: top 1s linear;
	-moz-transition: top 1s linear;
	transition: top 1s ease-out;
}

#column #messages p {
	color: #fff;
	margin: 0.5em 0;
}

#column #messages:after {
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}


#intro ~ * {
	display: none;
}

#intro {
	text-align: center;
}

#intro h1 {
	font-family: fredericka the great;
	color: #ccc;
	font-size: 80px;
	font-weight: normal;
}

#intro #loading {
	margin: 4em 0 3em 0;
}

#intro.running div p {
	text-align: left;
	-webkit-animation: movement 8s linear infinite;
	-moz-animation: movement 8s linear infinite;
	animation: movement 8s linear infinite;
}

#intro div p:nth-child(1) {
	-webkit-animation-duration: 9s;
	-moz-animation-duration: 9s;
	animation-duration: 9s;
}

#intro div p:nth-child(3) {
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	animation-duration: 10s;
}

@-webkit-keyframes movement {
	0% { -webkit-transform: translate(0, 0); }
	100% { -webkit-transform: translate(100%, 0); }
}

@-moz-keyframes movement {
	0% { -moz-transform: translate(0, 0); }
	100% { -moz-transform: translate(100%, 0); }
}

@keyframes movement {
	0% { transform: translate(0, 0); }
	100% { transform: translate(100%, 0); }
}