<h1 data-heading="Magic">
		<span contenteditable data-heading="Magic">Magic</span>
	</h1>

<!-- Thank you Jamie Clarke for allowing me to use the font for my demo!! You rock. -->

$red: #fe4560;
$blue: #98b5cc;

html,
body {
	background: #e4e2f2;
	width: 100%;
	height: 100%;
}

$face: #91d4ff;
$flourish: #fff;
$shadowdots: #040351;
$shadow: #4d8bea;
$shadow2: #cbc7e3;

h1 {
	font-family: 'Rig Bold Face', sans-serif;
	text-transform: uppercase;
	font-size: 18vw;
	text-align: center;
	font-weight: normal;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: $face;

	&:before,
	&:after, 
	span:before, 
	span:after {
		content: attr(data-heading);
		position: absolute;
		overflow: hidden;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 5;
		font-weight: normal;
		text-shadow: none;
	}
	
	&:before {
 		color: $flourish;
 		font-family: 'Rig Bold Inline', sans-serif;
	}
	
	&:after {
 		font-family: 'Rig Bold Coarse', sans-serif;
 		color: $shadowdots;
	}
}

span {
	&::before {
		font-family: 'Rig Bold Shadow', sans-serif;
		color: $shadow2;
		z-index: -1;
	}
	
	&::after {
		font-family: 'Rig Bold Extrude', sans-serif;
		color: $shadow;
		z-index: -1;	
	}
	
}



@font-face {
	font-family:'Rig Bold Coarse'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldCoarse.otf');
}

@font-face {
	font-family:'Rig Bold Extrude'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldExtrude.otf');
}

@font-face {
	font-family:'Rig Bold Shadow'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldShadow.otf');
}

@font-face {
	font-family:'Rig Bold Face'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldFace.otf');
}

@font-face {
	font-family:'Rig Bold Inline'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldInline.otf');
}

// JS for content editable trick from Chris Coyier
var span = document.querySelector("span");

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