body{ 
    font-family: Arial, sans-serif;
	font-size: 20px;
	text-align: center;
	background-color: lightgray;
    display: flex;    
    /* alle Kind-Elemente werden zu flex items 
    display:flex bietet eine einfache Lösung für das Problem, Elemente vertikal zu zentrieren
    */
    flex-direction: column;  
    /*
    Spaltenorientierte Verteilung von Flexboxen
    flex-direction: column
    */
}

h1 {
	color: red;
	font-size: 50px;
}

h2 {
	color: green;
	font-size: 40px;
}

h3 {
	color: blue;
	font-size: 30px;
}

hr {
	height: 5px;
	background: pink;
}

header {
	text-align: center;
}

nav {
	margin: 0;
    display: flex;
    justify-content: center;
    /* Die Navigation wird zentriert angeordnet */  
}

nav ul{
	height: auto;
	padding: 0px;
	/*    Innenabstand  */
    font-weight: bold;
    display: flex;
    /* responsive und fexibles Layout */
    flex-direction: row;
}

nav ul li{
	min-height: 20px;
	border: 5px solid #73726D;
    /* Rahmen Stärke durchgezogen Farbe */
}

nav a {
    text-decoration: none;
    color: white;
}

nav a:hover {
    background: #0062ff;
}

main {
	text-align: center;
}

table {
    width: 100%;
    text-align: left;
}

table, th, tr, td{
	margin: auto; 
	border: 3px ;
	border-style: solid;
    /* Rahmen durchgezogen */ 
    border-collapse: collapse;
    /* Rahmen getrennt oder zusammenfallend */ 
    font-size: 30px;
}

footer{
    font-size: 30px;
    font-weight: bold;
	text-align: center;
}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    /*  Die Punkte der Aufzählung verschwinden */
    display: flex;
    /*  Display - Die folgenden Befehle sind Anpassungen an die verschiednen Browser */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex-wrap: wrap;
    /* Dieser Befehl flex-wrap: wrap; ist für den IE11 (Internet Explorer 11), um die Links nach einer Verkleinerung der Seite untereinander gelistet zu bekommen */

    -webkit-flex-flow: row wrap;
    /* für Safari */
    
    justify-content: space-around;
    
    /* Die Eigenschaft justify-content legt fest, wie die einzelnen flexiblen Elemente entlang der Hauptachse angeordnet werden. space-around: Alle Elemente werden verteilt  */
}

.flex-item {
    background: tomato;
    padding: 0;
    width: 250px;
    height: 80px;
    margin-top: 0px;
	margin-bottom: 0px;
    line-height: 80px;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}


@media screen and (max-width: 700px)    { 
    body {   font-size: 0.8em;      } 
    h1 { font-size: 1.2em;          }
    nav { font-size: 0.6em;         }
    
.flex-item {
    height: 30px;
    line-height: 30px;
    color: white;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
	}
	
    h2 { font-size: 1.0em;     }
    h3 { font-size: 1.0em;     }
    table, th, td { font-size: 0.6em; }
    footer{ font-size: 1.0em;         }
}
   

@media screen and (max-width: 478px)    { 
    body {     font-size: 1em;      } 
    h1 { font-size: 1em;            }
    nav { font-size: 0.8em;         }
    
.flex-item {
    height: 20px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 1.0em;
    text-align: center;
}
    
    h2 { font-size: 0.8em;      }
    h3 { font-size: 0.8em;      }
    table, th, td { font-size: 0.4em;   }
    footer{ font-size: 0.8em;           }
}