:root {
    color-scheme: dark;
    --size: 3rem;
    --rounded: 10px;
  }
  
  body {
    
    cursor: none; /* Hide the default cursor */
  }
  
  #mouse-follower,
  #dot {
    opacity: 1;
    top: -10px;
    left: -10px;
    transform: translate(-50%, -50%);
    border-radius: var(--rounded);
    position: fixed;
    transition: 100ms ease-in-out;
    pointer-events: none;
    z-index: 9999;
  }
  
  #mouse-follower {
    height: var(--size);
    width: var(--size);
    border: 2px solid white;
  }
  
  #dot {
    height: calc(var(--size) / 3);
    width: calc(var(--size) / 3);
    background: white;
  }

  /* Sample content to demonstrate the cursor working over elements */
  .content {
    max-width: 800px;
    margin: 40px auto;
  }

  .box {
    background-color: #333;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }