html {
  touch-action: manipulation;
}
body,html{
	height: 100%;
}
ul{
	padding: 0;
	margin: 0;
	height: 100%;
	list-style: none;
}
:root{
	--main-radius: 5px;
	--main-padding: 5px;
}
.container {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr;
	grid-template-rows: 4em 2em 2em 2em 2em 1fr 4em;
	grid-row-gap: 0.2em;
	grid-template-areas: 
		"header"
		"nav1"
		"nav2"
		"nav3"
		"nav4"
		"main"
		"footer";
	
}
.header{
	background-color: gray;
	grid-area: header;
	border-radius: var(--main-radius);
	padding-top: var(--main-padding);
	//margin-bottom: -0.2em;
}
nav{
	background-color: silver;
	grid-area: nav1;
	border-radius: var(--main-radius);
	padding-top: var(--main-padding);
}
.nav2{
	background-color: silver;
	grid-area: nav2;
	border-radius: var(--main-radius);
	padding-top: var(--main-padding);
}
.nav3{
	background-color: silver;
	grid-area: nav3;
	border-radius: var(--main-radius);
	padding-top: var(--main-padding);
}
.nav4{
	background-color: white;
	grid-area: nav4;
	//margin-bottom: -0.2em;
}
.nav4 li {
	width: 133px;
	height: 100%;
	text-align: center;
	
	float: left;
	margin: 3px 5px 0 0;
	background-color: #a9a9a9;
	border-top-left-radius: var(--main-radius);
	border-top-right-radius: var(--main-radius);
	position: relative;
}
.nav4 li a{
	display: block;
	padding: 7px 8px 4px 8px;
	text-decoration: none;
	vertical-align: text-bottom;
}

main{
	background-color: aqua;
	grid-area: main;
	border-bottom-left-radius: var(--main-radius);
	border-bottom-right-radius: var(--main-radius);
	padding-top: var(--main-padding);
}
footer{
	background-color: gray;
	grid-area: footer;
	border-radius: var(--main-radius);
	padding-top: var(--main-padding);
}