changes to link color scheme

app/layout.tsx

@@ -22,19 +22,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   const [pageIsScrolled, setPageIsScrolled] = useState(false);
 
   useEffect(() => {
+    if (pathname === '/contact') setOverlay(true);
+
     switch (pathname) {
       case '/contact':
         setBg('bg-darkPlum');
-        setOverlay(true);
         break;
       case '/about':
         setBg("bg-blue-100 dark:bg-slate-900");
-        setOverlay(false);
+        break;
+      case "/links":
+        setBg("bg-sky-100 dark:bg-slate-900");
         break;
       case '/':
       default:
         setBg('bg-slate-400 dark:bg-slate-900');
-        setOverlay(false);
         break;
     }
   }, [pathname])
@@ -63,7 +65,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <main className={`${bg} min-h-screen`}>
             <div>
-              <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
+              <div id="navbar-spacer" className="h-[6rem] w-full bg-opacity-75 bg-slate-300 dark:bg-black " />
               {children}
             </div>
           </main>

app/links/page.tsx

@@ -6,8 +6,7 @@ import { RxArrowRight } from "react-icons/rx";
 
 export default function LinksPage() {
     return (
-        <article className="flex flex-col items-center">
+        <div className="flex flex-col items-center bg-gradient-to-b from-slate-300 to-sky-100 dark:from-black dark:to-slate-900 bg-fixed">
-
             <section className="flex flex-col flex-wrap w-11/12 m-12">
                 <h1 className="text-3xl w-full my-8">Check out my work on...</h1>
                 <Panel width="1/2">
@@ -68,6 +67,6 @@ export default function LinksPage() {
                     />
                 </div>
             </section>
-        </article>
+        </div>
     )
 }