Moving Shadow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Text Shadow Mouse Move Effect</title>

  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <h1 class="title">Candy canes pastry cookie</h1>
  <h2 class="subtitle">Donut apple pie roll gingerbread</h2>

  <script src="./scripts.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

:root {
  --x: 20px;
  --y: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, #1488cc, #2b32b2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

.title, .subtitle {
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: var(--x) var(--y) 10px rgba(0, 0, 0, .5);
}

.title {
  font-size: 60px;
  margin-bottom: 30px;
}

.subtitle {
  font-size: 40px;
}

@media screen and (max-width: 500px) {
  .title { font-size: 50px; }
  .subtitle { font-size: 30px; }
}

function moveShadow(e) {
  let x = (40 * e.pageX / window.innerWidth) - 20,
      y = (40 * e.pageY / window.innerHeight) - 20;

  document.documentElement.style.setProperty('--x', `${x}px`);
  document.documentElement.style.setProperty('--y', `${y}px`);
}

window.addEventListener('mousemove', moveShadow);