@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

html {
	padding: 0;
	margin: 0;
	height: 100%;
}
body {
	background-image: url("1.gif");
	color: #fff;
	font: 20px sans-serif;
	padding: 0;
	margin: 0;
}
canvas {
	display: block;
	margin: auto;
}
button {
	display: block;
	width: 100%;
	max-width: 20em;
	margin: auto;
	border-radius: 20px;
	font-size: 20px;
	cursor: pointer;
	background-image: url("b.gif");
	color: #000;
}
button:disabled {
	cursor: default;
	background: #aaa;
	color: #555;
}
p {
	margin: 2em;
}

h1 {
	text-align: center;
}

.border {
	border: solid thin;
}

#menu {
	max-width: 25em;
	margin: auto;
}

#intro {
	max-width: 50em;
	margin: auto;
}

/*
In an ideal world we could do something like this:

#intro {
	counter-reset: i;
}

#intro > * {
	counter-increment: i;
	animation: 1s fadein both;
	animation-delay: calc(counter(i) * 1s);
}

But, alas, this isn't an ideal world.
*/

#intro > * {
	animation: 1s fadein both;
}

#intro > :nth-child(2) {
	animation-delay: 2s;
}

#intro > :nth-child(3) {
	animation-delay: 4s;
}

#intro > :nth-child(4) {
	animation-delay: 6s;
}

#intro > :nth-child(5) {
	animation-delay: 8s;
}

#intro > :nth-child(n+6) {
	animation-delay: 10s;
}