styles.css

body{
    background: rgb(236, 229, 231);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Poppins", sans-serif;
}

.head{
    border-radius: 70px 70px 50px 50px;
    background: #1d1d1d;
    border: white 2px solid;
    width: 200px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.helmet{
    padding: 15px;
    border-radius: 90px 90px 70px 70px;
    background: rgb(186, 195, 245);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.eyes{
    gap: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eye{
    width: 40px;
    height: 60px;
    background: white;
    border-radius: 50%;
    position: relative;
    border: none;
    animation: move 6s infinite;
}

@keyframes move{
    0%{
        height: 60px;
        transform: translate(0, 0);
    }

    10%{
        height: 2px;
        transform: translate(0, 10px);
    }

    20%{
        height: 60px;
        transform: translate(0, 0);
    }

    35%{
        height: 2px;
        transform: translate(0, 10px); 
    }

    40%{
        height: 60px;
        transform: translate(0, 0); 
    }

    60%{
        height: 30px;
        transform: translate(20px, 0);
    }

    100%{
        height: 50px;
        transform: translate(0, 0);
    }
}