/**
 * "Page not found" page, rendered by index.php for unknown URLs.
 */

/* The site sets main { min-height: 3000px } for its long pages. This one is
   short, so opt out rather than trail a screen and a half of empty page. */
body:has(#not-found) main {
	min-height: auto;
}

#not-found {
	display: block;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto 100px;
	font-family: Poppins;
}

#not-found .not-found-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 100px 64px;
	text-align: center;
}

#not-found .error-code {
	font-size: 120px;
	line-height: 1;
	font-weight: bold;
	color: var(--edge-color);
	opacity: 0.25;
}

/* typography.css aligns every heading and paragraph left, so centering has to
   be stated on the elements themselves - the same way the other pages do it. */
#not-found .header-title {
	font-size: var(--rem-4xl);
	color: var(--edge-color);
	text-align: center;
}

#not-found .header-subtitle {
	font-size: var(--rem-l);
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

#not-found .links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

#not-found .cta-button {
	padding: 16px 42px;
	font-family: Poppins;
	font-size: var(--rem-s);
	background-color: var(--edge-color);
	color: white;
	border-radius: 4px;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

#not-found .cta-button:link,
#not-found .cta-button:visited,
#not-found .cta-button:hover,
#not-found .cta-button:active {
	color: white;
}

#not-found .cta-button:active {
	scale: 0.98;
}

#not-found .text-link {
	font-family: var(--text-font-family);
	font-size: var(--rem-s);
}

@media all and (max-width: 904px) {

	#not-found .not-found-block {
		padding: 42px 24px;
	}

	#not-found .error-code {
		font-size: 80px;
	}

	#not-found .header-title {
		font-size: var(--rem-2xl);
	}
}