body {
                font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
                font-size: 1.1em;
                font-weight: 400;
                line-height: 170%; 
                margin: 0;
                background-color: #111;
                color: AntiqueWhite;
            }

            #container {
                max-width: 45%;
                margin: 0 auto;
            }

            #container a {
                color: BurlyWood;
                font-weight: bold;
                cursor: pointer;
            }
            
            #container a:hover {
                color: gold;
                font-weight: bold;
                text-decoration: none;
            }
            

            #flex {
                display: flex;
                padding-bottom: 0.5em;
            }
            
            header {
                display: flex;
                position: relative;
                flex: 1;
                order: 1;
                background-image: url('/images/koudelkalogo.png');
                background-repeat: no-repeat;
                background-color: transparent;
                background-position: center;
                height: 207px;
                margin: auto;
            }            
            
            nav {
              display: flex;
              flex: 1;
              order: 2;
              position: relative;
              background-color: transparent;              
              margin: auto;
              padding: 20px; 
              z-index: 20;
            }
            
            nav ul {
                display: inline-block;
                padding: 0;
                margin: auto;
                list-style-type: none;
            }

            nav li {
                background-color: #553836;
                font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
                text-transform: uppercase;
                padding: 0.5em 0.8em;
                margin: 0 0.2em;
                transition-duration: 0.4s;
                display: inline-block;
                border: 3px solid black;
                filter: drop-shadow(1px 1px 5px brown);
            }
            
            nav li a {
              text-decoration: none;
              cursor: pointer;
            }
            
            nav li:hover {
              background-color: black;
            }
            
            nav li a:hover {
              color: #c68437 !important;
            }
              

            main {
                position: relative;
                background-color: #553836;
                flex: 1;
                padding: 20px;
                order: 3;
                border-width: 3px;
                border-style: solid;
                border-image: linear-gradient(to right, #444 0%, gold 100%) 1;
                filter: drop-shadow(4px 4px 10px brown);
            }
            
            koudelka {
                position: absolute;
                width: 352px;
                height: 1050px;
                background-image: url('/images/koudelkatransparent2.png');
                background-repeat: no-repeat;
                background-color: transparent;
                left: 8%;
                top: 2%;
                z-index: 10;
            }

            h1,
            h2,
            h3 {
                font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
                color: AntiqueWhite;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: #ccc;
            }
            
            ul { 
                padding-left: 10px; 
            } 
            
            ol { 
                padding-left: 10px; 
            } 

            @media only screen and (max-width: 600px) {
                #container {
                    max-width: 90%;
                }
                
                #flex {
                    flex-wrap: wrap;
                }
                                
                header {
                  background-size: 80%;
                }
                
                nav {
                  width: 100%;
                  display: block;
                  z-index: 20;
                }
                
                nav li {
                  margin: auto;
                  font-size: 0.8em;
                }
                
                koudelka {
                  background-size: 20%;
                  margin: 0;
                }

            }