:root {
  --cc-dot-size: 8px;
  --cc-ring-size: 40px;
  --cc-dot-color: #000000;
  --cc-ring-color: #000000;
  --cc-ring-border-width: 2px;
  --cc-ring-lerp: 0.12;
  --cc-mix-blend-mode: normal;
  --cc-hover-scale: 1.5;
  --cc-hover-dot-color: #000000;
  --cc-hover-ring-color: #000000;
}

#cc-cursor {
  pointer-events: none;
}

.cc-dot,
.cc-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: var(--cc-mix-blend-mode);
}

.cc-dot {
  width: var(--cc-dot-size);
  height: var(--cc-dot-size);
  background: var(--cc-dot-color);
  border-radius: 50%;
  margin-left: calc(var(--cc-dot-size) * -0.5);
  margin-top: calc(var(--cc-dot-size) * -0.5);
  transition:
    background 0.2s ease,
    opacity 0.25s ease;
}

.cc-ring {
  width: var(--cc-ring-size);
  height: var(--cc-ring-size);
  border: var(--cc-ring-border-width) solid var(--cc-ring-color);
  border-radius: 50%;
  margin-left: calc(var(--cc-ring-size) * -0.5);
  margin-top: calc(var(--cc-ring-size) * -0.5);
  transition:
    border-color 0.2s ease,
    opacity 0.25s ease;
}

.cc-is-hovering .cc-dot {
  background: var(--cc-hover-dot-color);
}

.cc-is-hovering .cc-ring {
  border-color: var(--cc-hover-ring-color);
}