<h1 data-heading="YES"><span data-heading="YES">YES</span></h1>

<!-- Removed content editable temporarily in support of the australian postal vote for same sex marriage --->
$pink: #d61c5b;
$red: #f1573f;
$orange: #feb213;
$green: #6abc4e;
$blue: #2599d8;

html, body {
	background: linear-gradient(45deg, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
	width: 100%;
	height: 100%;
}

h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 20vw;
	text-align: center;
	line-height: 1;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: $blue;
	
	&:before,
	&:after, 
	span:before, 
	span:after {
		content: attr(data-heading);
		position: absolute;
		overflow: hidden;
		left: 0;
	}
	
	&:before {
		color: $pink;
		height: 34%;
		z-index: 5;
	}
	
	&:after {
		color: $red;
		height: 50%;
		z-index: 4;
	}
	
	span {
		&:before {
			color: $orange;
			height: 66%;
			z-index: 3;
		}
		
		&:after {
			color: $green;
			height: 80%;
			z-index: 2;
		}
	}
}

View Compiled
/*
var span = document.querySelector("span");

span.addEventListener("input", function() {
	var text = this.innerText;
	this.setAttribute("data-heading", text);
	this.parentElement.setAttribute("data-heading", text);
});*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.