<h1 contenteditable data-heading="Dimensions">Dimensions</h1>

$color1: #61c0c8;
$color2: #67c2c5;
$color3: white;
$color4: #aff1f9;
html,
body {
	background: #71cad0;
	width: 100%;
	height: 100%;
}

h1 {
	font-family: 'CoreCircus', sans-serif;
	text-transform: uppercase;
	font-size: 10vw;
	text-align: center;
	line-height: 1;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: $color1;
	text-shadow: 1px 0px 0px $color2,
		0px 1px 0px $color2,
		2px 1px 0px $color2,
		1px 2px 0px $color2,
		3px 2px 0px $color2,
		2px 3px 0px $color2,
		4px 3px 0px $color2,
		3px 4px 0px $color2,
		5px 4px 0px $color2,
		4px 5px 0px $color2,
		6px 5px 0px $color2,
		5px 6px 0px $color2,
		7px 6px 0px $color2,
		6px 7px 0px $color2,
		8px 7px 0px $color4,
		7px 8px 0px $color4,
		9px 8px 0px $color4,
		8px 9px 0px $color4,
		10px 9px 0px $color4,
		9px 10px 0px $color4,
		11px 10px 0px $color4,
		10px 11px 0px $color4;
	&:before,
	&:after {
		content: attr(data-heading);
		position: absolute;
		overflow: hidden;
		left: 0;
		top: 0;
	}
	&:before {
		color: $color3;
		width: 100%;
		z-index: 5;
		font-family: 'CoreCircus2DIn';
		font-weight: normal;
	}
	&:after {
		z-index: -1;
		text-shadow: 
			-1px -1px 0 $color3,
			1px -1px 0 $color3, 
			-1px 1px 0 $color3, 
			1px 1px 0 $color3, 
			-3px 3px 2px #6c9d9e, 
			-5px 5px 2px #6c9d9e,
			-7px 7px 2px #6c9d9e,
			-8px 8px 2px #6c9d9e,
			-9px 9px 2px #6c9d9e,
			-11px 11px 2px #6c9d9e;
	}
}


/*
 * Webfont: CoreCircus by S-Core
 * URL: http://www.myfonts.com/fonts/s-core/core-circus/regular/
 * Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
 * Licensed pageviews: 10,000
*
 * Webfont: CoreCircus2DIn by S-Core
 * URL: http://www.myfonts.com/fonts/s-core/core-circus/in/
 * Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
 * Licensed pageviews: 10,000
*/

@font-face {
	font-family: 'CoreCircus2DIn';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BFA_1_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BFA_1_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BFA_1_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BFA_1_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BFA_1_0.ttf') format('truetype');
}

@font-face {
	font-family: 'CoreCircus';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf') format('truetype');
}

// JS is to make the text editable, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});