fixed css

app/globals.css

@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

app/page.tsx

@@ -8,8 +8,8 @@ export default async function Home() {
   const users = await getUsers();
   const session: Session | null = await auth();
   return (
-    <main>
+    <main className="min-h-screen w-full">
-      <div className="w-full h-full flex flex-col items-center">
+      <div className="min-h-screen w-full flex flex-col items-center justify-center">
         <SignIn session={session} />
         <ThemeSwitcher />
       </div>

components/ThemeSwitcher.tsx

@@ -16,7 +16,7 @@ export function ThemeSwitcher() {
   if (!mounted) return null;
 
   return (
-    <div>
+    <div className="flex gap-2 items-center my-2">
       The current theme is: {theme}
       <Button onClick={() => setTheme("light")}>Light Mode</Button>
       <Button onClick={() => setTheme("dark")}>Dark Mode</Button>