<header>
	<h2 contentEditable role='textbox' aria-multiline='true'>And stay alive...</h2>
</header>

* { margin: 0; padding: 0 }

header {
	overflow: hidden;
	height: 100vh;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg) 50%/ cover
}

h2 {
	color: white;
	mix-blend-mode: difference;
	font: 900 35vmin/35vh cookie, cursive;
	text-align: center
}

/*
NO JS here

Created for my Methods for Contrasting Text Against Backgrounds (https://css-tricks.com/methods-contrasting-text-backgrounds/) article on CSS-Tricks - check it out for context!

Also used in my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/