:root {
	--textcolor: #000000;
	--bgcolor1: #bbbbbb;
	--bgcolor2: #e8e8e8;
}

* {
	box-sizing: border-box;
}

body {
	background-color: rgb(200,200,200);
	background-image: linear-gradient(to bottom right, var(--bgcolor2), var(--bgcolor2), var(--bgcolor1));
	min-height: 100vh;
	margin: 0px;
	padding: 8px;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 240px auto;
	grid-template-rows: min-content auto min-content;
}

#header {
	grid-column: 1 / span 2;
}

#menu_button {
	display: none;
}

#navigation {
	min-height: 390px;
	border: 2px solid black;
	border-radius: 10px;
	padding: 10px;
}

#navigation>a, #navigation>span>a {
	display: block;
	font: bold large serif;
	color: black;
	text-decoration: none;
	margin: 5px 0px;
	background-color: rgba(255,255,255,0.5);
	border: 2px solid black;
	border-radius: 10px;
	padding-left: 10px;
}

#navigation>a:hover, #navigation>span>a:hover {
	background-color: rgba(255,255,255,0.9);
}

#navigation>span {
	display: block;
	margin-left: 10px;
}

#navigation>#nav_close {
	display: none;
}

#content {
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px;
	padding: 10px;
}

.site_block {
	border: 2px solid black;
	border-radius: 10px;
	padding: 10px;
}

.site_block>h2 {
	display: inline;
}

.site_block>a {
	background-color: rgba(255,255,255,0.5);
	border: 2px solid black;
	border-radius: 10px;
	font: bold large serif;
	color: black;
	text-decoration: none;
	padding: 0px 5px;
	vertical-align: top;
	float: right;
}

.site_block>a:hover {
	background-color: rgba(255,255,255,0.8);
}

#footer {
	font-size: small;
	grid-column: 1 / span 2;
}

@media only screen and (max-width: 640px) {
	body {
		grid-template-columns: 100%;
		padding: 0px;
	}

	#header {
		grid-column: auto / auto;
	}

	#header>img {
		width: 100%;
	}

	#menu_button {
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 5px;
		margin: 0px;
	}

	#menu_button>a {
		color: black;
		background-color: rgba(255,255,255,0.8);
		border-radius: 5px;
		padding: 2px 5px;
	}

	#navigation {
		display: none;
		min-height: initial;
		border: none;
		padding: 0px;
	}

	#navigation:target {
		display: block;
	}

	#navigation>a {
		border: 2px solid black;
	}

	#navigation>#nav_close {
		display: block;
	}

	#content {
		min-height: initial;
		border: none;
		border-image: none;
		padding: 5px;
	}
	
	#footer {
		grid-column: auto / auto;
	}
}