Update src/style.css

src/style.css

@@ -17,6 +17,23 @@ html, body {
   z-index: 0;
   
 }
+@keyframes floatAround {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(50px, -30px) scale(1.2);
+  }
+  50% {
+    transform: translate(-40px, 60px) scale(1.1);
+  }
+  75% {
+    transform: translate(30px, -50px) scale(1.3);
+  }
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+}
 
 .circle {
   position: absolute;
@@ -25,12 +42,14 @@ html, body {
   background: radial-gradient(circle, #009fe3, #36ba01);
   border-radius: 50%;
   opacity: 0.1;
-  animation: float 6s ease-in-out infinite;
+  animation: floatAround 10s ease-in-out infinite;
   filter: blur(30px);
 }
 
+
+
 .circle:nth-child(1) {
-  top: 15%;
+  top: 10%;
   left: 20%;
   animation-delay: 0s;
 }
@@ -44,6 +63,21 @@ html, body {
   left: 30%;
   animation-delay: 8s;
 }
+.circle:nth-child(4) {
+  top: 40%;
+  left: 50%;
+  animation-delay: 2s;
+}
+.circle:nth-child(5) {
+  top: 70%;
+  left: 10%;
+  animation-delay: 6s;
+}
+.circle:nth-child(6) {
+  top: 20%;
+  left: 80%;
+  animation-delay: 1s;
+}
 
 @keyframes float {
   0%, 100% {