<script>
	import { page } from '$app/state';
</script>

<title>Brock Tomlinson - Not Found</title>

<div>
	<h1>{page.status} - Page not found</h1>
	<p>We are terribly sorry, but the page you requested doesn't exist.</p>
	<a href="/"><button>Return Home Here</button></a>
</div>

<style>
	div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80svh;
	}

	h1 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
	}

	button {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border: none;
		color: inherit;
		font-size: xx-large;
		padding: 1rem;
	}

	button:hover {
		cursor: pointer;
	}

	a {
		text-decoration: none;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		color: inherit;
	}

	a:hover {
		color: #91a4d2;
	}
</style>
