*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div#container{
    margin: 1em auto;
    max-width: 50rem;
    background-color: #DDD;
    padding: 1rem;
    /*
        faz com que as posições dos filhos fiquem relatiovos ao pai e esse pai tem uma largura definida 
     */
    position: relative;
}
header, main, footer{
    border: 1px solid #999;
    padding: 1rem;
}
div.modal{
    background-color: aqua;
    padding: 2rem;
    box-shadow: 0 0 0.1rem 0.1rem grey;
    border-radius: 0.5rem;
    width: 20rem;
    height: 20rem;
    /* faz com que a caixa fique sobre o site */
    position: absolute;
    /* 
    "coordenadas"
    top: ;
    right: ;
    left: ;
    bottom: ; 
    so podem ser usado um do mesmo eixo
    */
    top: 0.2rem;
    left: 20rem;
}