*
{
    margin:0;
    padding:0;
    background-color: #cfeec7;
    font-family: Arial, Helvetica, sans-serif;
}
/*
body
{
    margin: 5px;
    padding: 5px;
    border: 1px solid;
    height: 500px;
}
*/

body
{
    margin: 1px;
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 5vh auto 5vh;
    column-gap: 0px;
    row-gap: 0px;

    grid-template-areas: 'user header'
                         'nav  main'
                         'nav  footer';
    
    background-color: #cfeec7;
    /* color:#bdf2af; */
    padding: 1px;
}

.layoutItem 
{
    background-color: inherit;
    border: 1px solid #000000;
    padding: 1px;
    font-size: 12px;
    text-align: center;
}

#header
{
    grid-area: header;
}

#user
{
    grid-area: user;
}

#nav
{
    height: 94vh;
    grid-area: nav;
}

#main
{
    grid-area: main;
}

#footer
{
    grid-area: footer;
}