.header {
	background-color: #ffffff;
	grid-area: header;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 25px;
}

.nav{
	background-color: #ffffff;
	grid-area: nav;
	text-transform: uppercase;
}

.main{
	background-color: #ffffff;
	grid-area: main;
}

.footer{
	background-color: #ffffff;
	grid-area:footer;
}


* {
	box-sizing: border-box;
	margin:0px;
	padding: 0px;
}

html{
	height: 100%;
	font-family: Arial;
}

body{
	min-height: 100%;
}

@media (min-width: 300px) {
.grid-container {
	text-align: center;
	display: grid;
	grid-gap: 5px;
	grid-template: 
	"header" 100px
	"nav" 50px
	"main" auto
	"footer"  100px/
	auto;
	}
}

.flexible {
	display: flex;
	justify-content: center;
	align-items: center;
}

div{
	width: 100%;
}