---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import LinkButton from "@components/LinkButton.astro";
---

<Layout pageTitle="404 Not Found">
  <Header />

  <main id="main-content">
    <div class="not-found-wrapper">
      <h1 aria-label="404 Not Found" class="title is-1" style="font-size: 9rem;">404</h1>
      <span aria-hidden="true" class="mb-3">¯\_(ツ)_/¯</span>
      <p class="subtitle is-4">Page Not Found</p>
      <LinkButton
        href="/"
        className="my-6 text-lg underline decoration-dashed underline-offset-8"
      >
        Go back home
      </LinkButton>
    </div>
  </main>

  <Footer />
</Layout>

<style>
  .not-found-wrapper {
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
  }
</style>