@charset "UTF-8";
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container{
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 80px 50px 1fr 30px;
    grid-template-columns: 1fr 250px;
}
.topo, .menu, .principal, .secundario, .rodape{
    display: flex;
    align-items: center;
    justify-content: center;
    font: 25px arial;
}
.topo{
    background-color: yellow;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}
.menu{
    background-color: yellowgreen;
    grid-row: 2 / 3;
    grid-column: 1 / 3;
}
.principal{
    background-color: rgb(96, 96, 252);
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}
.secundario{
    background-color: rgb(227, 151, 163);
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}
.rodape{
    background-color: purple;
    grid-row: 4 / 5;
    grid-column: 1 / 3;
}