Update app.py

app.py

@@ -509,7 +509,7 @@ def toggle_resolution(checkbox):
 # Custom CSS
 custom_css = """
 body {
-    background: #d3d3d3; /* Light gray background */
+    background: linear-gradient(135deg, #1e1e2f, #2a2a4a);
     font-family: sans-serif;
     color: #e0e0e0;
 }
@@ -517,12 +517,12 @@ body {
     width: 100%;
     max-width: 100%;
     margin: 20px auto;
-    background: rgba(30, 70, 47, 0.7);
+    background: rgba(30, 30, 47, 0.95);
     border-radius: 12px;
     padding: 30px;
-    box-shadow: 0 4px 12px rgba(30, 0, 0, 0.9);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
-gradio {
+h1 {
     color: #ff3f81;
     text-align: center;
     font-size: 2.5rem;
@@ -533,16 +533,15 @@ gradio {
     color: white;
     border-radius: 8px;
     padding: 12px 20px;
-    font-size: 20px;
+    font-size: 14px;
     border: none;
     cursor: pointer;
-    margin: 10px 0;
+    margin: 5px 0;
 }
 .gr-button:hover {
-    background: #c55c55;
+    background: #c55;
 }
-.output-textbox {
-    .gr-input, .gr-textbox, .gr-dropdown, .gr-checkbox {
+.output-textbox, .gr-input, .gr-textbox, .gr-dropdown {
     background: #3a3a5a;
     color: #e0e0e0;
     border-radius: 8px;
@@ -554,8 +553,7 @@ gradio {
     gap: 20px;
     margin-bottom: 20px;
 }
-.video-preview {
-    .image-preview {
+.video-preview, .image-preview {
     border-radius: 8px;
     border: 2px solid #ff3f81;
     max-height: 500px;
@@ -570,8 +568,6 @@ gradio {
     h1 {
         font-size: 2rem;
     }
-    color: #ff0;
-;
     .gr-row {
         flex-direction: column;
         gap: 15px;