Update app.py

app.py

@@ -27,7 +27,7 @@ def cloud_button(label, key=None, color=None):
     button_id = f"cloud-button-{key or label}"
     color_class = f"color-{color}" if color else ""
     cloud_button_html = f"""
-    <div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 200px;">
+    <div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 20px;">
         <div class="circle small"></div>
         <div class="circle medium"></div>
         <div class="circle large"></div>
@@ -45,46 +45,45 @@ def cloud_button(label, key=None, color=None):
             font-size: 16px;
         }}
         .rectangle, .circle {{
-            background-color: #f8f9fa; /* Set this to the color you want for the cloud */
+            background-color: #f8f9fa;  /* Adjust the color as needed */
         }}
         .rectangle {{
             min-width: 120px;
             height: auto;
             border-radius: 30px;
-            position: absolute;
-            top: 20px;
-            left: 20px;
+            position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: bold;
             padding: 10px 20px;
+            z-index: 2;
             transition: background-color 0.4s;
         }}
         .circle {{
             position: absolute;
-            z-index: -1;
+            z-index: 1;
         }}
         .circle.small {{
-            width: 40px;
-            height: 40px;
-            border-radius: 20px;
-            top: 10px;
-            left: 50px;
+            width: 60px;
+            height: 60px;
+            border-radius: 30px;
+            top: 30px;
+            left: 20px;
         }}
         .circle.medium {{
-            width: 80px;
-            height: 80px;
-            border-radius: 40px;
-            top: -10px;
-            left: 40px;
+            width: 100px;
+            height: 100px;
+            border-radius: 50px;
+            top: 10px;
+            left: 10px;
         }}
         .circle.large {{
-            width: 120px;
-            height: 120px;
-            border-radius: 60px;
-            top: -30px;
-            left: 20px;
+            width: 140px;
+            height: 140px;
+            border-radius: 70px;
+            top: -10px;
+            left: 0px;
         }}
        
         .cloud:hover .rectangle {{