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: var(--accent-transparent);
      z-index: 10000;
      pointer-events: none;
  }

  a:hover{
    cursor: none;
  }

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

  .cursor-normal{
    border: 1px solid #ffffff22;
    transition: border 0.5s ease-in-out;
  }

  .cursor-grow{
    border: 5px solid var(--accent);
    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) */