/* Create a custom cursor */
.custom-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #2b2b37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #D5796B;
    pointer-events: none;
    cursor: none;
    display: none;
    text-align: center;
    line-height: 100px;
    transform: translate(-50%, -50%); /* Center the cursor */
    transition: transform 0.2s ease-in-out; /* Smooth transition when moving */
}

/* Hover effect to grow the cursor */
.custom-cursor.hovered {
    animation: growCursor 0.3s forwards; /* Animatie voor vergroting */
}

/* Keyframe animation for scaling the cursor */
@keyframes growCursor {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Start at normal size */
    }
    50% {
        transform: translate(-50%, -50%) scale(1.35); /* Grow to 1.5x */
    }
    100% {
        transform: translate(-50%, -50%) scale(1.20); /* Stay at 1.25x when hover ends */
    }
}

/* Style for the cursor elements */
.cursor-element {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    margin: 2px;
}

/* Button styling for custom cursor */
.changeColorButton {
    cursor: none;
}