body {
	background-color: #eee;
}

#name {
	position: fixed;
	top: 3em;
	left: 50%;
	transform: translate(-50%, 0);

	font-family: "Merriweather";
	font-size: 200%;
}

#dot {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	height: 500px;
	width: 500px;

	border-radius: 50%;

	transition: 500ms all;
}

.keltainen { background-color: #fc0; }
.musta { background-color: #000; }
.oranssi { background-color: #f60; }
.punainen { background-color: #d40000; }
.ruskea { background-color: #917c6f; }
.sininen { background-color: #0055d4; }
.valkoinen { background-color: #fff; }
.vihreä { background-color: #71c837; }
.violetti { background-color: #7f2aff; }


@media screen and (max-height: 600px) {
	#dot {
		height: 425px;
		width: 425px;
	}
	#name {
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}
	#dot.musta #name,
	#dot.punainen #name,
	#dot.ruskea #name,
	#dot.sininen #name,
	#dot.violetti #name {
		color: #fff;
	}
}