/* = = = = = = = = = = = = = = = =  mdn.andrebreitling.de = = = = = = = = = = = = = = = =  */
html, body {	
	background: #0f7b47;
	color: #ffff99; 
	width: 100%;
	font: normal 1.3em Chiller ;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

@font-face {
	font-family:'Chiller';
	src: url('../fonts/Chiller.ttf') format('truetype');
}

.allesaufderseite {
	/*Zentrierung*/
	margin-left: auto;
	margin-right: auto;
  
	width: 85%;	
	border: 1em solid #ffff99; 		/* . . . . . . . . . . . Rahmen . . . . . . . . . . . */     
	border-radius: 0em 2em 2em;		/* Rahmenbogen */
	padding: 0em;					/* Innenabstände */
	flex-flow: row wrap;			/* Container und Items verschieben möglich */
	display: flex;					/* Bilder werden flexibel */ 
}

.mittig {
	/*Zentrierung*/
	margin-left: auto;
	margin-right: auto;

}

/* = = = = = = = = = = = = = = = = SEITENGESTALTUNG = = = = = = = = = = = = = = = =  */

h1 {
	font-size: 1.5em;
	line-height: .8em;	
}
p {
	font-size: 1.1em;
	line-height: 0.1em;	 
}
normal {
	font-size: 0.1 em;	
}
strong {
	font-size: .4em; 
}
small {
	font-size: .8em; 
}

winz {
	font-size: .1em;
	line-height: .1em; 
}

/* Eigenschaften der Links */
a { 
	color: #ffff99; 
}
	a:link{ 
	color: #ffff99; 
	text-decoration:none;
}
	a:visited{ 
	color: #ffff99; 
}
	a:hover {
	color: #fff;
	/* text-decoration:underline;  */
	text-transform: uppercase;	/* Darstellung in Großbuchstaben */ 
}

#audiocontrol{
		/*Zentrierung*/
	margin-left: auto;
	margin-right: auto;
}
/* Container und Items */

.flex-container {		/* Container */
	border: 0px solid #00ff00;    /* . . . . . . . . . . . Rahmen . . . . . . . . . . . */ 

	display: flex;
	flex-direction: column;
	margin: .1em auto;				/* Seite mittig ausrichten */	
	width: 99%;	
}

@media all and (min-width: 38em) {	/* große Viewports */
	.flex-container {
		flex-direction: row;
	}
}

.flex-item {				/* Item 1 */
	border: 0px solid #ff3300; 	    /* . . . . . . . . . . . Rahmen . . . . . . . . . . . */ 
	text-align: right;
	width: 99%;			
 	min-width: 5em;	
}

.flex-item:nth-of-type(2) {	/* Item 2 ist die Vererbung von Item 1*/
	text-align: center;
}

.flex-item:nth-of-type(3) {	/* Item 3 */
	text-align: left;	
}