html {
    color:white;
    font-family: sans-serif;
    background: #DAD299;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #B0DAB9, #DAD299);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #B0DAB9, #DAD299); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

  body {
    margin: 0;
  }

  .hero {
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,0.1);
    font-size: 100px;
  }

var hero = document.querySelector('.hero');
    var text = hero.querySelector('h1');
    var walk = 30;
    
    function shadow(event){
        var width = hero.offsetWidth;
        var height = hero.offsetHeight;
        var x = event.offsetX;
        var y = event.offsetY;
        if (this !== event.target) {
            x = x + event.target.offsetLeft;
            y = y + event.target.offsetTop;
        }
        var xWalk = Math.round((x / width * walk) - (walk / 2));
        var yWalk = Math.round((y / height * walk) - (walk / 2));
        
        text.style.textShadow = xWalk + "px " + yWalk + "px 0 rgba(0,0,0,0.1)";
    }
    
    hero.addEventListener('mousemove', shadow);