Update app.py

app.py

@@ -27,31 +27,56 @@ def arithmetic(num1, num2, operation):
     return res[0]
 
 custom_css = """
-    /* Set dark background for the entire app */
+    /* Set the overall background to a dark color */
     .gradio-container {
         background-color: #121212;
         color: #ffffff;
     }
     
-    /* Apply gradient blue background to buttons */
+    /* Style the title and description text */
+    .gradio-container h1, .gradio-container h2, .gradio-container p {
+        color: #ffffff;
+    }
+    
+    /* Style the input fields with a dark background and blue border */
+    input, textarea {
+        background-color: #1e1e1e;
+        border: 2px solid #2a5298;
+        color: #ffffff;
+        padding: 10px;
+        border-radius: 5px;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    /* Change border color on focus */
+    input:focus, textarea:focus {
+        border-color: #1e3c72;
+        outline: none;
+    }
+    
+    /* Style the buttons with a gradient blue background */
     button {
         background: linear-gradient(to right, #1e3c72, #2a5298);
         color: #ffffff;
         border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background 0.3s ease;
     }
     
-    /* Apply gradient blue border to textboxes */
-    input[type="text"], textarea {
-        border: 2px solid;
-        border-image: linear-gradient(to right, #1e3c72, #2a5298);
-        border-image-slice: 1;
-        background-color: #1e1e1e;
-        color: #ffffff;
+    /* Change button background on hover */
+    button:hover {
+        background: linear-gradient(to right, #2a5298, #1e3c72);
     }
     
     /* Style the labels */
     label {
         color: #ffffff;
+        font-weight: bold;
+        margin-top: 10px;
+        display: block;
     }
 
     /* Hide footer display */