@media only screen and (min-width:0px){#wrapper {max-width: 100%; margin: 0 2%;padding: 0 2%;} #topnav ul li{font-size:0.7em;} body{font-weight: 400;font-size: 1em;}}
@media screen and (min-device-width: 400px){#topnav ul li{font-size:0.9em;}}
@media screen and (orientation:landscape){#topnav ul li{font-size:0.9em;}}
@media only screen and (min-width:1168px){#wrapper {max-width: 80%; margin: 0 10%;padding: 0 60px;} #content{max-width:calc(6*(100vw/12) - 28px)}}
@media only screen and (min-width:2000px) {body{font-size: 1.5em;}}

html {height:100%;width:100%;}
body {
    background-color: #faf8f5;
    color: #242424;
    font-family: "Poppins",sans-serif;

    line-height: 1.5;
    margin: 0 auto;
    max-width:1600px;
}

h1 .title{font-size: 170%;font-weight:700;text-align:center;}

#content p.quelle {font-size:70%;margin: 2% 4% 1% 1%;}
#content p.caption {font-size:70%;font-weight: bold; margin: 2% 4% 1% 1%;}

#topnav	{width:100%;}
#topnav ul li	{display: inline-block;padding:0 1em;}
#topnav ul li a	{color: #8d6708;text-decoration:none;font-weight: 600;letter-spacing: normal;line-height: 1.2;}
#topnav a:focus,a:hover,a:active {color:#5d4405;text-decoration:none;}
#topnav ul{width:100%;padding:0;text-align:center;}

h1 {font-size: 170%; text-align:center;}
h2 {font-size: 120%; text-align:left;}

#content {margin:0 auto;}
#content p {text-align:justify;}
#content a {color: #5d4405;text-decoration:none;}

#content img {display:block; width:90%;margin:0 auto;}


#flex-container {
  display:inline-flex;flex-wrap:wrap;width:100%;height:85vh;background-color:#faf8f5;justify-content: center;align-items: center; 
}

.flex-item {height:30vh; width:50%;}
.center {display:flex;height:30vh;justify-content: center;align-items: center;padding:0 10%;text-align:center;}