fixed footer on small displays

app/globals.css

@@ -143,9 +143,16 @@ body {
   background: rgba(110, 231, 183, 0.25);
   color: var(--fg);
 }
-
+.footer {
+    flex-direction: row;
+    height: 28;
+  }
 @media (max-width: 640px) {
   h1 {
     font-size: 32px !important;
   }
+  .footer {
+    flex-direction: column;
+    height: 36;
+  }
 }

components/Footer.tsx

@@ -4,12 +4,12 @@ import { SITE } from "@/data/content";
 export default function Footer() {
   return (
     <div
+      className="footer"
       style={{
         position: "fixed",
         bottom: 0,
         left: 0,
         right: 0,
-        height: 28,
         background: "var(--surface)",
         borderTop: "1px solid var(--border)",
         display: "flex",