@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Grotesk:wght@300..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root{

    /* COLORS */
    --bg-color: rgba(1, 1, 1, 0.95);
    --text-color: #ffffff;
    --primary-color: #9B59B6;
    --secondary-color: rgba(155, 89, 182, 0.2);
    --hover-color: #E74C3C;

    /* FONTS */
    --font-family: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><circle cx="8" cy="8" r="4" fill="rgb(233, 85, 246)"/></svg>')
      8 8,
    auto;
}

#cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin-top: -10px;
  margin-left: -10px;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}