.cursor svg { 
    stroke: black; 
    stroke-width: 0.5;
    stroke-linejoin: round; 
    transform: translate(-26.6667px, -5.3333px);
}
.cursor p {
    text-align: center;
    transform: translate(-50%, -20px);
}
.cursor p.anonymous { font-size: 50%; opacity: 0.5; }

@keyframes clickdot-expand {
    from { width: 0px; height: 0px; opacity: 1; transform: translate(0px, 0px); }
    to { width: 64px; height: 64px; opacity: 0; transform: translate(-32px, -32px); }
}
.clickdot {
    position: absolute;
    animation: clickdot-expand ease-out forwards 0.5s;
    border-radius: 50%;
    border: 4px solid var(--color);
    transform: translate(-2px, -2px);
}
@keyframes clickdot-expand {
    from { width: 0px; height: 0px; opacity: 1; transform: translate(0px, 0px); }
    to { width: 64px; height: 64px; opacity: 0; transform: translate(-32px, -32px); }
}
@keyframes hoverdot-expand {
    from { border-width: 4px; opacity: 0.5; }
    to { border-width: 0px; opacity: 0; }
}
.clickdot.hover, .clickdot.drag { animation: hoverdot-expand ease-out forwards 0.5s; }
.clickdot.release, .clickdot.hover { border: 4px solid gray; }
.trail {
    position: absolute;
    z-index: -1;
}

.brush-cursor {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    opacity: 0.5;
}