/*CSS Syntax:

selector {property: value(s); }

*/

body {
    margin: 0;
    background-color: lightcyan;
}

header {
    /*
    display: flex;
    min-height: 60vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding: 30px;
    background-color: crimson;
    */

    background-image: url(../img/header-bg/kugel.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
     /*
     background-image: url(../img/header-bg/arktischerwolf.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    */
}

/*
.www-colors header {
    background-color: #f500a9;
}
*/

/*
.htmlcss-colors header {
    background-color: #522cf5;
    */
/*
}

.responive-colors header {
    background-color: red;
}
*/

/*
.layout-colors header {
    background-color: red;
    */
/*
}

.bildformate-colors header {
    background-color: darkseagreen;

}
*/

h1 {
    margin-bottom: 0.3em;
    text-align: center;
    font-size: 5em;
    text-transform: uppercase;
    color: ghostwhite;
    margin-top: 0.3em;
    position: centre;
    
cursor: pointer;
display: block;
font-family: Roboto, Roboto-fb, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-feature-settings: normal;
font-size: 60px;
font-variation-settings: normal;

    
}

.current {
    background-color: black;
    color: white;

}

nav a {
    background-color: 0;
    margin: 0, 2em;
    
/*

    
    transition: background 1s ease-out;
    */
    color: blue;
    background-color: black;
    align-items: center;
border-bottom-color: rgb(18, 18, 18);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(18, 18, 18);
border-left-style: solid;
border-left-width: 2px;
border-right-color: rgb(18, 18, 18);
border-right-style: solid;
border-right-width: 2px;
border-top-color: rgb(18, 18, 18);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: solid;
border-top-width: 2px;;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(61, 245, 199, 0.2) 0px 0px 0px 0px;
box-sizing: border-box
display: block;
font-family: cairo, pirulen, sans-serif;
font-feature-settings: normal;
font-size: 16px;
font-variation-settings: normal;
font-weight: 600;
height: 44px;
justify-content: center;
letter-spacing: normal;
line-height: 16px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
pointer-events: auto;
position: relative;
scrollbar-color: rgb(18, 18, 18) rgb(18, 18, 18);
tab-size: 4;
text-align center
text-decoration-color: rgba(0, 0, 0, 0);
text-decoration-line: none;
text-decoration-style: solid;
text-decoration-thickness: auto;
text-size-adjust: 100%;
text-transform: uppercase;
text-wrap-mode: wrap;
text-wrap-style: pretty;
transition-behavior: normal;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-out;
width: 528.492px;

}

main {
    padding-top: 5em;
    padding-left: 1em;
    padding-bottom: 5em;
    padding-right: 1em;
    background-color: blue;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image-container figure {
    width: 390px;
    flex-grow: 1;
    margin: 2px;
    filter: grayscale(1);
    transition: background 0s ease-out;
}

.image-container figure:hover {
    filter: grayscale(0);
}

nav a: hover {
    color: white;
}

h3 {
    text-align: center;
    font-size: 1.5em;
    margin: 2.2em;
    text-transform: uppercase;
    font-weight: 400;
}

.www-colors main {
    background-color: #20033f;
}

.htmlcss-colors main {
    background-color: #20033f;
}

.responsive-colors main {
    background-color: #20033f;
}

.layout-colors main {
    background-color: #20033f;
}

.bildformate-colors main {
    background-color: #20033f;
}

article {
    padding-bottom: 3em;
    padding-top: 1em;
    margin-bottom: 8em;
    max-width: 1051px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    font-family: cairo, pirulen, sans-serif;
font-feature-settings: normal;
font-size: 16px;
font-variation-settings: normal;

    

}

.container {
    margin-top: 2.5em;
    margin: 2.5em 0;
    margin-bottom: 2.5em;
    padding: 1em;
    background-color: #c792df;;
}

.item {
    padding: 0.5em;
    margin: 0.5em;
    background-color: #7d67e0;;
    color: white;
    text-transform: uppercase;
}

.display-inline.item {
    display: inline;

}

.display-inlineblock.item {
    display: inline-block;

}

.display-flex .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    Background-color: hsl (46, 73%, 60%);
    min-height: 40vh;
    align-items: center;
}

.display-flex .item {
    border: solid black 1px;
    background-color: white;
    color: black;


}

h2 {
    margin-top: 0.5em;
    font-weight: 400;
    margin-bottom: 0.4em;
    font-size: 2.5em;
    text-transform: uppercase;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    
    border-bottom-color: rgb(229, 231, 235);
border-bottom-style: solid;
border-left-color: rgb(229, 231, 235);
border-left-style: solid;
border-right-color: rgb(229, 231, 235);
border-right-style: solid;
border-top-color: rgb(229, 231, 235);
border-top-style: solid;
box-sizing: border-box;
color: rgb(27, 24, 24);
display: block;
font-family: pirulen, cairo, sans-serif;
font-feature-settings: nor;
font-variation-settings: normal;
letter-spacing: 0.6px;
line-height: 44px;
/*
margin-block-end: 0px;
margin-block-start: 0px;
margin-bottom: 0px;
margin-inline-end: 0px;
margin-inline-start: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
scrollbar-color: rgb(18, 18, 18) rgb(18, 18, 18);
tab-size: 4;
*/
text-size-adjust: 100%;

}

p {
    max-width: 80ch;
    /*
        margin-right: auto;
        margin-bottom:1.5em;
        margin-left: auto;
    
        */
    margin: 0 auto 1.5em auto;
    padding: 0 1em;
    font-size: 1.1em
}

.merksatz {
    max-width: none;
    border-top: solid 4px black;
    font-size: 1.8em;
    border-bottom: solid 0.1em black;
    padding: 1.4em 2.4em;
    margin: 2em 0;
    text-align: center;
}

.htmlcss-colors .merksatz {
    background-color: skyblue;
}

.layout-colors .merksatz {
    background-color: #c79edf;
}

/*.mack{
    background-color: darkviolet;
    
    color: yellow;
    font-size: 4em;
    font-weight: bold;
    padding: 1em;
    border: groove 10px;
}*/


main a {
    color: black;
}

figure {
    background-color: #fafafa;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 0;
    margin-right: 0;
}

img {
    width: 100%;
}

figcaption {
    padding-bottom: 1em 1em 1.5em 1em;
    font-size: 0.9em;
    text-align: center;
}

footer {
    padding-top: 1em;
    padding-right: 3em;
    padding-bottom: 1em;
    padding-left: 3em;
    background-color: black;
    color: white;
    
    font-family: cairo, pirulen, sans-serif;
font-feature-settings: normal;
font-size: 16px;
font-variation-settings: normal;
font-weight: 400;
    
}

ul {
    list-style: none;
    max-width: 80ch;
    margin: 0 auto 1.5em auto;
    padding: 0 1em;


}

li {
    border-top: solid 0.1em black;
    margin-bottom: 32em;
    padding: 1em 2em;
    font-size: 1.1em
}


}
}