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(--background-color-tr);
      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(5px);
    transition: backdrop-filter 0.5s ease-in-out !;
  }

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

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

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

  #cursor-text{
    position: fixed;
    text-align: left;
    text-wrap:nowrap;
    background-color: var(--primary-color);
    color: var(--background-color-primary);
    padding: 1em;
    border-radius: 1em;
    z-index: 10000;
    pointer-events: none;
    scale: 0;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 0 20px 0 var(--background-color-primary);
    &.image-view{
      width: 750px;
      height: 400px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      object-fit: cover;
    }
  }

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