@media (max-width: 414px){
    .container{
        max-width: 350px;
    }

    .options{
        flex-direction: column;
    }

    .options label{
        margin-bottom: 1em;
    }

    ul {
        margin: 0 2em;
    }

    .btns-wrapper{
        width: 300px;
    }

    button{
        padding: 8px 20px;
        border: none;
    }

    .note-wrapper{
        padding:  3em 2em;
    }
}

@media (max-width: 375px){
    .container{
        max-width: 330px;
        padding-bottom: 4em;
    }
}

@media (max-width: 350px){
    .container{
        max-width: 300px;
    }

    .btns-wrapper{
        width: 200px;
    }
}


@media (max-width: 320px){
    .container{
        max-width: 300px;
        padding-bottom: 5em;
    }

    .egg-white{
        width: 250px;
        height: 350px;
    }

    .egg-yolk{
        width: 160px;
        height: 150px;
    }

    .cheek-left,
    .cheek-right{
        top: 5em;
    }

    .cheek-right{
        right: -0.75em;
    }

    .eyes{
        top: 4em;
        left: 0.75em;
    }

    .pupil-left{
        left: 2.5em;
    }

    .pupil-right{
        left: 8.75em;
    }

    .pupil-left,
    .pupil-right{
        top: 4em;
    }

    .mouth{
        top: 6em;
        left:4.5em;
    }

    .btns-wrapper{
        width: 250px;
    }
}