* {
    cursor: none !important;
}

.cursor{
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    will-change: transform;
}

.cursor .dottedBorder{
    width: 2rem;
    height: 2rem;
    border: 2px dotted var(--text-color);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    /* transform: translate(-50%, -50%); */
    transform-origin: center;
    animation: cursorRotate 5s linear infinite;
}

@keyframes cursorRotate{
    0% {
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.cursor .dottedBorder .pointer{
    width: .3rem;
    height: .3rem;
    background: var(--text-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
    animation: counterRotate 5s linear infinite;
    transition: all .2s;
}

@keyframes counterRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.cursor .dottedBorder .pointer.active{
    width: 1.3rem;
    height: 1.3rem;
}