* {
	margin: 0;
	padding: 0;
	background-color: #F5F5F5;
}

body {
	font-family: Verdana, Geneva, sans-serif;
}


.grid {
	display: grid;
	min-height: 100%;
	grid-template-columns: 1fr 550px 550px 1fr;
	grid-template-rows: 50px 75px auto 100px;
	grid-template-areas:
	". title nav ."
	". header header ."
	". content content ."
	"footer footer footer footer";
}

.title {
	grid-area: title;
	align-self: end;
}

.nav {
	grid-area: nav;
	display: grid;
	grid-template-rows: 1fr 30px;
	grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px;
	align-self: end;
	grid-column-gap: 5px;
}

	.nav div a:hover {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor: pointer;
	}

	.nav div, a, img {
		border-radius: 10px;
	}

	.nav .box {
		color: #444;
		align-self: center;
		height: 30px;
	}

	.util {
		grid-column: 2;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dict {
		grid-column: 3;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.map {
		grid-column: 4;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vid {
		grid-column: 5;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.disc {
		grid-column: 6;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info {
		grid-column: 7;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home {
		grid-column: 8;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

.header {
	grid-area: header;
	align-self: center;
}

.content {
	grid-area: content;
}

div a {
	border-radius: 20px;
}

div a:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer {
	grid-area: footer;
	background-color: #7F7F7F;
	display: grid;
	grid-template-columns: 1fr 500px 500px 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
}

	.footer .box {
		font-color: #444;
	}

	.one {
		background-color: inherit;
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: center;
	}

	.two {
		background-color: inherit;
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		align-self: center;
	}