Note: PLEASE do not just direct me to Cursors 4 U. I know it's a great resource. Unfortunately it didn't have any ones that I want for my den, so I have to just *puts on Thanos glove* do it myself.

I'm very very new to HTML and CSS. I actually only started learning it so that I could have a pretty den like all of the cool kids, if I'm being honest For the most part things are going smoothly, but custom cursors are giving me some trouble. I want to change the images for both the default cursor and the pointer for hovering over links. My code currently looks like this:

body {
cursor: url('image1.png'), auto;
}

body, a:hover {
cursor: url('image2.png'), progress;
}

With image1.png intended for the default cursor and image2.png intended for just the pointer. However, image2.png is being used for both of them. I've looked in so many places and also tried many different lines. This is the first one I've tried that even gave me an image for the pointer at all. Can anybody lend a hand and let me know what I'm doing wrong?