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;
  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,255,0);
	}
	&.blue{
	  --bgcolor: rgb(0,0,255);
	}
	&.green{
	  --bgcolor: rgb(0,255,0);
	}
	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
}