html, body 
{
height:100%;
font-size:62.5%;
/*Most modern browsers default to 16px font size, 62.5% = 10px. Now 1.4em will = 14px*/
}

body 
{
/*---font-size: 1.4em;---*/
padding:0;
height : 100%;
margin:0;
background-color : #669966;
background-color : #ffffcc;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 1.5em;
}

.colLeft 
{
grid-area: colLeft;
}

.colRight
{
grid-area: colRight;
}

.header 
{
grid-area: header;
}

.menu
{
grid-area: menu;
}

.title
{
grid-area: title;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 1.5em;
margin-right: 1.5em;
border: none;
padding-top: 0.5em;
padding-bottom: 1.0em;
padding-left: 1.0em;
padding-right: 1.0em;
}

.footer
{
grid-area: footer;
}

.wrapper 
{
margin-left: 1.5em;
margin-right:1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
display: grid;
grid-template-columns: 1fr;
grid-template-rowss: auto;
grid-template-areas:
	  	"header"
		"menu"
		"title"
        "colWrapper"
        "footer";
}

.colWrapper 
{
display: grid;
grid-template-columns: 0.3fr 0.7fr;
grid-template-rowss: auto;
grid-template-areas:
        "colLeft colRight";
		margin-top: 0em;
margin-bottom: 1.5em;
margin-left: 1.5em;
margin-right: 1.5em;
border: none;
padding-top: 0.5em;
padding-bottom: 1.0em;
padding-left: 1.0em;
padding-right: 1.0em;
}
	
.box 
{
background-color: #669966;
border-radius: 5px;
padding: 10px;
}