Update app.py

app.py

@@ -25,7 +25,86 @@ component_img_encoded = encode_image("Images/UML/component.png")
 colab_img_encoded = encode_image("Images/UML/colab.png")
 activity_img_encoded = encode_image("Images/UML/activity.png")
 
-with gr.Blocks(theme=gr.themes.Ocean(font=[gr.themes.GoogleFont("Noto Sans")]), css='footer {visibility: hidden}') as main_interface:
+css = '''
+    /* Header Styling */
+    h3, h4 {
+        margin-top: 1.2em;
+        margin-bottom: 0.6em;
+        font-weight: bold;
+    }
+
+    h3 {
+        font-size: 1.7em;
+        border-bottom: 2px solid #00b9c2;
+        color: 00b9c2;
+        padding-bottom: 0.3em;
+        margin-bottom: 1em;
+    }
+
+    h4 {
+        font-size: 1.5em;
+    }
+    
+    code {
+        color: rgb(202 253 255);
+    }
+    
+    code1{
+        color: #00b9c2;
+    }
+    
+    /* Text Emphasis */
+    p, li {
+        text-align: justify;
+        margin: 0.6em 0;
+        font-size: 1.2em;
+    }
+
+    em {
+        color: #6c757d;
+        font-style: italic;
+    }
+
+    /* List Styling */
+    ul {
+        padding-left: 1.2em;
+        margin-bottom: 1em;
+    }
+
+    li {
+        margin-bottom: 0.5em;
+    }
+
+    /* Link Styling */
+    a {
+        color: #007bff;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    /* Image Styling */
+    img {
+        border-radius: 8px;
+        box-shadow: -8px 8px 20px 0px rgb(0 185 194)
+        i
+    }
+
+    /* Divider Styling */
+    hr {
+        border: 0;
+        height: 1px;
+        background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+        margin: 1.5em 0;
+    }
+
+footer {visibility: hidden}
+'''
+
+
+with gr.Blocks(theme=gr.themes.Ocean(font=[gr.themes.GoogleFont("Noto Sans")]), css=css) as main_interface:
     gr.Markdown("# Welcome to The Linguistic Lens 👓🗣️")
     with gr.Tabs():
         with gr.TabItem("Intro"):