html {
	margin: 0 auto;
	max-width: 1280px;
	background-color: #6d0000;
	font-size: 100%;
}

body {
	background-color: #f5f5f5;
	border-radius: 25px;
	padding: 5%;
}


* {
	box-sizing: border-box;
}

/* überschrift bauhandwerkerinnen.de */
h1 {
	text-align: center;
	font-weight: bold;
	font-family: monospace;
	font-size: 2, 5rem;
}

h1 a {
	color: black;
	text-decoration: none;
}

/* überschrift Menü */
h2 {
	color: white;
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
	font-family: monospace;
	text-decoration: none;
	text-shadow: 0 0 10px black;
	border: solid;
	border-radius: 15px;
	border-color: #6d0000;
	background-color: #c0c0c0;
	padding: 10px;
	margin: 0% 1% 0% 1%;
}

h2 a {
	color: white;
	font-weight: bold;
	font-family: monospace;
	text-decoration: none;
	text-shadow: 0 0 10px black;
}

/* überschrift Text */
h3 {
	font-family: sans-serif;
	font-size: 2rem;
}

/* Archiv */
details>summary {
	color: white;
	font-size: 1rem;
	font-weight: bold;
	font-family: monospace;
	text-decoration: none;
	text-shadow: 0 0 10px black;
	border: solid;
	border-radius: 15px;
	border-color: #6d0000;
	background-color: #c0c0c0;
	padding: 10px;
	margin: 0% 1% 0% 1%;
}

h4 {
	font-family: sans-serif;
	font-size: 1, 5rem;
}

.item9 {
	padding: 10px 0px 10px 0px;
}

.item10 {
	border: solid;
	border-radius: 15px;
	border-color: #6d0000;
	padding: 10px;
}


/* Responsive layout - smartphone */
@media (max-width: 480px) {
	.grid-container {
		grid-template-areas:
			'header header header header header header header'
			'nav1 nav1 nav1 nav1 nav1 nav1 nav1'
			'nav2 nav2 nav2 nav2 nav2 nav2 nav2'
			'nav3 nav3 nav3 nav3 nav3 nav3 nav3'
			'nav4 nav4 nav4 nav4 nav4 nav4 nav4'
			'nav5 nav5 nav5 nav5 nav5 nav5 nav5'
			'nav6 nav6 nav6 nav6 nav6 nav6 nav6'
			'main main main main main main main'
			'picture picture picture picture picture picture picture'
			'footer footer footer footer footer footer footer'
	}
}


/* Responsive layout - tablet */
@media (min-width:481px) {
	.grid-container {
		grid-template-areas:
			'header header header header header header header'
			'picture picture picture nav1 nav1 nav2 nav2'
			'picture picture picture nav3 nav3 nav4 nav4'
			'picture picture picture nav5 nav5 nav6 nav6'
			'main main main main main main main'
			'footer footer footer footer footer footer footer'
	}
}


/* The grid container */
@media (min-width: 861px) {
	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			'picture header header header header header header'
			'picture nav1 nav2 nav3 nav4 nav5 nav6'
			'main main main main main main main'
			'footer footer footer footer footer footer footer';
	}
}

.item1 {
	grid-area: picture;
}

.item2 {
	grid-area: header;
}

.item3 {
	grid-area: nav1;
}

.item4 {
	grid-area: nav2;
}

.item5 {
	grid-area: nav3;
}

.item6 {
	grid-area: nav4;
}

.item7 {
	grid-area: nav5;
}

.item8 {
	grid-area: nav6;
}

.item9 {
	grid-area: main;
}

.item10 {
	grid-area: footer;
}