Update app.py

app.py

@@ -11,7 +11,7 @@ with open("gita_techies_18_chapters.json", "r", encoding="utf-8") as f:
 with open("bg.png", "rb") as img_file:
     b64_bg_img = base64.b64encode(img_file.read()).decode()
 
-# Function to get a Gita tech entry
+# Function to display one entry
 def get_gita_tech():
     entry = random.choice(gita_for_techies)
     return f"""
@@ -34,62 +34,49 @@ def get_gita_tech():
       <pre><code>{entry["code_snippet"]}</code></pre>
 
       <hr style="margin-top: 30px;">
-      <p style="text-align:center;font-size:0.9rem;">🌸 Made with 💜 by <b>Sreelekha Putta</b></p>
+      <p style="text-align:center;font-size:3.5vw;">🌸 Made with 💜 by <b>Sreelekha Putta</b></p>
     </div>
 
     <style>
       .content {{
         background: rgba(20, 15, 35, 0.92);
-        padding: 20px;
-        border-radius: 18px;
+        padding: 5vw;
+        border-radius: 5vw;
+        width: 92vw;
         max-width: 800px;
-        margin: 0 auto 30px auto;
+        margin: 0 auto 6vw auto;
         box-shadow: 0 0 20px #ab71f7;
         color: #ffffff !important;
         font-family: 'Segoe UI', sans-serif;
-        animation: fadeIn 1.5s ease forwards;
         text-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
         word-wrap: break-word;
         overflow-wrap: break-word;
+        font-size: 4vw;
+        line-height: 1.7;
+      }}
+      .content h2 {{
+        font-size: 5.5vw;
+        margin-bottom: 4vw;
+        color: #d9b2ff;
       }}
       pre {{
         background: #0e0e23;
         color: #e0f2fe;
-        padding: 12px;
-        border-radius: 10px;
-        font-size: 0.95rem;
+        padding: 3vw;
+        border-radius: 3vw;
+        font-size: 3.5vw;
         overflow-x: auto;
         box-shadow: 0 0 10px rgba(255,255,255,0.1);
         text-shadow: none;
       }}
-      @keyframes fadeIn {{
-        from {{opacity: 0; transform: translateY(20px);}}
-        to {{opacity: 1; transform: translateY(0);}}
-      }}
-      @media screen and (max-width: 600px) {{
-        .content {{
-          padding: 14px;
-          font-size: 0.94rem;
-          line-height: 1.6;
-        }}
-        h2 {{
-          font-size: 1.5rem;
-        }}
-        pre {{
-          font-size: 0.85rem;
-        }}
-        body {{
-          padding: 10px;
-        }}
-      }}
     </style>
     """
 
-# CSS with fixed background
+# CSS block
 css = f"""
 body {{
     margin: 0;
-    padding: 20px;
+    padding: 0;
     min-height: 100vh;
     background-image: url("data:image/png;base64,{b64_bg_img}");
     background-size: cover;
@@ -98,6 +85,7 @@ body {{
     background-attachment: fixed;
     font-family: 'Segoe UI', sans-serif;
 }}
+
 body::before {{
     content: "";
     position: fixed;
@@ -105,26 +93,29 @@ body::before {{
     background: rgba(0,0,30,0.7);
     z-index: -1;
 }}
+
 h1 {{
     text-align: center;
     color: #e7c1ff;
-    font-size: 2.5rem;
+    font-size: 6vw;
     font-weight: 700;
-    margin-bottom: 20px;
+    margin: 6vw 4vw 4vw 4vw;
     text-shadow: 0 0 15px #c084fc;
 }}
+
 button {{
     background-color: #a855f7;
     border-radius: 12px;
     color: white;
     font-weight: 600;
-    font-size: 1.3rem;
-    padding: 0.8rem 2.4rem;
+    font-size: 4.5vw;
+    padding: 3vw 7vw;
     border: none;
     cursor: pointer;
-    margin-bottom: 30px;
+    margin-bottom: 6vw;
     box-shadow: 0 0 18px #a78bfa88;
 }}
+
 button:hover {{
     background-color: #d8b4fe;
     color: black;
@@ -132,7 +123,7 @@ button:hover {{
 }}
 """
 
-# Gradio interface
+# Gradio app
 with gr.Blocks(css=css) as app:
     gr.Markdown("<h1>💻 Bhagavad Gita for Techies 💻</h1>")
     output = gr.HTML()