/* ============================== */
/* === Powered by locomputing === */
/* ============================== */

nav {
display: block;
width:100%;
height: auto;
border:none;	
margin-bottom: 2em;
}

#nav-menue {
width :100%;
position:absolute;
top:0;
left:0;
z-index: 999;
}

#nav-menue a {
text-decoration: none;
}

.menue-button {
left:calc(.35em + ((.35vw - 0.1em) * 3));
top: -5px;
color:black;
}

.menue-button {
position:absolute;
margin:0 auto;
z-index:1000;
width: calc(1em + ((1vw - 0.1em) * 3));
height:auto;
font-size: 200%;
font-weight: bold;
}

.menue-button-zu {
visibility:hidden;
}

#nav-menue:target #menu  {
visibility:visible;
margin-top:0;
margin-left:0;
background: white;
}

#nav-menue:target .menue-button-zu  {
visibility:visible;
display: inline-block;
margin-top:2px;
background: transparent;
}

#nav-menue:target .menue-button-open {
visibility:hidden;
margin-top:0;
background-color: black;
}

#menu {
z-index:999;
background: red;
visibility:hidden;
position:absolute;
top:0;
left:0;
overflow:hidden;
width:100%;
height:auto;
font-size: 100%;
font-weight: bold;
margin: 0;
padding:2.5em .5em .5em 0;
}

ul li {
display:block;
text-align: left;
margin:0 .5em 0 0;
line-height: 1.5;
color:red;
}

ul li a {
color:blue;
text-decoration: underline;
}

ul li a:hover {
color: green;
text-decoration: none;
}


@media screen and (min-width: 60em) {

nav {
position: relative;
margin: 0 auto 1em auto;
padding:0;
}

.menue-button {
display:none;
}

#nav-menue {
position:relative;
height:auto;
padding:4px 0 .15em 0;
}

#menu {
	visibility:visible;
	background: white;
	padding: 0;
	text-align:center;
	position:relative;
	font-size: 100%;
	min-height:.1em;
	margin:0 .2em 1em .2em;
width: 90%;
height: auto;
border-right:none;
border-bottom:none;
}

ul li {
display:inline;
list-style-type: none;
text-decoration: none;
padding:.2em .5em;
margin:0 auto;
text-align: center;
color:red;
}

}