Update styles.css

styles.css

@@ -1,29 +1,32 @@
-body {
-    background-color: #F3F4F6; /* Light Gray */
-    color: #374151; /* Dark Gray */
-}
-.gradio-container {
-    font-family: Arial, sans-serif;
-}
-.gr-button {
-    background-color: #1E3A8A; /* Deep Blue */
-    color: white;
-    border: none;
-}
-.gr-button:hover {
-    background-color: #1D4ED8; /* Slightly lighter Blue for hover effect */
-}
-.gr-secondary-button {
-    background-color: #FBBF24; /* Soft Yellow */
-    color: black;
-    border: none;
-}
-.gr-secondary-button:hover {
-    background-color: #FACC15; /* Slightly lighter Yellow for hover effect */
-}
-.gr-textbox, .gr-markdown, .gr-examples {
-    border-color: #1E3A8A; /* Deep Blue */
-}
-.gr-error {
-    color: #EF4444; /* Red */
+/* Highlight active elements */
+input[type="text"]:focus, button:hover, button:focus {
+    border: 2px solid #f1c40f; /* Gold border for emphasis */
+    box-shadow: 0 0 5px #f1c40f;
+}
+
+/* Add color accents to section headers */
+h2, h3 {
+    color: #f39c12; /* Orange for headers */
+    border-bottom: 2px solid #f39c12; /* Optional: border for separation */
+    padding-bottom: 5px;
+}
+
+/* Add subtle background to examples */
+.gr-examples {
+    background-color: #2c3e50; /* Dark background for examples section */
+    padding: 10px;
+    border-radius: 5px;
+}
+
+/* Button styling */
+button {
+    background-color: #3498db; /* Blue background */
+    color: white; /* White text */
+    border: none; /* Remove default border */
+    padding: 10px 20px; /* Add padding */
+    border-radius: 5px; /* Rounded corners */
+}
+
+button:hover {
+    background-color: #2980b9; /* Darker blue on hover */
 }