/* Oculta el cursor del navegador */
body {
    cursor: none;
}

/* Cursor principal */
#cursor {
    position: fixed;
    top: 0;
    left: 0;

    width: 18px;
    height: 18px;

    border: 2px solid #0d6efd;
    border-radius: 50%;

    background: rgba(13,110,253,.08);

    pointer-events: none;

    transform: translate(-50%, -50%);

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .15s ease;

    z-index: 999999;

    backdrop-filter: blur(2px);
}

/* Cuando pasa sobre un botón */
#cursor.hover {

    width: 55px;
    height: 55px;

    background: rgba(13,110,253,.15);

    border-color: white;

}

/* Cuando hace clic */
#cursor.click {

    transform: translate(-50%, -50%) scale(.8);

}