:root{
    --eye-radius: 30dvw;
    
}

body {
 
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    
    /* background-color: black; */
    /* position: relative; */
    --webkit-tap-highlight-color: transparent;
    }

.container{
    height: 100dvh;
    width: 100dvw;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.eye-container { 
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    display: flex;
    flex-direction: row;
    position: relative;
}



.eye {
    width: var(--eye-radius);
    height: var(--eye-radius);
    border-radius: 50%;/*圆形*/
    background-color: rgb(75, 142, 89);
    transform: 0 0;
    transition: all 0.1s;
    position: relative;
    /* 实现剪切蒙版的关键⬇️ */
    overflow: hidden;
    /* 实现子元素(pupil)居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    }

.pupil{
    width: calc(var(--eye-radius)*0.5);
    height: calc(var(--eye-radius)*0.97);
    background-color: black;
    border-radius: 50%;
    transform: 0 0;
    transition: all 0.1s;
    position: absolute;
 
    }
.nose {
    width: calc(var(--eye-radius)*0.1);
    height: calc(var(--eye-radius)*0.1);
    background-color: #2c1613; /* 棕色鼻子 */
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.blick {
    animation: blink 0.5s ease-in-out alternate;
}

    @keyframes blink {
    to {
        transform: translateY(0);
    }
}