<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);
});