added background colors as css elements

sass/base/elements/_body.scss

@@ -1,8 +1,66 @@
 body {
   background: $color__background-body; // Fallback for when there is no custom background color defined.
-  background-image: url(./assets/img/background-colors-02.jpg);
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
+  //background-image: url(./assets/img/background-colors-02.jpg);
+  //background-size: cover;
+  //background-position: center center;
+  //background-repeat: no-repeat;
+  position: relative;
+}
+.liquid {
+	overflow: hidden;
+	float: left;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1000;
+	width: 100vw;
+	height: 100vh;
 
 }
+.bubble {
+	--size: 40vw;
+	--position: -10vw;
+	position:absolute;
+	width: var(--size);
+	height: var(--size);
+	border-radius: 50%;
+	filter: blur(10rem);
+	&.top {
+	  top: var(--position);
+  }
+	&.bottom {
+		bottom: var(--position);
+	}
+	&.left {
+	  left: var(--position);
+	}
+	&.right {
+		right: var(--position);
+	}
+	&.top.left{
+		--bgangle: to bottom right;
+	}
+	&.top.right{
+		--bgangle: to bottom left;
+	}
+	&.bottom.left{
+		--bgangle: to top right;
+	}
+	&.bottom.right{
+		--bgangle: to top left;
+	}
+
+	&.red{
+	  --bgcolor: rgb(255,0,0);
+	}
+	&.yellow{
+	  --bgcolor: rgb(255,0,255);
+	}
+	&.blue{
+	  --bgcolor: rgb(0,0,255);
+	}
+	&.green{
+	  --bgcolor: rgb(0,255,0);
+	}
+	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
+}