body {  
        background-color: rgb(193, 189, 186); 
        margin:0px;
        padding:0px;
}
header {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content:flex-end;
        align-content:center; 
        position:relative;
        top:0px;
        width: 100%; 
        height:auto;
        background-image: url("obrazy/20220406_175710.jpg");
        background-attachment:scroll; 
        background-position: 50% 50%; 
        background-size: cover; 
        margin-top:63px;
        padding:10px; 
        z-index: 4; 
        box-shadow: 9px 9px 5px 5px rgb(86, 68, 68);
                
          animation-name: fondo;
          animation-duration: 30s;
          animation-iteration-count: infinite;
          animation-direction: normal;
          animation-delay: 2s;
          animation-timing-function: linear;
} 
@keyframes fondo {
                0% { background-image: url("obrazy/20220406_175710.jpg") ;}
                30% { background-image: url("obrazy/20220401_154643.jpg") ;}
                35% { background-image: url("obrazy/20220709_093118.jpg") ;}
                75% { background-image: url("obrazy/20220128_174450.jpg") ;}
                90% { background-image: url("obrazy/20220711_105245.jpg") ;}
                100% { background-image: url("obrazy/20220406_175710.jpg") ;}
}


header h1 {
        position:relative;
        color: white; 
        font-size: 45px; 
        text-decoration: underline; 
        flex-shrink: 10;
        padding:10px;
        margin:10px;
        margin-top: 80px;
}
header h2 {
        color: white; 
        font-size: 30px; 
        font-style:italic;
        flex-shrink: 7;
        padding:10px;
        margin:10px;
}
nav {
        display:flex;
        flex-wrap: wrap;
        justify-content:start;
        position: fixed; 
        top: 0px; 
        left: 0px; 
        width: 100%;
        height:auto; 
        margin-bottom:70px;
        background-color: rgb(50, 41, 41);  
        padding:5px ; 
        z-index: 5; 
        box-shadow: 3px 2px 5px 5px rgb(86, 68, 68); 
}
article {display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
        width: 90%; 
        min-height: 500px; 
        max-height:1500px; 
        padding: 30px; 
        margin: 2% 2% 2% 2%; 
        font-size:18px; z-index: 2; 
        overflow: auto; 
} 
.contentbackground { 
        background-image: url("obrazy/fondo\ transparency60.png"); 
        background-repeat:repeat-y;
        background-position: center; 
        background-size: cover; 
        border-radius: 50px; 
        box-shadow: 9px 9px 5px 5px rgb(86, 68, 68); 
}
footer{ 
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 1px solid black; 
        width: 100%; 
        
        background-color: rgb(50, 41, 41);
        color: white ; 
        text-align: center; 
}
nav > div { 
        height: 1.5em;
        font-size: 20px; 
        color: white;
        margin:5px;
        padding:5px; 
        margin-right:2em; 
        list-style-type: none; 
        text-decoration: none;
        border-radius: 15%;
} 
a:link {color: white; text-decoration: none;}
a:visited {color: rgb(251, 220, 220) ; text-decoration: none;}
nav a:hover {color:rgb(227, 121, 15);} 
nav a:active {color:rgb(227, 15, 15) ;}
nav div:hover { background-color: rgb(131, 106, 106);}  
nav div:active {background-color: rgb(212, 196, 196);}
nav .navelementfoto:hover { background-color: inherit;}
nav img:hover{width:30px;}
span.distinction {
        font-size: 20px; 
        font-weight: bold ; 
        font-style: normal;
}
article > img {
        width:25%;
        min-width: 150px;
        margin: 10px; 
        margin-right: 15%;
        padding: 5px;
        border: 3px solid rgb(76, 65, 65); 
        border-radius: 20px;
}