Add background bubbles

Author: tomups

style.css

@@ -43,30 +43,57 @@ body {
 body::before {
     content: '';
     position: fixed;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at 35% 35%, rgba(78, 205, 196, 0.06) 0%, transparent 70%),
-                radial-gradient(circle at 65% 65%, rgba(255, 107, 107, 0.06) 0%, transparent 70%),
-                radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.04) 0%, transparent 70%);
-    animation: globalGlow 12s ease-in-out infinite;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 120%;
+    background: 
+        radial-gradient(circle 60px at 15% 20%, rgba(78, 205, 196, 0.6) 0%, transparent 70%),
+        radial-gradient(circle 80px at 85% 40%, rgba(255, 215, 0, 0.5) 0%, transparent 70%),
+        radial-gradient(circle 40px at 50% 15%, rgba(255, 107, 107, 0.5) 0%, transparent 70%),
+        radial-gradient(circle 70px at 75% 35%, rgba(149, 225, 211, 0.5) 0%, transparent 70%),
+        radial-gradient(circle 50px at 25% 60%, rgba(255, 182, 193, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 45px at 60% 80%, rgba(78, 205, 196, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 55px at 35% 100%, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
+    animation: bubblesFloat 15s linear infinite;
     z-index: -1;
     pointer-events: none;
 }
 
-@keyframes globalGlow {
-    0%, 100% { 
-        transform: translate(0, 0) scale(1);
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 120%;
+    background: 
+        radial-gradient(circle 90px at 30% 10%, rgba(78, 205, 196, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 45px at 70% 25%, rgba(255, 215, 0, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 65px at 10% 45%, rgba(255, 107, 107, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 55px at 90% 65%, rgba(149, 225, 211, 0.4) 0%, transparent 70%),
+        radial-gradient(circle 40px at 80% 85%, rgba(255, 182, 193, 0.3) 0%, transparent 70%),
+        radial-gradient(circle 60px at 20% 110%, rgba(255, 107, 107, 0.3) 0%, transparent 70%);
+    animation: bubblesFloat 20s linear infinite;
+    animation-delay: -10s;
+    z-index: -2;
+    pointer-events: none;
+}
+
+@keyframes bubblesFloat {
+    0% { 
+        transform: translateY(20%);
+        opacity: 0;
+    }
+    10% { 
         opacity: 1;
     }
-    33% { 
-        transform: translate(10px, -10px) scale(1.02);
-        opacity: 0.9;
+    90% { 
+        opacity: 1;
     }
-    66% { 
-        transform: translate(-10px, 10px) scale(0.98);
-        opacity: 0.95;
+    100% { 
+        transform: translateY(-30%);
+        opacity: 0;
     }
 }