Custom cursor - how do I have it used more consistently used within a website?

Site URL: https://www.aligma.io/

Site linked above. Password is aliGMA2022!

This is for a client site. I like the custom cursor I have applied to the site, however it is not working half the time (until I scroll down to almost the end of the home page does it apply). Whenever I hover over clickable links too, it reverts back to the default cursor - is there any way to have it applied (or even change colour) when it hovers over a clickable link?

Would love the community's help on this one. Thankyou!

I use this code for one page in a code block. For all pages put it in custom css with the url of your cusor. It will revert back to hand or default pointer on a clickable element of your site. I think  you need that so folks know that it is a call to some kind of action. Add the url of the cursor image of course. 

body {
        cursor: url(),  auto;
      }

You can't just change the cursor color on hover but you can use a second cusor image that is a different color and change to that on hover, add the url of the second image to do so. 

For Cursor on Hover:

 a:hover{

cursor: url(), auto;

}