.eyes-container {
    display: flex;
    flex-direction: row; /* Forces them to stay side-by-side */
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.eye {
    width: 60px;
    height: 60px;
    background: white;
    border: 3px solid #333;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #d1d1d1 100%);
}

/* This is the realistic blink class */
.eye.blink-active {
    animation: blink-anim 0.15s ease-in-out;
}

@keyframes blink-anim {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.1);
    } /* Squishes vertically only */
}

.pupil {
    width: 24px;
    height: 24px;
    background: #000;
    border-radius: 50%;
    position: relative;
    transition: transform 0.05s ease-out;
}

.pupil::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.smile-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.smile {
    width: 80px;
    height: 40px; /* Increased height so the curve is visible */
    border-bottom: 8px solid #333; /* The thickness of the smile */
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-radius: 50%; /* This rounds the bottom */
    transition: all 0.3s ease; /* For smooth changes */
}

.face-circle {
    width: 250px;
    height: 250px;
    border: 5px solid #333;
    border-radius: 50%;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.smile {
    width: 60px;
    height: 30px;
    border-bottom: 6px solid #333;
    border-radius: 50%;
    transition: all 0.3s ease; /* Smooth transition for widening */
}

/* When the mouse is inside the face-circle, change the smile */
.face-circle:hover .smile {
    width: 100px; /* Make it wider */
    border-bottom-width: 10px; /* Make it thicker */
    height: 40px; /* Deepen the curve */
}