Update app.py

css try 3 improvement

app.py

@@ -86,18 +86,31 @@ custom_css = """
     textarea {
         min-height: 150px;
     }
-    .gr-button {
-        background-color: #007acc;
-        color: white;
-        border-radius: 10px;
-        font-size: 18px;
-        font-weight: bold;
-        padding: 10px 20px;
-        font-family: 'Montserrat', sans-serif;
-        transition: background-color 0.3s ease;
+    .gr-button-primary {
+        background-color: #007acc !important;
+        color: white !important;
+        border-radius: 10px !important;
+        font-size: 18px !important;
+        font-weight: bold !important;
+        padding: 10px 20px !important;
+        font-family: 'Montserrat', sans-serif !important;
+        transition: background-color 0.3s ease !important;
+    }
+    .gr-button-primary:hover {
+        background-color: #005f99 !important;
+    }
+    .gr-button-secondary {
+        background-color: #f44336 !important;
+        color: white !important;
+        border-radius: 10px !important;
+        font-size: 18px !important;
+        font-weight: bold !important;
+        padding: 10px 20px !important;
+        font-family: 'Montserrat', sans-serif !important;
+        transition: background-color 0.3s ease !important;
     }
-    .gr-button:hover {
-        background-color: #005f99;
+    .gr-button-secondary:hover {
+        background-color: #c62828 !important;
     }
     .gr-output {
         background-color: #e0f7fa;
@@ -127,6 +140,17 @@ custom_css = """
         font-family: 'Courier New', Courier, monospace;
         background-color: #f3f4f6;
         color: #005f99;
+        font-size: 16px;
+        padding: 10px;
+        border-radius: 8px;
+    }
+    /* Make the JSON {} icon smaller */
+    .gr-output-json .json-key {
+        font-size: 20px !important;
+    }
+    .gr-output-json .json-key img {
+        width: 20px !important;
+        height: 20px !important;
     }
 """
 
@@ -134,8 +158,8 @@ custom_css = """
 interface = gr.Interface(
     fn=gradio_interface,
     inputs=[
-        gr.Textbox(label="🧠 Math Question", placeholder="Enter your math question here...", elem_id="math_question"),
-        gr.Textbox(label="✅ Correct Answer", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
+        gr.Textbox(label="🧠 <b>Math Question</b>", placeholder="Enter your math question here...", elem_id="math_question"),
+        gr.Textbox(label="✅ <b>Correct Answer</b>", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
     ],
     outputs=[
         gr.JSON(label="📊 Results", elem_id="results"),  # Display the results in a JSON format