body {
    background: beige;
    font-family: sans-serif;
}

#container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 10%;
    width: 50%;
}

.eye {
    aspect-ratio: 2 / 1;
    background-image: radial-gradient(circle,black 0% 10%, brown 10% 40%, white 40% 100%);
    border-radius: 100vw;
    position: relative;
    width: 40%;
    &:before,
    &:after {
        background: color-mix(in hsl, beige, brown 20%);
        border-color: black;
        border-style: dotted;
        content: '';
        display: block;
        height: var(--blink, 10px);
        position: absolute;
        transition: 0.25s;
        width: 100%;
    }
    &:before {
        border-radius: 100vw 100vw 0 0;
        border-width: 0 0 2px;
        top: 0;
    }
    &:after {
        border-radius: 0 0 100vw 100vw;
        border-width: 2px 0 0;
        bottom: 0;
    }
}