body {
	/* essential styling */
	height: calc(100vh - 1em);
	background: 
		linear-gradient(var(--angle, 0deg), 
    		#ff9800 50%, #3c3c3c 0);
	
	&:after { /* just to prettify stuff */
		
		/* use absolute positioning because 
		 * margin: 0 on body 
		 * breaks Edge for some reason */
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		font: calc(16vmin + 3rem)/ 100vh Leckerli One, 
			cursive;
		text-align: center;
		cursor: pointer;
		content: 'Click!';
		
		@supports (mix-blend-mode: screen) {
			/* in supports because 
 		 	 * background: inherit 
		 	 * breaks Edge for some reason 
		 	 * (sorry, I had no better idea) */
			
			background: inherit;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			filter: invert(1) grayscale(1) contrast(3)
		}
	}
}

const NF = 50;

let rID = null, f = 0;

function stopAni() {
  cancelAnimationFrame(rID);
  rID = null;  
};

function update() {
	let k = ++f/NF;
  
  document.body.style.setProperty(
		'--angle', 
		`${+(k*180).toFixed(2)}deg`
	);
  
  if(!(f%NF)) {
		f = f%(2*NF);
    stopAni();
    return;
  }
  
  rID = requestAnimationFrame(update);
};

addEventListener('click', e => {
  if(!rID) update();
}, false);