/* --------------- */
/* CURSOR SETTINGS */
/* --------------- */

html,
body {
    /* Removes Original Cursor */
    cursor: none;
}

.custom-cursor {
    position: absolute;
    top: 0;
    left: 0;

    /* Ensure Cursor shows */
    z-index: 99;

    /* Will remove custom main cursor */
    /* display: none; */
}

.site-wide {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black;
}

.site-wide .pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: black;

    /* Cursor Click Effect */
    transition:
        width 0.1s ease-in-out,
        height 0.1s ease-in-out;
}

/* Cursor Click Effect */
.site-wide.active .pointer {
    width: 20px;
    height: 20px;
}

/* --------------- */
/* CURSOR IN BOXES */
/* --------------- */

.box-bound {
    display: block;
    width: 100px;
    height: 70px;
    margin-left: 1px;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    transition:
        width 0.1s ease-in-out,
        height 0.1s ease-in-out;
}

.box-bound.active {
    width: 150px;
    height: 90px;
}