@font-face{font-family:pacific;src:url(pacifico.woff2) format("woff2")}
*{margin:0;padding:0}
a{color:#1495ff;text-decoration:none}
a:hover{text-decoration:underline}
body{font-size:100%;width:98vw;line-height:1.75em;font-family:Verdana,Roboto,sans-serif;color:#ebe1d9;background:linear-gradient(#111,#c00)}
h1,h2,h3{margin-bottom:1em;color:#fff}
img.left{float:left;margin:5px 20px 20px 0}
p{margin-bottom:1.5em}
ul{display:block;list-style:none}
.imageList{list-style:none}



#content{padding:14px;background:#fff}
#copyright{padding:0 0 80px;text-align:center;color:#d8c2ab}

header{display:flex;flex-wrap: wrap; padding:10px 10px;min-height:70px; width:98%;z-index:99}
#logo{position:relative;top:15px;left:20px;height:30px;line-height:30px}
#logo a{color:#fff}
#logo h1{font-size:3em;font-family:pacific;text-shadow:5px 2px 1px #b00}

article {color:#555; position:relative; width:96%; margin-left:auto; margin-right:auto;z-index:-1}
article h2, article h3{color:#242424}
article ul li{padding:8px 0; border-top:dotted 1px #b3b3b3}
article ul li.first{padding-top:0;border-top:0}
article ul.imageList li{padding:8px 0}


nav{position:absolute;top:30px;left:68%; min-height:45px;width:85%;z-index:98;}
nav a {color:#fee;text-shadow:0 1px 1px #eb7;}
nav ul{display:flex; flex-wrap:wrap; flex-direction:column}
nav li {margin:0 1em;border:dotted 1px #ca9;border-radius:.4rem;padding:0 2px;width:150px}
#menu{margin-top:-250px;width:96%;max-width:90%;min-height:54px;background:#311;font-size:20px;visibility:hidden;transition:all 1s;opacity:0  }

#menu li{display:block;text-align: center;margin:4px 20px 0 -50px;width:130px;height:35px;border:1px solid #fa3;border-radius:8px 2px;background:#311}
#menu a {line-height:35px;height:33px;margin:1px;padding:2px;letter-spacing:-1px;color:#ffe;}
#menu a:hover{background:rgba(30,200,30,.5);}  
.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:24px;font-weight:900;color:#fff;text-shadow:#111 2px 2px 4px}
.drehen:hover{transform:rotate(720deg)}
label{display:inline-block;color:#fff;background:#a81;padding:.4rem 1rem;margin:3.2rem 2px}

input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:-50px;margin-left:0}
.top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}

#sidebar{float:left;padding:20px;background:#321;color:#edc}
#sidebar a{color:#eee}
#sidebar h2,#sidebar h3{color:#fff}
#sidebar ul li{padding:15px 0;border-top:dotted 1px #70665f}
#sidebar ul li.first{padding-top:0;border-top:0}    

@media (min-width:1024px) and (orientation:landscape) {
#menu{background:0 0;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:-290px;max-width:60%}
#menu ul {background:0 0; display:flex; flex-direction:row; align-content:flex-end; width:max-content;}
#menu li {display:max-content}
#menu li a{font-size:80%; width:100%;height:43px;padding:4px;margin:2px}
#menu ul li{display:inline-block; text-align:center; margin:1px 9px; width:auto;}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:-52rem;margin-left:0}
article {display:flex;}
#content{width:64%;padding:20px;background:#fff}
#sidebar{width:27%;float:left;padding:30px;}
}