:root {
	--color-background: 0,0,0;
	--color-contrast: 255,255,255;
}

html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(var(--color-background));
	color: rgba(var(--color-contrast));
	font-family: "Courier New", Courier, monospace;
}

a {
	text-decoration: none;
	color: inherit;
}

#play {
	display: inline-block;
	background-color: rgb(var(--color-contrast));
	color: rgba(var(--color-background));
	padding: 20px;
	font-size: 18px;
}

footer {
	position: fixed;
	box-sizing: border-box;
	padding: 0 20px;
	left: 0;
	bottom: 0;
}

@media (pointer: fine) {
	#play:not(.unsupported) {
		cursor: pointer;
	}
}

@media (hover: hover) {
	#play:not(.unsupported) {
		transition: 100ms background-color,100ms color;
		cursor: pointer;
	}

	#play:not(.unsupported):hover {
		background-color: rgba(var(--color-contrast),.15);
		color: rgb(var(--color-contrast));
	}

	a:hover {
		text-decoration: underline;
	}
}