frontend mobile friendly

dashboard/src/app/globals.css

@@ -3,17 +3,9 @@
 @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;
-  }
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
 }
 
 body {
@@ -32,26 +24,6 @@ body {
   }
 }
 
-.background {
-  position: relative;
-}
-
-.background::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("../../public/background.jpg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 0.2; /* Adjust the opacity as needed */
-  filter: blur(5px);
-  z-index: -1; /* Ensure the image is behind any content in .background */
-}
-
 /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
 .scroll-container::-webkit-scrollbar {
   display: none; /* Hide scrollbar */

dashboard/src/app/page.tsx

@@ -259,9 +259,9 @@ export default function Home() {
 
   return (
     <ThemeProvider theme={darkTheme}>
-      <div className="h-screen flex flex-col background">
-        <main className="flex-1 grid justify-center items-center">
-          <div className="p-10 border-2 border-gray-800 rounded-2xl backdrop-blur-md grid grid-flow-row gap-8 w-[800px]">
+      <div className="h-screen flex flex-col">
+        <main className="flex-1 grid items-center">
+          <div className="p-10 border-2 border-gray-800 rounded-2xl backdrop-blur-md grid grid-flow-row gap-8 max-w-[1000px] w-full mx-auto">
             <div className="text-center font-medium grid grid-flow-row gap-1">
               <div className="text-xl font-bold">Zetina network</div>
               <div className="text-md">Prove program Pie</div>