---
import { SITE } from "src/config";
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 title={`404 Not Found | ${SITE.title}`}>
  <Header />

  <main id="main-content">
    <div class="not-found-wrapper">
      <h1>404</h1>
      <span>¯\_(ツ)_/¯</span>
      <p>Page Not Found</p>
      <LinkButton
        href="/"
        className="my-6 underline decoration-dashed underline-offset-8 text-lg"
      >
        Go back home
      </LinkButton>
    </div>
  </main>

  <Footer />
</Layout>

<style>
  #main-content {
    @apply max-w-3xl mx-auto flex-1 justify-center items-center flex;
  }
  .not-found-wrapper {
    @apply flex flex-col items-center justify-center mb-14;
  }
  .not-found-wrapper h1 {
    @apply font-bold text-9xl text-skin-accent;
  }
  .not-found-wrapper p {
    @apply text-2xl sm:text-3xl mt-4;
  }
</style>