body {
	font-family: 'Times New Roman', sans-serif;
	margin: 0;
}
	
/* Uncomment for adaptive dark mode on payload pages.
@media (prefers-color-scheme: dark) {
	body.adaptive {
		background-color: rgb(0, 0, 0);
	}

	.adaptive .link {
		color: rgb(43, 124, 252);
	}
	
	.adaptive .link:visited {
		color: rgb(207, 133, 229);
	}
	
	.adaptive .link:hover {
		color: rgb(255, 55, 95);
	}
}
*/

.controls {
	display: flex;
	flex-direction: row;
	
	gap: 7px;
	padding: 7px;

	float: left;
}

.links {	
	-webkit-user-select: none;
	user-select: none;
	
	opacity: 0.85;
}

.speaker {
	-webkit-user-select: none;
	user-select: none;
}

.speaker:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.link:hover {
	font-weight: bold;
}

.idiot {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	z-index: -69;
	
	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;
}

/* Could have used a background image, but I chose not to for better performance. */
.idiot > svg {
	position: fixed;
	
	top: 50%;
	left: 50%;
	
	width: 100%;
	height: 100%;

	-webkit-user-select: none;
	user-select: none;

	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@keyframes key-black {
	from, to {
		visibility: visible;
	}

	50% {
		visibility: hidden;
	}
}

@keyframes key-white {
	from, to {
		visibility: hidden;
	}

	50% {
		visibility: visible;
	}
}

.frame-black {
	/* 10 frames @ 15fps on 60fps = 666ms */
	animation: key-black step-end 666ms infinite;
}

.frame-white {
	/* 10 frames @ 15fps on 60fps = 666ms */
	animation: key-white step-end 666ms infinite;
}

.contact {
	position: fixed;
	
	bottom: 0;
	right: 0;
	
	padding: 7px;
	opacity: 0.25;
	
	text-align: right;
	
	-webkit-user-select: none;
	user-select: none;
	
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}

.contact:hover {
	opacity: 0.85;
}

/* Helper classes. */
.small {
	font-size: 10px;
	line-height: 0;
}

.shadowy {
	text-shadow: 1px 1px 2px white;
}

.clicky {
	cursor: pointer;
}	

.hidden {
	display: none;
}