html{
    
    font-size: 4vw;
}

body{

    padding: 1.5rem;
    background: lightgrey;
    font-size: 1rem;
}

.face{

    display: inline-block;
    width: 7rem;
    height: 7rem;
    background: yellow;
    text-align: center;
    border-radius: 10rem;
}

.eye{

    display: inline-block;
    font-size: 2.5rem;
}

.eyes{
    
    padding-top: 1rem;
    text-align: center;
}

.mouth{

    display: inline-block;
    height: 2rem;
    width: 3rem;
    background: white;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

#speech{
    
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
}

#greetings{

    padding: 1rem;
    background: white;
    border-radius: 3rem;
}

#trigger{

    display: inline-block;
    padding: 0.5rem;
    margin-top: 1rem;
    background: blue;
    font-size: 0.5rem;
    font-family: sans-serif;
    color: white;
    border-radius: 2rem;
}

#trigger:hover{

    cursor: pointer;
}

#corner{
    
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin-top: -2rem;
    background: white;
    transform: rotate(-45deg) translateX(-0.25rem);
}