Update app.py

app.py

@@ -43,25 +43,74 @@ audio_1= "sound_effect.mp3"
 video_intro = "FIFA_World_Cup_2022_Soundtrack.mp4"
 video_concu = "Argentina v France _ FIFA World Cup Qatar 2022.mp4"
 
-import streamlit as st
-
-
 
 # Set page configuration
 st.set_page_config(
     page_title="FIFA World Cup 2022 Data Analysis",
-    page_icon="⚽"
+    page_icon="⚽",
+    layout="centered",  # Set layout to wide
+    initial_sidebar_state="expanded",  # Keep sidebar expanded by default
+    
+    
 )
 
+# CSS styles for light and dark modes
+universal_text_color_css = """
+<style>
+/* Set universal text color */
+body, .sidebar .sidebar-content, .sidebar .sidebar-content .block-container {
+    color: #333; /* Set text color */
+}
+</style>
+"""
+st.markdown(universal_text_color_css, unsafe_allow_html=True)  # Apply universal text color CSS styles
+
+# CSS styles to center the page title
+centered_title_css = """
+<style>
+.title-wrapper {
+    text-align: center !important;
+    margin-bottom: 0.5rem; /* Adjust margin bottom */
+}
+</style>
+"""
+
+# Apply the CSS styles to center the page title
+st.markdown(centered_title_css, unsafe_allow_html=True)
+
 # Title
 st.title("FIFA World Cup 2022 Data Analysis")
+
 # Initialize session state
 if 'app_mode' not in st.session_state:
     st.session_state.app_mode = 'Welcome'
 
-st.markdown("<p style='text-align: center; font-family: Comic Sans MS; font-size: 24px;'><b>Select a page in a sidebar to explore:</b></p>", unsafe_allow_html=True)
+# Set sidebar width and style for sidebar buttons
+st.markdown(
+    """
+    <style>
+    .sidebar .sidebar-content {
+        width: 300px;
+    }
+    .sidebar .sidebar-content .block-container {
+        color: #333; /* Set sidebar text color */
+    }
+    .sidebar .sidebar-content .block-container .stRadio {
+        font-weight: bold; /* Make sidebar buttons bold */
+        color: #007bff; /* Set sidebar button text color to blue */
+    }
+    .sidebar .sidebar-content .block-container .stRadio label {
+        font-weight: bold; /* Make sidebar button labels bold */
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+
 
-st.sidebar.markdown("<h2 style='color: yellow; text-align: center; border-bottom: 2px solid yellow;'>Explore FIFA World Cup 2022 Data Analysis</h2>", unsafe_allow_html=True)
+# Sidebar
+st.sidebar.markdown("<h2 style='color: yellow; text-align: center; border-bottom: 2px solid yellow; font-weight: bold;'>Explore FIFA World Cup 2022 Data Analysis</h2>", unsafe_allow_html=True)
 
 st.sidebar.markdown("Navigate through below sections:")
 # Page selection buttons
@@ -81,7 +130,6 @@ elif selected_button == 'Feature of Importance & Shap 📊':
     st.session_state.app_mode = 'Feature of Importance & Shap'
 elif selected_button == 'MLflow & Deployment 🚀':
     st.session_state.app_mode = 'MLflow & Deployment'
-
 elif selected_button == 'Conclusion 🏁':
     st.session_state.app_mode = 'Conclusion'