From 7c6fd8a5ef7f86b293979a56660bdd2b5c5c8e8a Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Wed, 9 Oct 2024 14:45:17 -0400
Subject: [PATCH] make the 404 page more responsive

Took 6 minutes
---
 src/app/not-found.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 86f7b58..693cc49 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -8,20 +8,21 @@ import Image from "next/image";
  */
 const NotFoundPage = (): ReactElement => (
     <main className="w-full pt-[25vh] min-h-screen flex justify-center select-none pointer-events-none">
-        <div className="h-fit flex gap-10">
+        <div className="h-fit flex gap-5 sm:gap-10 items-center transition-all transform-gpu">
             {/* Image */}
-            <Image
-                src="/media/mike.png"
-                alt="Mike Wazowski"
-                width={128}
-                height={128}
-                draggable={false}
-            />
+            <div className="relative w-24 h-24 xs:w-20 xs:h-20 sm:w-44 sm:h-44">
+                <Image
+                    src="/media/mike.png"
+                    alt="Mike Wazowski"
+                    fill
+                    draggable={false}
+                />
+            </div>
 
             {/* Message */}
             <div className="flex flex-col gap-0.5">
                 <h1 className="text-3xl font-bold">Wrong Door!</h1>
-                <p className="max-w-72 text-lg opacity-75">
+                <p className="max-w-72 sm:text-lg opacity-75">
                     The documentation page you were looking for could not be
                     found.
                 </p>