#youtubevideo {
	width: 666px;
}
.container {  
	display: grid;
	grid-template-columns: 200px auto 200px;
	grid-template-rows: 100px auto auto;
	grid-template-areas:
		"Header Header Header"
		"nav article aside"
		"Footer Footer Footer";
}

@media only screen and (max-width: 1000px) {
	#youtubevideo {
		width: 444px;
	}
	.container {  
		grid-template-columns: 200px auto; 
		grid-template-rows: 100px auto auto auto; 
		grid-template-areas: 
			"Header Header"
			"nav article"
			"aside aside"
			"Footer Footer"; 
	}
}

@media only screen and (max-width: 680px) {
	.container {  
		grid-template-columns: auto;
		grid-template-rows: 100px auto auto auto auto;
		grid-template-areas:
			"Header"
			"nav"
			"article"
			"aside"
			"Footer";
	}
}

.Header {
	grid-area: Header;
	background-color: rgba(195, 255, 195, 0.5);
	text-align: center;
}
.nav {
	grid-area: nav;
	background-color: rgba(195, 255, 195, 0.5);
		}
.article {
	grid-area: article;
	background-color: rgba(195, 255, 195, 0.5);
	}
.aside {
	grid-area: aside;
	background-color: rgba(195, 255, 195, 0.5);
	padding: 12px;
	}
.Footer {
	grid-area: Footer;
	background-color: rgba(178, 207, 217, 0.5);
	font-size: 17px;
	padding: 35px;
	}

body {
	font-size: 22px;
}

p {
	margin: 2px;
}

a:hover {
	color: #b90909;
}

body {
	background-image: linear-gradient(to bottom, rgba(200, 200, 200, .100), rgba(200, 200, 200, .100)), url("img/Keks 2.jpg");
	background-size: 300px;
}