const hero = document.querySelector('.hero');

const text = hero.querySelector('h1');

const walk = 100;

function shadow(e) {

const { offsetWidth: width, offsetHeight: height } = hero;

let { offsetX: x, offsetY: y} = e;

if (this !== e.target) {

x += e.target.offsetLeft;

y += e.target.offsetTop;

}

const xWalk = Math.round((x / width * walk) - (walk / 2));

const yWalk = Math.round((y / height * walk) - (walk / 2));

text.style.textShadow = `

${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),

${xWalk * -1}px ${yWalk}px 0 rgba(139,17,47,0.6),

${yWalk}px ${xWalk * -1}px 0 rgba(15,32,44,0.3),

${yWalk * -1}px ${xWalk * -1}px 0 rgba(142,98,104,0.8)

`;

}

hero.addEventListener('mousemove', shadow);