<section class="flex flex-col mx-auto gap-10 py-6 text-center [--shadow:black] [--text:white] dark:[--shadow:white] dark:[--text:black]">
    <div class="relative isolate mt-32 animate-bounce rounded-xl text-9xl font-bold text-[var(--shadow)] before:absolute before:inset-0 before:-z-10 before:translate-x-1.5 before:translate-y-1.5 before:content-['404']">
        <span class="relative z-10 text-[var(--text)] [-webkit-text-stroke:1.5px_var(--shadow);] [text-stroke:1.5px_var(--shadow);]">404</span>
    </div>
    <p class="text-lg font-semibold text-[var(--shadow)]">Page you're looking for is not found</p>
    <div class="flex items-center justify-center gap-6">
        <button class="group border-2 border-[var(--shadow)] bg-[var(--text)] px-5 py-2.5 text-[var(--shadow)] shadow-[3px_4px_var(--shadow)] duration-100 focus-visible:outline focus-visible:outline-[var(--shadow)] active:shadow-[1px_1px_var(--shadow)]">
            Go back
        </button>
        <button class="group border-2 border-[var(--shadow)] bg-[var(--text)] px-5 py-2.5 text-[var(--shadow)] shadow-[3px_4px_var(--shadow)] duration-100 focus-visible:outline focus-visible:outline-[var(--shadow)] active:shadow-[1px_1px_var(--shadow)]">
            Home
        </button>
    </div>
</section>

<section class="group mx-auto flex flex-col gap-10 py-6 text-center [--text-color:black] dark:[--text-color:white]">
    <div class="relative isolate mt-32 rounded-xl text-9xl font-bold text-[var(--text-color)] transition-[text-shadow] duration-500 dark:group-hover:[text-shadow:5px_5px_red,8px_8px_blue]">
        404
    </div>
    <p class="text-lg font-semibold text-[var(--text-color)]">Page you're looking for is not found</p>
    <div class="flex items-center justify-center gap-6 font-semibold">
        <a href="#" class="rounded px-[0.9rem] py-[0.35rem] pb-[0.45rem] text-base text-[var(--text-color)] transition-colors hover:bg-gray-200 focus-visible:outline focus-visible:outline-black/50 active:scale-95 dark:hover:bg-gray-200/10 dark:focus-visible:outline-white/40">
            Go back
        </a>
        <a href="#" class="rounded px-[0.9rem] py-[0.35rem] pb-[0.45rem] text-base text-[var(--text-color)] transition-colors hover:bg-gray-200 focus-visible:outline focus-visible:outline-black/50 active:scale-95 dark:hover:bg-gray-200/10 dark:focus-visible:outline-white/40">
            Home
        </a>
    </div>
</section>