Update app.py

app.py

@@ -288,23 +288,46 @@ html_template = '''
         100% { opacity: 0; }
     }
     .balloon {
-        position: fixed;
-        width: 60px;
-        height: 80px;
-        background-size: contain;
-        background-repeat: no-repeat;
-        z-index: 9999;
-        animation: floatUp 12s linear infinite;
+    position: fixed;
+    width: 60px;
+    height: 80px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 9999;
+    animation: floatUp 12s linear infinite;
+    }
+
+    #balloon1 { 
+    background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon1.png"); 
+    left: 10%; 
+    animation-delay: 0s; 
     }
-    #balloon1 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon1.png"); left: 10%; animation-delay: 0s; }
-    #balloon2 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon2.png"); left: 30%; animation-delay: 2s; }
-    #balloon3 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon3.png"); left: 50%; animation-delay: 4s; }
-    #balloon4 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon4.png"); left: 70%; animation-delay: 6s; }
-    #balloon5 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon5.png"); left: 90%; animation-delay: 8s; }
+    #balloon2 { 
+    background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon2.png"); 
+    left: 30%; 
+    animation-delay: 2s; 
+    }
+    #balloon3 { 
+    background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon3.png"); 
+    left: 50%; 
+    animation-delay: 4s; 
+    }
+    #balloon4 { 
+    background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon4.png"); 
+    left: 70%; 
+    animation-delay: 6s; 
+    }
+    #balloon5 { 
+    background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon5.png"); 
+    left: 90%; 
+    animation-delay: 8s; 
+    }
+
     @keyframes floatUp {
-        0% { top: 100%; }
-        100% { top: -20%; }
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-120vh); }
     }
+
     #music-toggle, #next-track {
         position: fixed;
         padding: 8px 12px;