body {
    background-color: lightskyblue;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: black;
    margin: 1rem;
}
/* ---------------------------------------------------------*/
/* Anweisung für die Listenelemente des Navigationsbereichs */
nav li {
    display: inline;    /* stellt die Links / Listenelemente nebeneinander */
    margin: 0.5rem;     /* schafft etwas Platz zwischen den Links */
    
}

/* hiermit wird die vorher im HTML Dokument definierte Klasse "nav-link" angesprochen */
.nav-link {
    text-decoration: none;  /* entfernt den Link-typischen Unterstrich */
    color: black;           /* ändert die Schriftfarbe des Links von blau (default für links] auf schwarz */
    font-size: larger;
}

nav {
    text-align: center;     /* zentriert die Navigationsleiste */
    background-color: whitesmoke;       /* Hintergrundfarbe der Navigationsleiste */
    padding: 0.5rem;    /* schafft ober und unterhalb der Links etwas Platz */
}

nav ul {
    padding: 0;     /* entfernt Rahmen der Liste (würde sonst mit Angaben im "nav" kollidieren */
    margin: 0;
}

/* - - - - - - - Ende CSS für Navigation - - - - - - - - */

/* - - - - - - - CSS für die Artikel - - - - - - - - */

.infoboxen {
    background-color: whitesmoke;
    padding: 1rem;
    margin-bottom: 1rem;
    
}

.infobox {
    text-align: center;
    background-color: white;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;

}

/* - - - - - - - Ende CSS für die Artikel - - - - - - - - */

/* - - - - - - -  CSS zur Darstellung der Tasten im HTML 
(wenn zur Erläuterung angegeben wir, welche Tasten auf der Tastatur/Keybord (kbd) gedrückt werden sollen - - - - - */

kbd {
    background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
    border: thin solid #aaa;
    border-radius: 2px;
    box-shadow: 1px 2px 2px #ddd;
    font-family: inherit;
    font-size: 0.9em;
    padding: 0 0.5em;
}

/* - - - - - - -  Ende CSS zur Darstellung der Tasten im HTML - - - - -  - */


/* - - - - - - - - - - CSS für die Darstellung der Bilder - - - - - - */

figure {

    margin-left: 0;
    margin-right: 0;
  }
img {
    border-color: white;
    border-width: 0.5rem;
    border-style: solid;
    border-radius: 25px;
    max-width: 100%;

}  


/* - - - - - - - - - - Ende CSS für die Darstellung der Bilder - - - - - - */



/* - - - - - - - CSS für das Kontaktformular - - - - - - - */ 

form{
    max-width: 400px;
    background-color: whitesmoke;
    padding: 1rem;
}
div{
    margin-bottom: 1rem;
}
label
    {
    cursor: pointer;
    display: block;
}

button{
    background-color: rgb(112, 112, 117);
    color: white;
    padding: 0.2rem;
    border-radius: 0.25rem;
    border-width: 1px;
    font-size: small;
    cursor: pointer;
}

.contact-info {
    padding: 0;
    margin: 0;
}


form {
    font-family: Arial, Helvetica, sans-serif;
}
/* - - - - - - - Ende CSS für das Kontaktformular - - - - - - - */ 

/* - - - - - - - CSS für den Fußbereich - - - - - - - */ 
footer ul {
    padding: 0;     /* entfernt Rahmen der Liste (würde sonst mit Angaben im "nav" kollidieren */
    margin: 0;
    }

footer li {
    display: inline;    /* stellt die Links / Listenelemente nebeneinander */
    margin: 1rem;     /* schafft etwas Platz zwischen den Links */
    
}
.site-footer {
    background-color:rgb(153, 151, 151);
    color: rgb(255, 255, 255);
    padding: 0.5rem;
    margin: 1rem 0;
    text-align: right;
    font-size: smaller;
    font-weight: bolder;
    
}
.site-footer a {
    color: white;
    text-decoration: none;
}
/* - - - - - - - Ende CSS für den Fußbereich - - - - - - - */