#cursor {
    --size: 50px;
    position: fixed;
    top: 0;
    left: 0;
    height: var(--size);
    width: var(--size);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    transform: translate3d(
      calc(100vw * var(--cursor-x) - var(--size) / 2), 
      calc(100vh * var(--cursor-y) - var(--size) / 2), 
      0);
    pointer-events: none;
    z-index: 999;
   
  }
  
  #cursor::after {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }