I want the clouds to be like that. You can modify the background for sky atmosphere.

components/background-clouds.js

@@ -15,11 +15,13 @@ class BackgroundClouds extends HTMLElement {
                     width: 100%;
                     height: 100%;
                     pointer-events: none;
-                    z-index: 0;
+                    z-index: 1;
                     overflow: hidden;
+                    background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
+                    animation: sky-pulse 30s ease infinite;
+                    background-size: 200% 200%;
                 }
-                
-                .bg-cloud {
+.bg-cloud {
                     position: absolute;
                     background: white;
                     border-radius: 50%;

script.js

@@ -69,24 +69,52 @@ function createBackgroundClouds() {
     const width = window.innerWidth;
     const height = window.innerHeight;
     
-    for (let i = 0; i < 15; i++) {
+    // Create more subtle background clouds
+    for (let i = 0; i < 25; i++) {
         const cloud = document.createElement('div');
-        const size = Math.random() * 120 + 80;
-        const opacity = Math.random() * 0.7 + 0.3;
+        const size = Math.random() * 200 + 100;
+        const opacity = Math.random() * 0.3 + 0.2;
+        const blur = Math.random() * 10 + 5;
+        const left = Math.random() * width;
+        const top = Math.random() * height * 0.8;
         
         cloud.className = 'bg-cloud';
         cloud.style.width = `${size}px`;
-        cloud.style.height = `${size * 0.6}px`;
+        cloud.style.height = `${size * 0.5}px`;
+        cloud.style.left = `${left}px`;
+        cloud.style.top = `${top}px`;
+        cloud.style.opacity = opacity;
+        cloud.style.filter = `blur(${blur}px)`;
+        cloud.style.animation = `float ${Math.random() * 20 + 10}s ease-in-out infinite`;
+        cloud.style.animationDelay = `${Math.random() * 20}s`;
+        
+        // Add slight color variation
+        const hue = 210 + Math.random() * 20 - 10;
+        cloud.style.background = `hsla(${hue}, 80%, 90%, ${opacity})`;
+        
+        bgContainer.appendChild(cloud);
+    }
+
+    // Add some distant clouds
+    for (let i = 0; i < 10; i++) {
+        const cloud = document.createElement('div');
+        const size = Math.random() * 300 + 150;
+        const opacity = Math.random() * 0.2 + 0.1;
+        
+        cloud.className = 'bg-cloud';
+        cloud.style.width = `${size}px`;
+        cloud.style.height = `${size * 0.4}px`;
         cloud.style.left = `${Math.random() * width}px`;
-        cloud.style.top = `${Math.random() * height}px`;
+        cloud.style.top = `${Math.random() * height * 0.5}px`;
         cloud.style.opacity = opacity;
-        cloud.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`;
-        cloud.style.animationDelay = `${Math.random() * 10}s`;
+        cloud.style.filter = `blur(${Math.random() * 15 + 10}px)`;
+        cloud.style.animation = `float ${Math.random() * 30 + 20}s linear infinite`;
+        cloud.style.animationDelay = `${Math.random() * 30}s`;
+        cloud.style.background = `hsla(210, 60%, 85%, ${opacity})`;
         
         bgContainer.appendChild(cloud);
     }
 }
-
 function createCloud(data, x, y, baseSize) {
 const cloud = document.createElement('div');
         cloud.className = 'cloud';

style.css

@@ -1,12 +1,54 @@
+
+:root {
+  --sky-gradient-start: #87CEEB;
+  --sky-gradient-end: #1E90FF;
+}
+
+body {
+  background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
 @keyframes float {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
 }
 
+@keyframes sky-pulse {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.cloud-container {
+  position: relative;
+  background: transparent;
+}
+
+.cloud {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.5s ease;
+  animation: float 3s ease-in-out infinite;
+  will-change: transform;
+  z-index: 10;
+}
 .cloud {
     position: absolute;
     background: white;