*,
*:before,
*:after { 
	margin: 0; 
	padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: radial-gradient(circle, #484848, #2f3031);
	color: transparent;
	min-height: 100vh;
  overflow:hidden;
}
body:before,
body:after {
	bottom: 0;
	display: block;
	height: 25vw;
	left: 0;
	margin:auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 25vw;
}
body:before {
	content:"CSS is awesome";
	color: black;
	font: 700 7vw/7.5vw Arial, sans-serif;
	padding: 1.5vw;
	text-transform: uppercase;
	text-align: left;
	z-index: 2;
}
body:after {
	background-color: white;
	border: .5vw solid black;
  box-shadow: 0 0 2vw black;
	content: "";
	z-index: 1;
}
@supports (mix-blend-mode: difference){
  body:before {
    color: white;
    mix-blend-mode: difference;
  }
}

let anim;
let gpu = new GPU();
let kernel = gpu.createKernel(function(from, to) {
		let tX = this.thread.x / this.dimensions.x;
		let tY = this.thread.y / this.dimensions.y;
		this.color(
				mix(from[0], to[0], tX),
				mix(from[1], to[1], tY),
				mix(from[2], to[2], tX)
			);
	}, {
		dimensions: [ window.innerWidth, window.innerHeight ],
		graphical: true
	});

document.body.appendChild(kernel.getCanvas());

window.addEventListener('resize', () => {
	kernel.dimensions([
			window.innerWidth,
			window.innerHeight
		]);
});

function draw() {
	
	let time = Date.now() / 1000;
	let cos = Math.cos(-time);
	let sin = Math.sin(time * 1.5);
	let c = (cos + 1) / 2;
	let s = (sin + 1) / 2;
	
	kernel(
		[ 1.0, c, 0.25 ],
		[ 0.25, 1.0, s ]
	);
	
	anim = requestAnimationFrame(draw);
}

anim = requestAnimationFrame(draw);