Update src/utils.py

src/utils.py

@@ -101,20 +101,23 @@ def load_background_image():
         st.markdown(
             f"""
             <style>
+            /* Import Bitcount Grid Double font */
+            @import url('https://fonts.cdnfonts.com/css/bitcount-grid-double');
+            
             /* Background container with image */
             .bg-container {{
                 position: relative;
                 background-image: url("data:image/png;base64,{base64_image}");
-                background-size: cover;
+                background-size: container;
                 background-position: center;
-                background-repeat: no-repeat;
-                height: 150px;
+                height: 150px;  /* Adjust the height of the background */
                 width: 100%;
                 margin: 0 auto;
-                filter: contrast(110%) brightness(210%);
-                border-radius: 100px;
+                filter: contrast(110%) brightness(210%); /* Dim the brightness of the image */
+                border-radius: 100px;  /* Makes the container's corners rounded */
                 overflow: hidden;  
             }}
+    
             /* Overlay for dimming effect */
             .bg-container::after {{
                 content: '';
@@ -123,21 +126,23 @@ def load_background_image():
                 left: 0;
                 width: 100%;
                 height: 100%;
-                background-color: rgba(20, 10, 20, 0.44);
-                z-index: 1;
+                background-color: rgba(20, 10, 20, 0.44); /* Semi-transparent black overlay */
+                z-index: 1; /* Ensure the overlay is above the image */
             }}
-            /* Overlay title styling */
+    
+            /* Overlay title styling with Bitcount Grid Double font */
             .overlay-title {{
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-                color: black;
+                color: black;   /* Title color */
+                font-family: 'Bitcount Grid Double', 'Courier New', monospace !important;
                 font-size: 50px;
                 font-weight: bold;
-                text-shadow: 1px 1px 3px rgba(255, 255, 255, .0);
+                text-shadow: 1px 1px 3px rgba(255, 255, 255, .0); /* Shadow for better visibility */
                 text-align: center;
-                z-index: 2;
+                z-index: 2; /* Ensure the title is above the overlay */
             }}
             </style>
             """,