Update style.css

style.css

@@ -1,9 +1,11 @@
-/* style.css content for Pollack Inspired UI */
+/* Enhanced style.css content for a more dynamic UI */
 body {
     background-color: #f0f0f0;
-    font-family: 'Arial', sans-serif;
+    font-family: 'Roboto', sans-serif; /* Change to a more dynamic font */
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
 .gradio-app {
     max-width: 1200px;
     margin: auto;
@@ -14,11 +16,27 @@ body {
 
 .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 */
+}
+
+.button {
+    background-color: #4CAF50; /* More vibrant button color */
+    color: white;
+    font-weight: 500; /* Medium font weight for better readability */
+}
+
+.button:hover {
+    background-color: #43A047; /* Slightly darker on hover */
 }
 
 .label {
     font-weight: bold;
     margin-bottom: 5px;
+    color: #333; /* Darker color for better contrast */
 }
 
 .tab {
@@ -27,6 +45,8 @@ 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 */
 }
 
 .tab.active {
@@ -44,4 +64,10 @@ body {
     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 */
+}
+
+.markdown {
+    line-height: 1.5; /* Improves readability of markdown text */
+    color: #4A4A4A; /* Slightly softer text color for easier reading */
 }