.ball {
    cursor: pointer;
}

/* Eyes container and eyes */
.eyes {
    position: absolute;
    top: 22.8%; /* Default vertical centering */
    left: 48.2%; /* Default horizontal centering */
    transform: translate(-50%, -50%); /* Center in both directions */
    z-index: 1; /* The eyes are behind the overlay */
    display: flex;
    justify-content: center;
    align-items: center;
}

.eye {
    width: 35px;
    height: 25px;
    background: #CB7B24;
    display: inline-block;
    margin: 19px; /* Default margin */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.ball {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ball-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Overlay with click-through functionality */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none; /* Makes the overlay transparent to mouse events */
}

.overlay-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.complete_monalisa {
    display: flex;
    flex-wrap: wrap;
}

/* Adjust .eyes and .eye styles for 1920 x 1006 resolution */
@media screen and (width: 1920px) and (height: 1006px) {
    .eyes {
        top: 20.8%;
    }
}

@media screen and (min-width: 1700px) and (max-width: 1710px) and (min-height: 880px) and (max-height: 920px) {
    .eyes {
        top: 20.8%;
    }
    .eye {
        margin: 16px;
    }
}


/* 1709 x 896 */


/* Adjust .eyes and .eye styles for 1710 x 903 resolution regular screen laptop*/
@media screen and (min-width: 1700px) and (max-width: 1710px) and (height: 981px) {
    .eyes {
        top: 22.8%;
    }
    .eye {
        margin: 16px;
    }
}