:root {
    --or: #c8a96e;
}

body {
    background-color: skyblue;
}

.cursor-dot {
    position: fixed;
    top: -100px;
    left: -100px;
    z-index: 9999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--or);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.cursor-ring {
    position: fixed;
    top: -100px;
    left: -100px;
    z-index: 9998;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 169, 110, 0.55);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        width 0.35s cubic-bezier(0.23, 1, 0.32, 1),
        height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.cursor-dot.h {
    width: 14px;
    height: 14px;
}

.cursor-ring.h {
    width: 58px;
    height: 58px;
}