<div class="background"></div>
<h1 contenteditable data-heading="Guru">Guru</h1>

$layer1: #ff6200;
$layer2: #7b2020;
$layer3: #3db564;

html,
body {
  width: 100%;
  height: 100%;
}

.background {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/furu.png);
  background-size: cover;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  position: absolute;
}

h1 {
  font-family: 'nt_gurutwo';
  text-transform: uppercase;
  font-size: 14vw;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  color: $layer1;
  font-weight: normal;
  letter-spacing: 1rem;
  mix-blend-mode: difference;
  transform: translateZ(0) translate(-50%, -50%);
  animation: floating 4s ease-in-out infinite;
  
  &:before,
  &:after {
    content: attr(data-heading);
    position: absolute;
    overflow: hidden;
    left: 0;
    width: 100%;
    font-weight: normal;
  }
  &:before {
      font-family: 'nt_guruthree';
    color: $layer2;
    top: 2px;
  }
  &:after {
    color: $layer3;
    width: 100%;
    font-family: 'nt_gurufive';
    top: 4px;
  }
}

@keyframes floating {
  from {
    transform: translate(-50%, -50%);
  }
  65% {
    transform: translate(-50%, -80%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}

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