Update style.css

style.css

@@ -1,5 +1,6 @@
 body {
     font-family: Arial, sans-serif;
+    background: linear-gradient(to bottom, #aeeeee, #006699); /* Water-like gradient */
 }
 
 .tabs {
@@ -44,12 +45,29 @@ body {
     background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7), rgba(173,216,230,0.5));
     border-radius: 50%;
     position: absolute;
+    bottom: -50px; /* Start below the view */
     bottom: 0;
     animation: floatUp 5s infinite;
     text-align: center;
     line-height: 100px;
     cursor: pointer;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    transition: transform 0.2s ease-in-out;
+}
+/* Bubble animation */
+@keyframes floatUp {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-500px); } /* Float higher */
+}
+
+/* Burst effect */
+.burst {
+    animation: burst 0.5s forwards; /* Create a burst animation */
+}
+
+@keyframes burst {
+    0% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(2); opacity: 0; }
 }
 
 .modal {