added movement random to background

adminstyles.css

@@ -882,14 +882,33 @@ Add your custom styles in this file so it is easier to update the theme.
 	height: 100vh;
 }
 
+@keyframes bubble-move {
+
+	from {
+		width: 40vw;
+		height: 40vw;
+		filter: blur(10rem);
+
+		/* transform: rotate(0);*/
+	}
+
+	to {
+		width: 90vw;
+		height: 20vw;
+		filter: blur(20rem);
+
+		/* transform: rotate(5deg);*/
+	}
+}
+
 .edit-post-visual-editor__content-area .bubbles {
 	--size: 40vw;
-	--position: -10vw;
+	--position: -5vw;
+	filter: blur(20rem);
 	position: absolute;
 	width: var(--size);
 	height: var(--size);
-	border-radius: 50%;
+	border-radius: 20%;
-	filter: blur(10rem);
 	background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
 }
 
@@ -897,28 +916,32 @@ Add your custom styles in this file so it is easier to update the theme.
 	top: var(--position);
 	left: var(--position);
 	--bgcolor: var(--bubble-color-01);
-	--bgangle: to bottom right;
+	--bgangle: 135deg;
+	animation: 5s ease-in-out 2s infinite alternate bubble-move;
 }
 
 .edit-post-visual-editor__content-area .bubbles.bubble-02 {
 	top: var(--position);
 	right: var(--position);
 	--bgcolor: var(--bubble-color-02);
-	--bgangle: to bottom left;
+	--bgangle: 225deg;
+	animation: 3s ease-in-out 0s infinite alternate bubble-move;
 }
 
 .edit-post-visual-editor__content-area .bubbles.bubble-03 {
 	bottom: var(--position);
 	left: var(--position);
 	--bgcolor: var(--bubble-color-03);
-	--bgangle: to top right;
+	--bgangle: 45deg;
+	animation: 2s ease-in-out 3s infinite alternate bubble-move;
 }
 
 .edit-post-visual-editor__content-area .bubbles.bubble-04 {
 	bottom: var(--position);
 	right: var(--position);
 	--bgcolor: var(--bubble-color-04);
-	--bgangle: to top left;
+	--bgangle: 325deg;
+	animation: 4s ease-in-out 1s infinite alternate bubble-move;
 }
 
 .edit-post-visual-editor__content-area hr {

sass/base/elements/_body.scss

@@ -17,37 +17,60 @@ body {
 	height: 100vh;
 
 }
+@keyframes bubble-move {
+	from {
+		width: 40vw;
+    height: 40vw;
+	  filter: blur(10rem);
+	 /* transform: rotate(0);*/
+	}
+	to {
+		width: 90vw;
+		height: 20vw;
+	  filter: blur(20rem);
+	 /* transform: rotate(5deg);*/
+	}
+}
 .bubbles {
 	--size: 40vw;
-	--position: -10vw;
+	--position: -5vw;
+  filter: blur(20rem);
 	position:absolute;
 	width: var(--size);
 	height: var(--size);
-	border-radius: 50%;
+	border-radius: 20%;
-	filter: blur(10rem);
+	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
+	//animation: 4s ease-in-out 4s infinite alternate bubble-move;
 	&.bubble-01{
 	  top: var(--position);
 	  left: var(--position);
 	  --bgcolor: var(--bubble-color-01);
-		--bgangle: to bottom right;
+		//--bgangle: to bottom right;
+		--bgangle: 135deg;
+	  animation: 5s ease-in-out 2s infinite alternate bubble-move;
 	}
 	&.bubble-02{
 	  top: var(--position);
 		right: var(--position);
 	  --bgcolor: var(--bubble-color-02);
-		--bgangle: to bottom left;
+		//--bgangle: to bottom left;
+		--bgangle: 225deg;
+	  animation: 3s ease-in-out 0s infinite alternate bubble-move;
 	}
 	&.bubble-03{
 		bottom: var(--position);
 	  left: var(--position);
 	  --bgcolor: var(--bubble-color-03);
-		--bgangle: to top right;
+		//--bgangle: to top right;
+		--bgangle: 45deg;
+	  animation: 2s ease-in-out 3s infinite alternate bubble-move;
 	}
 	&.bubble-04{
 		bottom: var(--position);
 		right: var(--position);
 	  --bgcolor: var(--bubble-color-04);
-		--bgangle: to top left;
+		//--bgangle: to top left;
+		--bgangle: 325deg;
+	  animation: 4s ease-in-out 1s infinite alternate bubble-move;
 	}
-	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
 }

style.css

@@ -747,14 +747,33 @@ body {
 	height: 100vh;
 }
 
+@keyframes bubble-move {
+
+	from {
+		width: 40vw;
+		height: 40vw;
+		filter: blur(10rem);
+
+		/* transform: rotate(0);*/
+	}
+
+	to {
+		width: 90vw;
+		height: 20vw;
+		filter: blur(20rem);
+
+		/* transform: rotate(5deg);*/
+	}
+}
+
 .bubbles {
 	--size: 40vw;
-	--position: -10vw;
+	--position: -5vw;
+	filter: blur(20rem);
 	position: absolute;
 	width: var(--size);
 	height: var(--size);
-	border-radius: 50%;
+	border-radius: 20%;
-	filter: blur(10rem);
 	background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
 }
 
@@ -762,28 +781,32 @@ body {
 	top: var(--position);
 	left: var(--position);
 	--bgcolor: var(--bubble-color-01);
-	--bgangle: to bottom right;
+	--bgangle: 135deg;
+	animation: 5s ease-in-out 2s infinite alternate bubble-move;
 }
 
 .bubbles.bubble-02 {
 	top: var(--position);
 	right: var(--position);
 	--bgcolor: var(--bubble-color-02);
-	--bgangle: to bottom left;
+	--bgangle: 225deg;
+	animation: 3s ease-in-out 0s infinite alternate bubble-move;
 }
 
 .bubbles.bubble-03 {
 	bottom: var(--position);
 	left: var(--position);
 	--bgcolor: var(--bubble-color-03);
-	--bgangle: to top right;
+	--bgangle: 45deg;
+	animation: 2s ease-in-out 3s infinite alternate bubble-move;
 }
 
 .bubbles.bubble-04 {
 	bottom: var(--position);
 	right: var(--position);
 	--bgcolor: var(--bubble-color-04);
-	--bgangle: to top left;
+	--bgangle: 325deg;
+	animation: 4s ease-in-out 1s infinite alternate bubble-move;
 }
 
 hr {