I'm using a script to have a spotlight effect. In the web version it follows the cursor, in the mobile version should it remain static at the center of the page but when I try to fix it there something weird happen and it seems like it goes below something and it's visible only in the upper part of the website.

www.civitonia.com

CSS:

.spotlight {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}

@media only screen and (min-width: 800px) {
  .spotlight {
    position: fixed;
    background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px);
  }
}

Script:

<script>
window.addEventListener("DOMContentLoaded", ()=>{
  const spotlight = document.querySelector('.spotlight');
  let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
  //attach mousemove event listener if media query matches. 
  if (matchMedia('only screen and (min-width: 800px)').matches) {
    window.addEventListener('mousemove', updateSpotlight);

    function updateSpotlight(e) {
      spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
    }
    
  } else {
    spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
  }
});
</script> 

HTML:

<div class="spotlight" style="background-image: radial-gradient(circle at 98.3559% 72.549%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);"></div>

Could someone help me to keep the spotlight fixed (only in the mobile version) at the center of the page? the spotlight must remain the same in the web version (it keeps following the cursor as it does right now)