* {
    box-sizing:border-box;
}

body {
    background:lavender;
    margin:0;
}

img {
    max-width:100%;
}

.container {
    height:100vh;
    overflow:hidden;
}

.smiley {
    background:pink;
    width:200px;
    height:200px;
    margin:auto;
    margin-top:50px;
    position:relative;
    border-radius:100%;
    animation: halsey 8s infinite alternate-reverse linear;
}

@keyframes halsey {
    0% {
        background:pink;
    }

    16% {
        background:peachpuff;
        transform: translateY(100px);
    }

    32% {
        background:palegoldenrod;
        transform: translateX(100px);
    }

    48% {
        background:lightgreen;
        transform: translateY(300px);
    }

    64% {
        background:skyblue;
        transform: translateX(-250px);
    }

    80% {
        background:plum;
        transform: translateY(460px);
    }


    100% {
        background:lightpink;
        transform: translateY(1000px);
    }
}

.eye {
    background:rgb(54, 47, 100);
    width:35px;
    height:35px;
    /* in order for this element to be positioned relative to its container, the container also needs to have a position value */
    position:absolute;
    top:50px;
    border-radius:100%;
    animation: blink 2s infinite alternate;
}

@keyframes blink {
    0% {
        scale:1;
    }
    100% {
        scale:1.3;
    }
}

.left {
    left:40px;
}

.right {
    right:40px;
}

.mouth {
    background:rgb(54, 47, 100);
    width:100px;
    height:30px;
    position:absolute;
    top:120px;
    left:50px;
    border-radius:0 0 100% 100%;
    animation: scream 2s infinite alternate;
}

@keyframes scream {
    0% {
        height:30px;
    }
    100% {
        height:50px;
    }
}

.blush {
    background:palevioletred;
    width:50px;
    height:25px;
    /* in order for this element to be positioned relative to its container, the container also needs to have a position value */
    position:absolute;
    top:90px;
    left:20px;
    border-radius:100%;
}

.le {
    left:20px;
}

.ri {
    left:130px;
}