<script lang="ts">
	import { page } from '$app/stores';
</script>

<div class="flex min-h-screen flex-col items-center justify-center gap-12 p-8">
	<div class="relative w-fit">
		<h1 class="text-9xl font-bold">{$page.status}</h1>
		<p
			class="text-error absolute top-1/2 left-1/2 -translate-y-1/2 text-5xl font-black whitespace-nowrap italic"
			style="transform: skewY(-5deg);"
		>
			{$page.error?.message}
		</p>
	</div>
	<a href="/" class="btn btn-primary btn-lg">Go Home</a>
</div>
