:root {
    --black: #1f2120;
    --eye-height: 50px;
}

body {
    background-color: var(--black);
}

.absolute-center {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.container {
    height: 400px;
    width: 400px;
    border: 1px solid white;
}

.eyes {
    display: flex;
}
.eye {
    height: var(--eye-height);
    width: var(--eye-height);
    background-color: white;
    border-radius: 50%;
    position: relative;
    margin: 0px 10px;
    border: 2px solid var(--black);
}

.pupil {
    height: calc(var(--eye-height) * 0.4);
    width: calc(var(--eye-height) * 0.1);
    background-color: var(--black);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(0%, -50%);
    animation: observe 2s linear infinite;
}

@keyframes observe {
    0% {
        left: 2%;
        height: calc(var(--eye-height) * 0.4);
        width: calc(var(--eye-height) * 0.1);
    }

    25% {
        left: 50%;
        height: calc(var(--eye-height) * 0.95);
        width: calc(var(--eye-height) * 0.15);
    }

    50% {
        left: 90%;
        height: calc(var(--eye-height) * 0.4);
        width: calc(var(--eye-height) * 0.1);
    }

    75% {
        left: 50%;
        height: calc(var(--eye-height) * 0.95);
        width: calc(var(--eye-height) * 0.15);
    }

    100% {
        left: 2%;
        height: calc(var(--eye-height) * 0.4);
        width: calc(var(--eye-height) * 0.1);
    }
}