---
import MainGridLayout from '@layouts/MainGridLayout.astro'
import { url } from '@utils/url-utils'
import { Icon } from 'astro-icon/components'
import Layout from "../layouts/Layout.astro";
---

<Layout title="Not found">
  <div class="rounded-[var(--radius-large)] overflow-hidden relative w-[40rem] h-[20rem] m-auto">
    <div class="card-base z-10 px-9 py-6 relative w-full text-black/75 dark:text-white/75">
      <div class="flex items-center gap-4">
        <h1 class="text-[5rem] font-bold">404</h1>
        <p class="text-[2rem]">Not found</p>
      </div>
      <a href={url("/")} class:list={["font-bold overflow-hidden active:scale-95"]}>
        <div class="btn-plain transition max-w-fit rounded-2xl h-[3.75rem] px-4 flex items-center justify-start gap-2">
            Return to top page
          <Icon name="material-symbols:chevron-right-rounded" class="text-[1.75rem]" />
        </div>
      </a>
    </div>
  </div>
</Layout>
