.blob-frame {
	height: 100%;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	-webkit-backface-visibility: hidden;
}

.blob {
	opacity: .3;
	position: absolute;
	left: -145vw;
	background: linear-gradient(to bottom, rgba(51,56,255,1) 0%,rgba(255,51,102,1) 100%);
  width: 200vw;
	height: 200vw;
	border-radius: 43%;
	animation: blob 25s infinite linear;
	z-index: -1;
	overflow: hidden;
  will-change: transform;
  transition: all 1s ease;
}

.blob.-two {
	opacity: .4;
  animation: blob 20s infinite linear;
  width: 202vw;
  height: 202vw;
    
}

@keyframes blob {
	to { transform: rotate(0deg) translateZ(0) rotateZ(360deg); }
	from { transform: rotate(360deg) translateZ(0) rotateZ(360deg); }
}


/* ==========================================================================
   Responsiveness
   ========================================================================== */
   
@media screen and (max-width: 650px){
	.blob {
		width: 300vw;
		height: 300vw;
		left: -250vw;
	}
	.blob.-two{
		width: 292vw;
		height: 292vw;
	}
}