body{
    cursor:none
  }
  
  .rounded{
      /* https://codepen.io/developeraspire5/pen/gOGjeZG */
      position: fixed;
      top: -25px;
      left: -25px;
      width: 50px;
      height: 50px;
      border-radius: 50% !important;
      /* background-color: #c3c3c388; */
      z-index: 10000;
      pointer-events: none;
      transition: outline 0.5s ease-in-out;

      @media screen and (max-width: 500px){
        display: none !important;
      }
  }

  a:hover{
    cursor: none;
  }

  .blur{
    backdrop-filter: blur(0.1px);
    transition: backdrop-filter 0.5s ease-in-out !;
  }

  .cursor-normal{
    outline:2px dashed var(--skin-color);
    transition: border 0.5s ease-in-out;
  }

  .cursor-grow{
    outline: 3px solid var(--skin-color);
    transition: border 0.5s ease-in-out;
  }

  .blur-mini{
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.5s ease-in-out;
  }

  /* Paste 
            <div class="cursor rounded move" id="cursor"></div>
    in your html under body (preferably in container) */