Custom Invert dot cursor

Site URL: https://lukaseriksen.com

Hey guys, I'm currently creating my first website and I'm struggling to integrate a custom inverted cursor on to my site. I found this bit of code digging through another squarespace site, but it doesn't seem to be working on my site. I think the main problem is that "mix-blend-mode: difference" does not seem to be working. I would be super dooper grateful if anyone could help me out with installing this bit of code.

My Website: lukaseriksen.com

Here is the code I've found:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Hey Man! I saw that you've integrated the dot cursor. How didi you fix the bug that It doesn't appear?

Thanks