Style updates

fix navbar to remain sticky, add fade in to layout component, update font to Space Grotesk

components/ui/Layout.tsx

@@ -4,10 +4,10 @@ import Navbar from './Navbar';
 const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div className="flex h-screen flex-col">
-      <header className="sticky top-0 z-50">
-        <Navbar />
-      </header>
-      <div className="relative top-0 h-full flex-1">{children}</div>
+      <Navbar />
+      <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
+        {children}
+      </div>
     </div>
   );
 };

components/ui/Navbar.tsx

@@ -42,10 +42,10 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="navbar bg-primary text-primary-content">
+    <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
-          <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
+        <Link className="btn-ghost btn normal-case" href="/">
+          <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
         </Link>
       </div>
       <div className="hidden flex-none lg:block">
@@ -68,7 +68,7 @@ const Navbar = () => {
         </ul>
       </div>
       <div className="flex-none lg:hidden">
-        <div className="dropdown dropdown-end">
+        <div className="dropdown-end dropdown">
           <label tabIndex={0} className="btn-ghost btn-circle btn">
             <span className="w-10 rounded-full">
               <svg