Update app.py

app.py

@@ -38,14 +38,12 @@ def cloud_button(label, key=None, color=None):
     <style>
         .cloud {{
             position: relative;
-            display: inline-flex;
+            display: inline-block;
             cursor: pointer;
             user-select: none;
             margin-right: 20px;
             font-size: 16px;
-        }}
-        .rectangle, .circle {{
-            background-color: #f8f9fa;  /* Adjust the color as needed */
+            background-color: #f8f9fa;  /* Match the background color of the circles */
         }}
         .rectangle {{
             min-width: 120px;
@@ -62,28 +60,32 @@ def cloud_button(label, key=None, color=None):
         }}
         .circle {{
             position: absolute;
+            background-color: #f8f9fa;  /* Adjust the color as needed */
             z-index: 1;
         }}
         .circle.small {{
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            top: 50%;
+            left: 10px;
+            transform: translateY(-50%);
+        }}
+        .circle.medium {{
             width: 60px;
             height: 60px;
             border-radius: 30px;
-            top: 30px;
-            left: 20px;
-        }}
-        .circle.medium {{
-            width: 100px;
-            height: 100px;
-            border-radius: 50px;
-            top: 10px;
-            left: 10px;
+            top: 50%;
+            left: 30px;
+            transform: translateY(-50%);
         }}
         .circle.large {{
-            width: 140px;
-            height: 140px;
-            border-radius: 70px;
-            top: -10px;
-            left: 0px;
+            width: 80px;
+            height: 80px;
+            border-radius: 40px;
+            top: 50%;
+            left: 50px;
+            transform: translateY(-50%);
         }}
        
         .cloud:hover .rectangle {{