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

<Base title="Page not found">
	<section class="container empty-state">
		<p class="display not-found__code">404</p>
		<h1 class="display empty-state__title">Page not found</h1>
		<p class="lead">
			This room is empty. The page you’re looking for doesn’t exist or has moved.
		</p>
		<div class="actions">
			<a href="/" class="btn btn-lg">Go home</a>
			<a href="/contact" class="btn btn-lg btn-secondary">Contact us</a>
		</div>
	</section>
</Base>

<style>
	.not-found__code {
		font-size: clamp(120px, 22vw, 240px);
		line-height: 0.85;
		letter-spacing: var(--tracking-tight);
		color: var(--color-muted);
	}
</style>