---
import Base from "../layouts/Base.astro";
---

<Base title="Page not found">
	<div class="not-found">
		<h1>404</h1>
		<p>The page you're looking for doesn't exist.</p>
		<a href="/">Go back home</a>
	</div>
</Base>

<style>
	.not-found {
		text-align: center;
		padding: var(--spacing-24) var(--spacing-6);
	}

	.not-found h1 {
		font-size: var(--font-size-5xl);
		margin-bottom: var(--spacing-2);
		color: var(--color-border);
	}

	.not-found p {
		color: var(--color-muted);
		margin-bottom: var(--spacing-6);
	}

	.not-found a {
		color: var(--color-text);
	}
</style>