Odtnhj

I made my cursor smaller in CSS and after I noticed when I tried clicking my features I had to place the cursor at least 2cm above to be able to click the object. I cant figure out what I did wrong to make it mis aligned like this. here is my code for my cursor.

 .cursor 
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-transform: translateZ(0) scale(0.11);
 transform: translateZ(0) scale(0.11);
 -webkit-transition: transform 0.2s ease-in-out;
 transition: transform 0.2s ease-in-out;
 transform-origin: center;
 opacity: 0;
 height: 50px;
 width: 50px;


.show-cursor .cursor 
 background-color: theme.button_background_color ;
 border-radius: 50%;
 color: theme.button_text_color ;
 font-family: font_family ;
 font-size: 12px;
 line-height: 50px;
 opacity: 1;
 pointer-events: none;
 position: fixed;
 text-align: center;
 z-index: 1000;

.show-cursor .cursor .cursor-text 
 font-size: 0px;
 line-height: 20px;
 opacity: 0;

.show-cursor .cursor.expanded 
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: height 0.2s ease-in-out width 0.2s ease-in-out;
 transition: height 0.2s ease-in-out width 0.2s ease-in-out;

.show-cursor .cursor.expanded .cursor-text 
 font-size: 12px;
 opacity: 1;

.show-cursor .cursor.small-expanded 
 -webkit-transform: scale(0.15);
 transform: scale(0.15);
 -webkit-transition: height 0.2s ease-in-out width 0.2s ease-in-out;
 transition: height 0.2s ease-in-out width 0.2s ease-in-out;