404.html

---
layout: base
permalink: /404.html
---

<main class="flex justify-center items-center h-screen w-screen">
  <div class="text-center">
    <h1 class="text-4xl md:text-6xl font-bold font-mono">404</h1>
    <p class="font-mono">Page not found :(</p>

    <div class="flex items-center my-6 md:my-10 w-3/4 mx-auto" aria-hidden="true">
      <span aria-hidden="true" class="flex-grow bg-zinc-500 dark:bg-zinc-400 rounded h-0.5"></span>
      <svg xmlns="http://www.w3.org/2000/svg" class="inline fill-rose-700 h-5 w-5 mx-3"
        viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd"
          d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
          clip-rule="evenodd" />
      </svg>
      <span aria-hidden="true" class="flex-grow bg-zinc-500 dark:bg-zinc-400 rounded h-0.5"></span>
    </div>

    <p>The requested page could not be found.</p>
    <p>
      Try
      <a class="underline transition-colors hover:text-rose-800" href="{{ '/' | relative_url }}">Home</a>
      or the
      <a class="underline transition-colors hover:text-rose-800" href="{{ '/blog' | relative_url }}">Blog</a>.
    </p>
  </div>
</main>