Revamping to matrix style

src/layouts/Layout.astro

@@ -18,7 +18,7 @@ import SpeedInsights from "@vercel/speed-insights/astro";
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sumana:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Fira+Code:wght@300;400;700&display=swap"
       rel="stylesheet"
     />
     <SpeedInsights />
@@ -31,8 +31,8 @@ import SpeedInsights from "@vercel/speed-insights/astro";
       <slot />
     </div>
 
-    <footer class="bottom-0 w-full z-10 bg-gray-800 text-white p-4">
-      <p class="text-center">{new Date().getFullYear()} Ryan Kazokas</p>
+    <footer class="bottom-0 w-full z-10 bg-black border-t border-green-500 text-green-500 p-4">
+      <p class="text-center font-mono">{new Date().getFullYear()} Ryan Kazokas</p>
     </footer>
   </body><style is:global>
     h1,
@@ -41,11 +41,36 @@ import SpeedInsights from "@vercel/speed-insights/astro";
     h4,
     h5,
     h6 {
-      font-family: "Sumana", sans-serif;
+      font-family: "JetBrains Mono", "Fira Code", monospace;
     }
     body {
-      color: #5f615f;
-      font-family: "Open Sans", sans-serif;
+      background: #0d0d0d;
+      color: #00ff41;
+      font-family: "JetBrains Mono", "Fira Code", monospace;
+    }
+
+    /* Matrix-style text glow */
+    .matrix-glow {
+      text-shadow: 0 0 5px rgba(0, 255, 65, 0.5), 0 0 10px rgba(0, 255, 65, 0.3);
+    }
+
+    /* Scanline effect */
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.15),
+        rgba(0, 0, 0, 0.15) 1px,
+        transparent 1px,
+        transparent 2px
+      );
+      pointer-events: none;
+      z-index: 1000;
     }
   </style>
 </html>