<!-- Check this pen on a device with mouse -->

<div class='verticalLine'></div>
<div class='horizontalLine'></div>

:root {
  --verticalLineLeft: 50%;
  --horizontalLineTop: 50%;
}

.verticalLine, .horizontalLine {
  position: absolute;
  opacity: 0.8;
}

.verticalLine {
  height: 100%;
  width: 1px;
  border-right: 2px solid white;
  top: 0;
  left: var(--verticalLineLeft); 
}

.horizontalLine {
  width: 100%;
  height: 1px;
  border-bottom: 2px solid white;
  top: var(--horizontalLineTop);
  left: 0; 
}

body {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url(https://galeri14.uludagsozluk.com/833/duck-hunt_1255547.png) center fixed;
    background-size: cover;
}

document.addEventListener("mousemove", e => {
  document.documentElement.style.setProperty('--verticalLineLeft', e.clientX + "px");
  document.documentElement.style.setProperty('--horizontalLineTop', e.clientY + "px");
});

// bonus: flashing the screen on click

document.addEventListener('click', () => {
   const originalBg = window.getComputedStyle(document.body).background
  
  document.body.style.background = 'white'
  setTimeout(() => {
    document.body.style.background = originalBg
  }, 100)
})