:root {
 --bg: rgba(255, 255, 255, 0.8);
 --braun: rgb(60,30,20);
 --link: rgb(100,30,20);
}
/* Main Blöcke */
body {
	background: url("img/dog_bg.jpg");
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	color: var(--braun);
	font-family: Tahoma, Geneva, sans-serif;
	font-size:14pt;
}
main {
	position: fixed;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right:5px;
	display:flex;
	flex-direction: column;
	align-items: center;
}
header, section{
	border-radius: 0.5em;
	border: 1px solid var(--braun);
	background: var(--bg);
	padding: 0.5%;
	margin: 0.5%;
}
header, section {
	flex-shrink:1;
	width: min(800px, 98%);
}
/* HEADER */
#title {
	display: block;
	text-align:center;
	margin-bottom: 10px;
}
nav {
	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
[inc] {
 margin:  0 0 5px 0;
 padding:5px;
 text-align:center;
 width: 120px;
 border-radius: 0.5em;
 border: 1px solid transparent;
 background: var(--bg);
 box-shadow: 2px 2px 7px var(--braun);
 cursor:pointer;
}
[inc]:hover { /* hover funktioniert nur mit Maus */
	border: 1px solid var(--braun);
}
[inc]:active {
	box-shadow: none;
}
/* CONTENT */
#content {
	overflow-y:scroll;
	flex-grow:1;
}
/* Tags */
h1 {
	text-align: center;
	font-size:1.7rem;
}
h2 {
	font-size:1.4rem;
	font-weight:bold
}
img {
	border-radius: 10px;
	margin:3px;
}
/* Klassen */
.c {
	text-align:center;
}
.r {
	text-align:right;
}
.l {
	text-align:left;
}
.b {
	font-weight:bold
}
.i {
	font-style: italic;
}
.xl {
	font-size: 1.2em;
}
.xs {
	font-size: 0.8em;
}
a:any-link {
	text-decoration:none;
	color: var(--link);
}
.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/* Impressum */
#imp {
	position:fixed;
	bottom: 15px;
	right: 15px;
}
.imp {
	counter-increment: imp;
}
.imp::first-line {
	font-weight: bold;
}
.imp::before {
	content: "§" counter(imp) " ";
}