* {
	/*border: dotted 2px white ;*/
}


article {
	max-width: 60em ;
	margin: 2em auto ;	
	margin-bottom: 10em ;
	padding: 0 1.5em ;
	font-size: 1rem ;
	line-height: 1.6 ;
	
	
}

h2 {
	font-style: italic ;
	font-size: 2rem ;
}

h2, h3 {
	display: flex ;
	/*border-bottom: solid 3px #808080 ;*/
}

h3 {
	font-size: 1.5rem ;
	
}
h4 {
	font-size: 1.4rem ;
}


.border_bg{ /* Unterstrich für die Überschriften */
	display: flex ;
	border: solid 1px #404040 ;
	background: linear-gradient(to right, #80008050 49%, #00800050 51%);
	background-size: 200%;
	animation: hebo 5s ease-in-out infinite ;
		margin-top: 4em ;
	
	h2, h3  {	
		width: 100% ;
		background-color: #404040 ;
		margin : 0 0 3px 0 ;
	}
}

@keyframes hebo { /* Animatino vom Unterstrich */
	0% {
		background-position: 5% 50%;
	}
	50% {
		background-position: 95% 50%;
	}
	100% {
		background-position: 5% 50%;
	}
}

.Steckbrief { /* Tabellarische infos am rand */
	display: flex;
	max-width: 50em ;
	margin: 2em auto ;
	font-size: 88% ;
	margin-top: 0 ;
	
	justify-content: center ;
	
	& tbody, tbody tr:not(.qbert), tbody th, tbody tr:not(.qbert) td {
		border: solid 1px gray ;
	}
	
	& .qbert {
		float: right ;
		& img {
			max-height: 1em ;
		}
	}
	
	& td {
		max-width: 15em ;
	}
}

/* Gehört zu Steckbrief */
tr, td, th {
	padding: 0 .5em ;
}
td {
	display: flex ;
	flex-direction: column ;
}
th {
	max-width: 8em ;
	text-align: left ;
	vertical-align: top ;
	
	& img {
		margin: 0 auto ;
	}

}

.SteckbriefHead { /* Überschrift der Steckbrief */
	align-items: center ;
	vertical-align: center ;
	font-size: 1.2rem ;
	font-style: italic ;
	text-decoration: underline ;
	margin-bottom: 0 ;
	margin: 0 auto ;
	margin-top: 1em ;
	max-width: 5em ;
}

figure {
	text-align: center ;
	margin: 0 ;
	
}

.media_collection {
	display: flex ;
	flex-direction: column ;
	align-items: center ;
	
	*{
		margin: 1em 0 ;
	}
	
	& .pic {
		width: 25em ;
	}
	
	& .vid {
		width: 56em ;
		height: 32em ;
	}
	
}



p {
	opacity: .8 ;
}


@media screen and ( min-width: 320px ) and ( max-width: 1131px)	{
	
	.media_collection {
		& .pic {
		max-width: 15em ;
		}
		& .vid {
			max-width: 25em ;
			max-width: 16em ;
		}
	}
	
}