Cfrgtkky

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: {{ theme.secondary_font | 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;

}