:root {
    --x: 0px;
    --y: 0px;
    --rot: 0deg;
  }

  #avoider {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) rotate(var(--rot));;
    will-change: transform;
    transform-style: preserve-3d;
    pointer-events: none; /* optional: allows pointer to reach underlying elements */
    touch-action: none;
    font-size: 5rem;
    color: white;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    #avoider { transition: none; }
  }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(120deg, #ff7a00, #7f00ff);
    background-size: 200% 200%;
    animation: gradientShift 20s ease-in-out infinite alternate;
}