::selection {
	background-color: rgb(45 90 80);
}

body {
	background: url("halftone-dots.png"), linear-gradient(to bottom right, rgb(30 30 30), rgb(30 35 40));

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh; /* "at least 100% view height" is intuitive */
	margin: 0; /* box-sizing: border-box; doesn't cover margins */

	color: white;
	font-family: "Vollkorn", sans-serif;
}

header {
	font-weight: 900; /* 900 is black, 800 extra-bold, 700 bold, 600 semibold, 500 medium, 400 reg */
	margin-bottom: 30px;
	margin-top: 30px;
	text-shadow: 5px 5px 10px black;
	text-align: center;
}

nav {
	a {
		overflow: hidden;
		position: relative; /* needed to make child div's position-absolute to be rel to parent */
		border: 1px solid rgb(255 255 255 / 0.7);

		div {
			padding: 5px 20px 7px 20px;
			backdrop-filter: blur(2px);
			background-color: rgb(255 255 255 / 0.1);
			position: absolute;
			bottom: 0;
			box-sizing: border-box;
			width: 100%;
			z-index: 100; /* transform scale actuall affects z-index */
			border-top: 3px solid rgb(255 255 255 / 0.1);

			color: rgb(255 255 255 / 0.9);
			font-weight: 500;
			font-size: 1.75em;
			text-shadow: 0 0 10px black;
		}
	}
}

footer {
	font-size: 1.1em;
	text-align: center;
	margin: 45px 15px 30px 15px;
}

.error-message {
	font-size: 3em;
	text-align: center;
	margin: 45px 15px 30px 15px;
}

@media (max-width: 1100px) { /* mobile or small laptop */
	header {
		font-size: 2.5em;
	}

	nav {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 20px;

		a {
			aspect-ratio: 650 / 200;
			max-width: 650px;
			width: 90vw;

			div { text-align: center; }
		}
	}

	footer {
		max-width: 600px;
	}
}
@media (max-width: 500px) {
	header { font-size: 1.8em; }
}
@media (min-width: 1101px) { /* if this is the default, outside of @media, then the other rule will need !imporant */
	header {
		font-size: 3em;
	}

	nav {
		display: grid;
		grid-template-columns: 520px 520px;
		grid-template-rows: 200px 200px;
		grid-gap: 10px;

		> a {
			&:nth-child(1) {
				border-radius: 5px 0 0 0;
			}
			&:nth-child(2) {
				border-radius: 0 5px 0 0;
				div { text-align: right; }
			}
			&:nth-child(3) {
				border-radius: 0 0 0 5px;
			}
			&:nth-child(4) {
				border-radius: 0 0 5px 0;
				div { text-align: right; }
			}
		}
	}

	footer {
		max-width: 800px;
	}
}

@media (prefers-reduced-motion: no-preference) { /* avoid cosmetic animations for people who opt out */
	img { transition-duration: 0.5s; }
	nav > a:hover > img {
		transform: scale(1.2);
	}
}