Update app.py

app.py

@@ -1,14 +1,44 @@
 import streamlit as st
-
-page_element="""
-    <style>
-[data-testid="stAppViewContainer"]{
-  background-image: url("https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/u9SXpMjOOHQ5jXpq2eQqx.jpeg")
-  background-size: cover;
-}
-    </style>
+custom_css = """
+<style>
+    html, body, [data-testid="stAppViewContainer"] {
+        background: linear-gradient(
+            rgba(0, 0, 0, 0.6), /* Semi-transparent black overlay */
+            rgba(0, 0, 0, 0.6)
+        ), 
+        url("https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/QsKOKzW4ju_OC-SazQLuG.jpeg") no-repeat center center fixed;
+        background-size: cover; /* Cover the entire screen */
+        font-family: Arial, sans-serif;
+        color: #ffffff;
+    }
+    h1 {
+        color: #ffffff;
+        text-align: center;
+        margin-top: 20px;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow for better visibility */
+    }
+    /* Style sections */
+    .section {
+        margin: 20px auto;
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.1); /* Transparent background for readability */
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .section h2 {
+        color: #ffffff;
+        margin-bottom: 10px;
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Add shadow for better visibility */
+    }
+    .section p {
+        line-height: 1.6;
+        font-size: 1.1rem;
+    }
+</style>
 """
-st.markdown(page_element, unsafe_allow_html=True)
+
+# Apply custom CSS
+st.write(custom_css, unsafe_allow_html=True)
     
 
 st.markdown("<h1>Zero to Hero in ML</h1>", unsafe_allow_html=True)