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

<Layout title="404 - Not found" path="/404">
  <section class="nf">
    <div class="container nf__inner">
      <p class="eyebrow">Error 404</p>
      <h1 class="nf__code mono">404</h1>
      <p class="nf__msg">
        This route returned no endpoint. The page you're looking for isn't here.
      </p>
      <a class="btn btn--primary" href="/">← Back home</a>
    </div>
  </section>
</Layout>

<style>
  .nf {
    min-height: 64vh;
    display: grid;
    place-items: center;
    text-align: center;
  }
  .nf__code {
    font-size: var(--step-5);
    color: var(--accent);
    margin-block: var(--space-3);
  }
  .nf__msg {
    color: var(--text-dim);
    max-width: 38ch;
    margin: 0 auto var(--space-6);
  }
</style>