* {
    box-sizing: border-box;
}

:root {}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 150px auto 150px;
    grid-template-areas:
        'menuizquierda menuizquierda arriba arriba arriba arriba arriba arriba arriba arriba arriba arriba'
        'menuizquierda menuizquierda principal principal principal principal principal principal principal principal menuderecha menuderecha'
        'abajo abajo abajo abajo abajo abajo abajo abajo abajo abajo menuderecha menuderecha';
}

header {
    grid-area: arriba;
    background-color: brown;
    color: white;
    text-align: center;
}

#menui {
    grid-area: menuizquierda;
    background-color: blue;
    color: white;
    text-align: center;
}

article {
    grid-area: principal;
    background-color: white;
    color: black;
    text-align: center;
}

#menud {
    grid-area: menuderecha;
    background-color: rgb(134, 134, 226);
    color: white;
    text-align: center;
}

footer {
    grid-area: abajo;
    background-color: orange;
    color: white;
    text-align: center;
}


@media screen and (max-width: 640px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            'arriba'
            'menuizquierda'
            'principal'
            'menuderecha'
            'abajo';
    }
}