h1 {
	text-align: center;
	font-size: 3rem;
	padding: 0.5rem;
	margin: 1rem;

	z-index: 1;
}

body {
	/* Everything is centered... */
	display: grid;
	align-items: center;
	justify-items: center;

	/* ...within the entire viewport. */
	height: 100vh;
	margin: 0px;
	padding: 0px;
}

#two-column {
	display: grid;
	grid-template-columns: 0vw 100vw;
}

@media (min-width: 600px) {
	#two-column {
		display: grid;
		grid-template-columns: 0vw 100vw;

		animation: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) 3s slide_right;
		animation-fill-mode: forwards;
	}
}

@keyframes slide_right {
	0% {
		grid-template-columns: 0vw 100vw;
	}

	100% {
		grid-template-columns: min(266.283px, 50vw) min(266.283px, 50vw);
	}
}

#one-column {
	display: flex;
	flex-direction: column;

	z-index: 1;
}

nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
	gap: 0.5rem;

	/* Prevent pre elements from blocking clicks. */
	z-index: 1;
}

a {
	color: #eee;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5rem;
	/*border: 1px solid #0a0a0a;*/
	padding: 0.5rem 0.75rem;

	/* Color inversion on hover. */
	transition: background-color 0.5s ease-out, color 0.5s ease-out, filter 0.05s ease-out;

	/* Prevent pre elements from blocking clicks. */
	z-index: 1;
}

a:hover {
	background-color: #eee;
	color: #333;
}

/* When buttons overlay the home-tree, set an outline so it is still legible. */
@media (max-width: 450px) {
	a {
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}
}

a:active {
	filter: blur(10px) opacity(0%);
}

.disabled {
	text-decoration: line-through;
	color: #d00;
}

.disabled:hover {
	background-color: #500;
	color: #e00;
}

/* When buttons overlay the home-tree, set an outline so it is still legible. */
@media (max-width: 450px) {
	.disabled {
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}
}