body {
	font-family: 'Times New Roman', sans-serif;
	margin: 0;
}
	
@media (prefers-color-scheme: dark) {
	body.adaptive {
		background-color: rgb(0, 0, 0);
	}
	
	.contact.adaptive {
		color: white;
	}

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

	.adaptive.notice {
		background-color: rgb(30, 30, 30);
		color: white;
	}

	.adaptive .button {
		background-color: rgb(30, 30, 30);
		border-color: rgb(200, 200, 200);
		color: white;
	}
}

.topbar {
	position: absolute;
	width: 100%;

	display: flex;
	flex-direction: row;

	justify-content: space-between;
	align-items: start;

	pointer-events: none;
}

.topbar > * {
	pointer-events: auto;
}

@media (max-width: 768px) {
	.topbar {
		flex-direction: column;
	}

	.alert {
		border-radius: 7px;
	}
}

.controls {
	display: flex;
	flex-direction: row;

	flex-shrink: 0;
	
	gap: 7px;
	padding: 7px 7px 0 7px;

	float: left;
}

.alert {
	display: flex;
	flex-direction: row;

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

	flex-shrink: 0;

	gap: 7px;
	padding: 7px;

	background-color: #FFFFFF;
	border-bottom-left-radius: 7px;
}

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

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

.speaker:hover {
	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;

	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: 0.5rem;
	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;
}

.notice {
	box-sizing: border-box;

	width: calc(100% - 28px);
	max-width: 420px;

	padding: 1.25rem;

	border: none;
	border-radius: 0.5rem;

	background-color: #FFFFFF;
	box-shadow: 0 0.5rem 28px rgba(0, 0, 0, 0.35);
}

.notice:not([open]) {
	display: none;
}

.notice::backdrop {
	background-color: rgba(0, 0, 0, 0.45);
}

.notice h2 {
	margin: 0 0 14px 0;
}

.notice p {
	margin: 0 0 14px 0;
	line-height: 1.4;
}

.notice form {
	display: flex;

	flex-direction: column-reverse;
	flex-wrap: wrap;

	gap: 0.5rem;
}

/* Stacked: fill the dialog. Overridden at the row breakpoint below. */
.notice form .button {
	width: 100%;
}

.notice img {
	position: absolute;

	bottom: 0;
	left: 1.25rem;

	width: 1rem;
}

@media screen and (min-width: 310px) {
	.notice img {
		width: 6rem;
	}

	.notice form {
		padding-left: 7rem;
	}
}

@media screen and (min-width: 400px) {
	.notice img {
		width: 3.5rem;
	}

	.notice form {
		flex-direction: row-reverse;
		padding-left: 3.5rem;
	}

	.notice form .button {
		width: 8rem;
	}
}

/* Helper classes. */
.sr-only {
	position: absolute;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	overflow: hidden;
	clip-path: inset(50%);

	white-space: nowrap;
	border: 0;
}

.small {
	font-size: 10px;
	line-height: 0;
}

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

.button {
	display: flex;
	box-sizing: border-box;

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

	font-family: inherit;
	font-size: 1rem;

	line-height: normal;

	text-decoration: none;
	text-align: center;

	padding: 0.5rem 1rem;

	border: 1px solid rgb(0, 0, 0);
	border-radius: 0.5rem;

	min-width: 8rem;
	width: 8rem;

	background-color: #FFFFFF;
}

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

.clicky {
	cursor: pointer;
}	

.hidden {
	display: none;
}

.text-red {
	color: red;
}

.text-green {
	color: green;
}

.text-blue {
	color: blue;
}