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