nav { position:relative;z-index:999;}
nav { width:96%;margin-left: auto;margin-right:auto; padding: 0;text-align:center;}  
nav:after { content: "";  display: table; clear: both;}
nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; }
nav ul ul { display:none; position: absolute;width:auto;background:#4f4}
nav ul li { margin:0px; display:inline-block; float:left}
nav ul li ul li:hover { background:#000; }    
nav a:hover { background-color:#000; }    
nav a, label { display:block; padding:0 8px; color:#afe; line-height:26px; text-decoration:none;font-weight:700;}
nav ul li:hover > ul { display: inherit; }
nav ul ul li { width:120px; float: none; display: list-item;  position: relative;}    
li > a:after { content: ' ↷'; }
.toggle, [id^=drop] { display:none;}
li > a:only-child:after { content: ''; }
nav ul{margin:1px auto;width:100%; display:flex;justify-content: center; align-items: center;}  
nav ul li {list-style:none;padding:3px;margin:1px;border-radius:12px 1px 12px 1px;border:2px solid white;
/* background: linear-gradient(to bottom, rgba(120,120,255) 10%, rgba(255,40,40) 60%,rgba(90,190,50) 90%); */
background-image: linear-gradient(to right top, #f00, #d01, #a02, #702, #401, #302, #302, #504, #607, #61C, #14f);
}
.drehen {float:none; transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px;color:#fff; text-shadow:#111 2px 2px 4px;}
.drehen:hover {transform:rotate(360deg);}    /* transform: skew(10deg, 30deg); */

.top {
  padding:0 4px 4px 4px; font-size:22px; color: #33f; background: #c33;
  border-radius: 100px;
  position: sticky;
  bottom: 20px; 
  --offset: 200px;
  margin-top: calc(100vh + var(--offset));
  margin-left:91%;
  text-align:center;  
  border:2px solid #fff;
  z-index:999;
}
.top a {color:#5ff;text-decoration:none}


input#open-menu{display:none;}
input[type=checkbox]:checked~nav{display:block;}
label.open-menu-label{background-color:#6bd;background:linear-gradient(to bottom, #6bd 0%,#332 100%);padding:2px 8px 8px;border:1px solid white;display:block;width:30%;}


@media all and (max-width:768px) {  
nav { margin: 0; }  
.toggle + a, .menu { display:none; }  
.toggle { display:block;}
.toggle:hover { }

[id^=drop]:checked + ul { display: grid; }
nav ul li { display: block;}
nav ul ul a { padding: 0 20px; }
nav a:hover { background-color: #464; }
 
nav ul ul { float: none; position: static; color: #fff; }
nav ul li:hover > ul { display: none; }
nav ul ul li { display: block; width:auto;}
}

@media all and (max-width : 230px) {  
nav ul li {  display: block; width: 54%;}  
.toggle + a { display:block; }   
}

@media only screen and (horizontal-viewport-segments: 2) {
 nav ul li { display: block; width: 54%;}    
.toggle + a { display:block; } 
}