*{
    cursor: none;
}
/* cursor style */
.cursor {
    position: fixed;
    z-index: 9999; /* make sure the cursor is on top of everything */
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: white;
    mix-blend-mode: difference;
    transform-origin: 50% 50%;
    clip-path: polygon(50% 25%, 75% 50%, 50% 75%, 25% 50%);
    transition: clip-path 0.17s ease-out;
    pointer-events: none;
}

.cursor_ring {
    position: fixed;
    z-index: 9999; /* make sure the cursor is on top of everything */
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    mix-blend-mode: difference;
    pointer-events: none;
    border: 1px solid white;
    transform-origin: 50% 50%;
    transition: transform 0.2s ease-out, width 0.17s ease-out, height 0.17s ease-out, opacity 0.17s ease-out;
    transform: translate(calc(-50% + 5px), calc(-50% + 5px));
}

.clickring {
    position: absolute;
    z-index: 9999; /* make sure the cursor is on top of everything */
    left: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    pointer-events: none;
    transform: translate(-200%, -100%);
    border: 1px solid black;
    transform-origin: center;
    transition: width 0.3s ease-out, height 0.3s ease-out, border 0.3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
}