html {
	background: #eaeaea;
	--blue: #306f91;
	--green: #8db243;
	--red: #c32e04;
	--yellow: #dfac20;
	--lightblue: #e6f2f7;
	--lightgreen: #ebf5d7;
	--lightred: #ffebe6;
	--lightyellow: #fdfcf3;
}

body {
	margin: 1em auto;
	font-family: Arial;
}

main > svg {
    width: calc(100% - 2rem);
    background: white;
    padding:0;
}

body > svg {
  border: 1px dashed var(--blue);
  padding: 0;
}

h1 {
	background: #000000;
	border-color: #d5d5d5;
	font-size: 100%;
	padding-top: 0;
}


main {
	display: block; /* für IE */
	background: #eaeaea;
	border-color: #d5d5d5;
	min-height: 25em;
	padding-left: 2rem;
	padding-right: 2rem;
}
video {
	width: 100%;
	height: auto;
}
	main h2 {
		background-color: #737373;
		color: #ffffff;
		width:100%;
		font-size: 1em;
	}

#biography table {
	border-spacing: 0px;
	border-collapse: collapse;
}

#biography th {
	background-color: #737373;
	text-align: center;
	color: white;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #737373;
}

#biography td {
	border-style: solid;
	border-width: 1px;
	border-color: #737373;
}
	
@media(min-width: 320px) {
	h1 {
		font-size: 120%;
	}
}

@media(min-width: 400px) {
	h1 {
		font-size: 100%;
		padding-left: 200px;
	}


}

@media(min-width: 480px) {
	h1 {
		font-size: 110%;
		padding-left: 200px;
	}
}

@media(min-width: 560px) {
	h1 {
		font-size: 120%;
	}
	}

@media(min-width: 640px) {
	h1 {
		font-size: 140%;
	}
}

@media(min-width: 720px) {
	h1 {
		font-size: 200%;
	}

}
@media(min-width: 800px) {
	h1 {
		font-size: 200%;
	}

}

#galerie ul,
#galerie li {
	margin: 0.1em;
	padding: 0.1em;
}

#galerie li {
	display: inline-block;
	list-style-type: none;
	width: 45%;
}

img {
	max-width:100%;
}

#galerie img {
	padding: 0;
	margin: 0;
	width: 100%;
	/* Bild passt sich an verfügbaren Raum im li an */
}

#galerie button {
	padding: 0.1em;
}
/* Large screens */

@media all and (min-width: 35em) {
	#galerie li {
		width: 10em;
	}

	main button:focus,
	main button:hover {
		background: #09c;
	}
}