Update app.css

app.css

@@ -1,85 +1,150 @@
 /* app.css */
 
+/* General Styling */
 body {
-    background-color: #f5f5f5;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #f9f9f9; /* Light background for the entire app */
+    color: #333333; /* Dark text for readability */
     margin: 0;
     padding: 0;
 }
 
-.gradio-container {
-    font-family: 'Roboto', sans-serif;
-    margin: 0 auto;
-    padding: 20px;
-    max-width: 100%; /* Ensure the container doesn't exceed the viewport width */
-    overflow-x: hidden; /* Hide horizontal overflow */
+/* Header Styling */
+h1, h2, h3, h4, h5, h6 {
+    color: #2C3E50; /* Dark blue-gray for headings */
 }
 
-.gr-button {
-    background-color: #6200EE;
-    color: white;
-    font-weight: bold;
-    cursor: pointer;
+/* Card Styling */
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease;
+    padding: 15px;
+    margin: 10px;
+    border-radius: 8px;
+    background-color: #ffffff; /* White background for cards */
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+/* Button Styling */
+button {
+    background-color: #4CAF50; /* Green background for buttons */
     border: none;
+    color: white;
     padding: 10px 20px;
-    margin: 5px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
     border-radius: 4px;
-    transition: background-color 0.3s;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-.gr-button:hover {
-    background-color: #3700B3;
+button:hover {
+    background-color: #45a049; /* Darker green on hover */
 }
 
-h1 {
-    color: #333;
+/* File Upload Styling */
+input[type="file"] {
+    border: 2px dashed #4CAF50;
+    border-radius: 5px;
+    padding: 20px;
     text-align: center;
-    font-weight: normal;
+    color: #4CAF50;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.card {
-    background-color: white;
+input[type="file"]:hover {
+    background-color: #f1f1f1;
+    color: #45a049;
+}
+
+/* Dropdown Styling */
+select, .gr-dropdown {
+    padding: 8px;
     border-radius: 4px;
-    margin: 10px 0;
-    padding: 15px;
-    box-sizing: border-box; /* Include padding and border in the total width and height */
-    word-wrap: break-word; /* Break long words to prevent overflow */
-    overflow-wrap: break-word; /* For better compatibility */
-    max-width: 100%; /* Ensure cards don't exceed the container width */
+    border: 1px solid #ccc;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 10px;
 }
 
-.card-content h3 {
-    margin-top: 0;
-    font-size: 1.2em;
-    color: #6200EE;
+/* Checkbox Group Styling */
+.gr-checkboxgroup {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
 }
 
-.card-content p {
-    margin: 5px 0;
-    color: #555;
+.gr-checkboxgroup label {
+    margin-bottom: 5px;
+    font-size: 14px;
 }
 
-.card-content a {
-    color: #1E88E5;
+/* Textbox Styling */
+textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"], .gr-textbox {
+    width: 100%;
+    padding: 8px 12px;
+    margin: 4px 0;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+    font-size: 14px;
+}
+
+/* Link Styling */
+a {
+    color: #2980B9; /* Blue color for links */
     text-decoration: none;
-    word-break: break-all; /* Break long URLs to prevent overflow */
 }
 
-.card-content a:hover {
+a:hover {
     text-decoration: underline;
+    color: #1F618D;
 }
 
-.dead-link {
-    border: 2px solid #D32F2F;
+/* Markdown Styling */
+.markdown {
+    line-height: 1.6;
 }
 
-.dead-link .card-content h3,
-.dead-link .card-content p,
-.dead-link .card-content a {
-    color: #D32F2F;
+/* Output Textbox Styling */
+.gr-output .gr-textbox {
+    background-color: #f0f0f0; /* Light gray background for outputs */
+    border: 1px solid #ccc;
+    color: #333333;
 }
 
+/* Export Button Styling */
+.gr-button--export {
+    background-color: #3498DB; /* Blue background for export button */
+}
+
+.gr-button--export:hover {
+    background-color: #2980B9; /* Darker blue on hover */
+}
+
+/* Download Link Styling */
+.gr-html {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+/* Responsive Design */
 @media screen and (max-width: 600px) {
-    .card-content h3 {
-        font-size: 1em;
+    .gr-row {
+        flex-direction: column;
+    }
+
+    button, select, input[type="file"], textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
+        width: 100%;
+        margin: 5px 0;
     }
 }