Update app.py

app.py

@@ -89,16 +89,22 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    overflow: hidden;
 }
 
-/* Heading Colors */
-h1 {
-    color: #00796b; /* Deep teal for main headings */
-    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+/* Main Container */
+.gradio-container {
+    max-width: 900px;
+    margin: 30px auto;
+    padding: 40px;
+    background: linear-gradient(135deg, #ffffff, #e8f5e9);
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    color: #333333;
+    transition: transform 0.3s ease;
 }
-h2, h3, h4, h5, h6 {
-    color: #00838f; /* Soft blue-green for subheadings */
-    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+.gradio-container:hover {
+    transform: scale(1.02);
 }
 
 /* Header Styling */
@@ -107,43 +113,60 @@ h2, h3, h4, h5, h6 {
     text-align: center;
     font-weight: 700;
     font-size: 2.5em;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
     letter-spacing: 1px;
     transition: color 0.3s ease;
 }
 #header:hover {
-    color: #00695c;
-    transform: scale(1.05);
+    color: #00796b;
 }
 
-/* Container Style */
-.gradio-container {
-    max-width: 850px;
-    margin: 30px auto;
-    padding: 40px;
-    background: linear-gradient(135deg, #ffffff, #e0f2f1);
-    border-radius: 12px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-    color: #333333;
+/* Heading Colors */
+h1 {
+    color: #00796b; /* Deep teal for main headings */
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+}
+h2, h3, h4, h5, h6 {
+    color: #00838f; /* Soft blue-green for subheadings */
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
 }
 
 /* Form Field Styles */
 input, select, textarea {
-    max-width: 700px;
+    width: 100%;
     border: 1px solid #004d40;
     border-radius: 8px;
-    padding: 10px 12px;
+    padding: 12px 14px;
     background: #fafafa;
     color: #333333;
-    font-size: 15px;
+    font-size: 16px;
     margin-bottom: 15px;
     transition: all 0.3s ease;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 }
 input:focus, select:focus, textarea:focus {
     border-color: #26a69a;
-    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+    background: #f1f8e9;
+}
+
+/* Button Styles */
+button {
+    font-size: 1em;
+    font-weight: 600;
+    padding: 12px 24px;
+    border-radius: 8px;
+    border: none;
+    background-color: #00796b;
+    color: #ffffff;
+    cursor: pointer;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+button:hover {
+    background-color: #004d40;
+    transform: translateY(-2px);
 }
 
 /* Radio Button Group Styling */
@@ -216,7 +239,7 @@ input:focus, select:focus, textarea:focus {
 }
 .nav-tabs .nav-item {
     font-size: 1.2em !important;
-    color: #333333 !important; /* Soft gray for inactive tabs */
+    color: #333333 !important;
     padding: 10px 18px !important;
     cursor: pointer !important;
     font-weight: 500 !important;