---
import Layout from "../layouts/Layout.astro";
import Link from "next/link";
---

<Layout>
    <div
        class="h-screen w-full flex justify-center items-center relative overflow-hidden"
    >
        <div
            class="animate-[pulse_3s_ease-in-out_infinite] bg-gradient-to-l to-indigo-950/80 from-ieee-blue-100/60 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[4vw] blur-[10vw] rounded-full absolute"
        >
        </div>
        <div
            class="animate-[pulse_4s_ease-in-out_infinite] bg-gradient-to-r from-blue-600/20 to-purple-600/20 w-[90vw] h-[55vw] md:w-[38vw] md:h-[24vw] md:blur-[5vw] blur-[11vw] rounded-full absolute -rotate-45"
        >
        </div>
        <div
            class="animate-[pulse_5s_ease-in-out_infinite] bg-gradient-to-tr from-ieee-yellow/10 to-blue-500/10 w-[95vw] h-[58vw] md:w-[40vw] md:h-[25vw] md:blur-[4.5vw] blur-[10.5vw] rounded-full absolute rotate-45"
        >
        </div>
        <div class="flex flex-col items-center z-10">
            <p
                class="md:text-[15vw] text-[35vw] leading-tight font-bold tracking-wider text-slate-800/90"
                style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}
            >
                404
            </p>
            <p class="font-extralight md:text-[1.4vw] text-[3vw]">
                Oops! You're Lost in the Circuit!🔌⚡
            </p>
            <Link
                href="/"
                className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[7vw] py-[2%] font-extralight md:text-[1.2vw] text-[2.5vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
            >
                Go Back Home
            </Link>
        </div>
    </div>
</Layout>