Update app.py

app.py

@@ -26,18 +26,16 @@ CSS = """
   --accent2: #7C5CFF;
 }
 
+/* IMPORTANT: make the default Gradio background transparent so our image shows */
 body, .gradio-container{
-  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,0.22), transparent 55%),
-              radial-gradient(900px 500px at 10% 0%, rgba(125,249,255,0.18), transparent 55%),
-              linear-gradient(180deg, #05060A 0%, #070A0F 100%) !important;
-  color: var(--text) !important;
+  background: transparent !important;
 }
 
 /* Background image layer */
 #bg-wrap{
   position: fixed;
   inset: 0;
-  z-index: 0;
+  z-index: -1;              /* put behind everything */
   pointer-events: none;
   overflow: hidden;
 }
@@ -45,17 +43,23 @@ body, .gradio-container{
 #bg-image{
   position: absolute;
   inset: 0;
-  background-image: url("https://huggingface.co/spaces/LevyJonas/SurfaceChangePredictor/resolve/main/assets/bg.jpg");
+  background-image:
+    radial-gradient(1200px 700px at 60% 25%, rgba(125,249,255,0.10), transparent 60%),
+    radial-gradient(900px 600px at 15% 10%, rgba(124,92,255,0.10), transparent 60%),
+    url("https://huggingface.co/spaces/LevyJonas/SurfaceChangePredictor/resolve/main/assets/bg.jpeg");
   background-size: cover;
-  background-position: center;
-  opacity: 1;                          
-  filter: brightness(1.9) contrast(1.05) saturate(1.10);
+  background-position: 65% 80%;   /* pushes the Earth into view */
+  background-repeat: no-repeat;
+
+  opacity: 0.95;
+  filter: brightness(1.25) contrast(1.08) saturate(1.12);
 }
 
+/* Light vignette (not too dark) */
 #bg-overlay{
-  position:absolute;
-  inset:0;
-  background: rgba(0,0,0,0.02);     
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(900px 700px at 50% 30%, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
 }
 
 /* App container above background */