Eye follow cursor - screen sizing help

Hi there - I’m pretty new to webflow, and honestly kind of scrapping different lessons and bits of info together to build my site (mainly just to learn first. I know i might not be doing things exactly right, as you may see in my public share link).

One thing I’ve managed to do is create an interaction where the iris of an eye follows my cursor on the homepage for my portfolio; made with two different div groups (eyeball, and pupil). I positioned the pupil as ‘absolute’ and had to put it in a specific spot on my screen to be centered, but obviously this causes issues for people if they’re on different desktop screens.

Can anyone help me learn the best way to go about making this kind of interaction, but so that the eye is always centered on my links, even if the page is larger/smaller for desktop? It looks to me like the eyeball itself stays centered, and is responsive with the screen size, but the pupil/iris itself is not, and gets shifted to the side if you make the page smaller, for instance.

Any help is greatly appreciated! I know i’m a beginner at this, so any info is really helpful!

Here is my public share link: https://preview.webflow.com/preview/jess-portfolio-site?utm_medium=preview_link&utm_source=dashboard&utm_content=jess-portfolio-site&preview=2b76601bfc1dfa87a8f8f2cbe463d004&workflow=preview