body {background-color: yellow;}

.item1 {grid-area: menu;}
.item2 {grid-area: header;}
.item20 {grid-area: header2;}
.item21 {grid-area: header3;}
.item3 {grid-area: left;}
.item4 {grid-area: main;}
.item5 {grid-area: right;}

.grid-container {
    display: grid;
    grid-template-areas: 
	'menu menu menu menu menu menu ' 
	'header header header2 header2 header3 header3 ' 
	'left main main main main right';
    grid-gap: 10px;
    background-color: yellow;
    padding: 5px;
    border-radius: 15px 15px 15px 15px;
}

.grid-container>div {
    font-family: "Helfetica", "verdana", "Arial";
    background-color: yellow;
    padding: 5px;
}

/* XXXXX   Menu    XXXX*/
.item1 {
    color: black;
    margin: 2px;
    text-align: left;
    font-size: 13px;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 6px 6px 15px silver;
}

.button {
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 7px 7px 7px 7px;
    background-color: #7a1c27;
    box-shadow: 2px 2px 2px silver;
}


/* XXXXX  head   XXXXX*/
.item2 {
    margin: 10px;
    text-align: left;
    font-size: 20px;
}

.item20 {
    margin: 10px;
    text-align: center;
    font-size: 18px;
}

.item21 {
    margin: 10px;
    text-align: right;
    font-size: 20px;
}


/* XXXXX   Left    XXXXX*/
.item3 {
    margin: 10px;
    text-align: left;
    font-size: 16;
}


/* XXXXX   Main    XXXXX*/
.item4 {
    margin: 10px;
    text-align: center;
    font-size: 16;
}


/* XXXXX   Right    XXXXX*/
.item5 {
    margin: 10px;
    text-align: left;
    font-size: 16;
}