/* CSS Document */
/* Farben definieren */
:root {
    --hintergrundwebsite:#0BA9E3;
    --hintergrundcontainer:#E52DD4 ;
    --kopfzeile: #666;
    --navigation: #ffffff;

    --textfarbe1: #000000;
    --textfarbe2: #000000;
    --textfarbe3: #000000;
    --footerfarbe: #333;
}

/*  das ist ein Kommentar zu den internen Styles: Hier sind nun alle Styles in einem externen Stylesheet */
/* erst einmal ein Reset für die HTML Elemente, die schon bestimmte Formate wie Abstände oder Rahmen haben */
        html, body, h1, ul, li{margin: 0; padding: 0; border: 0;}
/* generelle Hintergrundfarbe und Schriftfarbe: */
        body{background-color: var(--hintergrundwebsite);}
/* Einstellungen für die Kopfzeile, Navigation und Fußzeile: */
        header{}
        nav{background-color: var(--navigation); }
        footer{min-height: 50px; background-color: var(--footerfarbe); color:var(--textfarbe2); padding: 25px}
/* Format für die Überschrift h1, abhängig davon, ob sie in der Kopfzeile oder im Article steht */        
        header h1{background-color: var(--kopfzeile); font-size: 5em; text-align: center; color: var(--textfarbe2);}
        article h1{color: var(--textfarbe3);}
/* Container oder auch Wrapper genannt. Darin ist alles eingepackt und mittig ausgerichtet */        
        #container {width: 70%; margin:0 auto; border: solid 2px white; font-size: 20px; background-color: var(--hintergrundcontainer); box-shadow: 5px 15px 20px 2px black;}
/* Formate für den Inhalt auf der Seite. Main, Article, Sidebar usw. */
        main{padding: 20px;}
        article{padding: 25px}
/* Formate für die Navigation. Die Liste soll nebeneinander und nicht untereinander dargestellt werden. Die Links sollen beim Mouse over interaktiv reagieren */
        nav ul{padding: 5px;}
        nav ul li{display:inline; }
        nav a:link, nav a:visited{background-color: aliceblue; padding:5px 10px; color:gray; text-decoration: none; font-size: 2em; margin-right: 25px;}
        nav a:hover{background-color:#9AD4E6;}
        nav a:active{background-color: black; color: white;}
/* Formate für den Fließtext. p steht für Paragraph und damit ist ein Absatz gemeint */
        p{font-size: 1.4em; line-height: 1,6em; color: var(--textfarbe2)}
/* Formate für das Hero-Bild */
img{float: right; margin:25px 30px; border-radius: 400px;}
.footermenue li{list-style: none; display: block; width: 400px;background-color: antiquewhite; padding:5px 0px;}
.footermenue a:link, .footermenue a:visited{background-color: antiquewhite; padding:5px 20px; color:gray; text-decoration: none; font-size: 1em;  }
.footermenue a:hover{background-color: var(--container);}
.footermenue a:active{background-color: black; color: white;}
footer p {position:relative; bottom: 0; right: 0; font-size:0.6em;}