Update style.css

style.css

@@ -1,42 +1,42 @@
-/* Enhanced style.css content for a more dynamic UI */
 body {
     background-color: #f0f0f0;
-    font-family: 'Roboto', sans-serif; /* Change to a more dynamic font */
+    font-family: 'Arial', sans-serif;
+    color: #333; /* Slightly darker font color for better readability */
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-
 .gradio-app {
     max-width: 1200px;
-    margin: auto;
+    margin: 20px auto; /* Increased margin for a centered look */
     padding: 20px;
     background-color: #ffffff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* More pronounced shadow for depth */
+    border-radius: 8px; /* Rounded corners for modern app feel */
 }
 
 .button, .input, .output {
     margin-bottom: 20px;
-    border: none; /* Removes default border */
-    padding: 10px 15px; /* Adjust padding */
-    border-radius: 8px; /* Adds rounded corners */
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
-    transition: all 0.2s ease; /* Smooth transition for interactions */
+    border: 1px solid #ddd; /* Subtle borders for inputs and buttons */
+    border-radius: 4px; /* Consistent rounded corners */
+    padding: 10px; /* Increased padding for better touch interaction */
 }
 
 .button {
-    background-color: #4CAF50; /* More vibrant button color */
+    background-color: #007bff; /* Brighter blue for a more engaging button */
     color: white;
-    font-weight: 500; /* Medium font weight for better readability */
+    font-weight: bold;
+    text-transform: uppercase; /* Button text styling */
+    letter-spacing: 0.05em; /* Spaced out letters */
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
 }
 
 .button:hover {
-    background-color: #43A047; /* Slightly darker on hover */
+    background-color: #0056b3; /* Darker shade on hover */
 }
 
 .label {
     font-weight: bold;
     margin-bottom: 5px;
-    color: #333; /* Darker color for better contrast */
+    color: #555; /* Darker labels for better visibility */
 }
 
 .tab {
@@ -45,29 +45,32 @@ body {
     padding: 10px 20px;
     cursor: pointer;
     font-size: 16px;
-    border-radius: 5px; /* Rounded corners for tabs */
-    transition: background-color 0.2s ease; /* Smooth transition for tab background */
+    margin-right: 5px; /* Space between tabs */
+    transition: all 0.2s ease; /* Smooth transition for interaction */
+    border-radius: 20px; /* Rounded tabs for a softer look */
 }
 
 .tab.active {
-    background-color: #c0c0c0;
+    background-color: #007bff;
+    color: white; /* Active tab with white text */
 }
 
 .row {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
-    margin-bottom: 20px;
+    gap: 20px; /* Consistent spacing between elements */
 }
 
 .image {
     border-radius: 5px;
     max-width: 100%;
-    height: auto;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds shadow to images for depth */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for images */
 }
 
 .markdown {
-    line-height: 1.5; /* Improves readability of markdown text */
-    color: #4A4A4A; /* Slightly softer text color for easier reading */
-}
+    padding: 15px;
+    background-color: #f8f9fa; /* Light background for markdown sections */
+    border-left: 4px solid #007bff; /* Highlight bar */
+    margin-bottom: 20px; /* Spacing below text blocks */
+    border-radius: 4px; /* Matching rounded corners */
+}