From 03e1f8ab4460b54542382c8d68e3e2324e50e556 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 8 Feb 2025 06:30:24 -0800
Subject: [PATCH] fix the css alignment for desktop view

---
 src/pages/404.astro | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index eb1eb64..5ba831f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -4,19 +4,27 @@ import Link from "next/link";
 ---
 
 <Layout>
-    <div class="h-screen w-full flex justify-center relative md:mt-[10%] pt-[50vw]">
-            <div class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full"/>
-            <div class="flex flex-col items-center absolute md:top-0 top-[50vw]">
-                <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 class="h-screen w-full flex justify-center items-center relative">
+        <div
+            class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full absolute"
+        >
         </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>