Update frontend/src/index.css

frontend/src/index.css

@@ -3,15 +3,20 @@
 @tailwind utilities;
 
 @layer base {
-  html, body {
+
+  html,
+  body {
     overflow-x: hidden;
     max-width: 100%;
     margin: 0;
     padding: 0;
   }
+
   html {
-    font-size: 14px; /* Decreased from default 16px */
+    font-size: 14px;
+    /* Decreased from default 16px */
   }
+
   :root {
     --on-surface: #1e1e1e;
     --on-primary-container: #1e3a8a;
@@ -56,35 +61,69 @@
 
 /* Custom UI Animations */
 @keyframes fade-in {
-  0% { opacity: 0; transform: translateY(10px); }
-  100% { opacity: 1; transform: translateY(0); }
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+
 .animate-fade-in {
   animation: fade-in 0.4s ease-out forwards;
 }
 
 @keyframes slide-up {
-  0% { opacity: 0; transform: translateY(30px); }
-  100% { opacity: 1; transform: translateY(0); }
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+
 .animate-slide-up {
   animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 @keyframes float {
-  0% { transform: translateY(0px) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(2deg); }
-  100% { transform: translateY(0px) rotate(0deg); }
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-20px) rotate(2deg);
+  }
+
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
 }
+
 .animate-float {
   animation: float 8s ease-in-out infinite;
 }
 
 @keyframes float-delayed {
-  0% { transform: translateY(0px) rotate(0deg); }
-  50% { transform: translateY(20px) rotate(-2deg); }
-  100% { transform: translateY(0px) rotate(0deg); }
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(20px) rotate(-2deg);
+  }
+
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
 }
+
 .animate-float-delayed {
   animation: float-delayed 10s ease-in-out infinite;
 }
@@ -95,6 +134,7 @@
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
+
 .dark .glass-panel {
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.05);
@@ -166,6 +206,4 @@
   display: none !important;
   width: 0 !important;
   height: 0 !important;
-}
-
-
+}