body{
    cursor:none
  }
  
  .rounded{
      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;
      box-sizing: border-box;
      border: 2px dashed var(--primary-color) !important;

      @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) !important;
    transition: border 0.5s ease-in-out !important;
}


.cursor-grow {
  border: 3px solid var(--primary-color);
}

  .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;
    }
  }