html,body {
	margin: 0;
	background-color: #ffffff00;
	color: #000000;
	overscroll-behavior: none;
	overflow: hidden;
	height:100%;
	width:100%;
	font-family: 'Verdana', sans-serif;
}

.nav {
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:0px;
	display: flex;
	flex-flow: column nowrap;
	align-content: flex-start;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width: thin;
	z-index: 1;
	background-color: #00000011;
	transition: 0.5s;
}

.transformedNav {
    width:20em;
  }
  
.langSelector {
	padding-top:20px;
	height:auto;
	width:100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	background-color: transparent;
}

.subNav {
	padding-top:3em;
	padding-bottom:1m;
	padding-left:0.2em;
	padding-right:0.2em;	
}

.line1 {
    transition: transform 0.5s;
    transform-origin: 50px 30px;
  }

.transformedLine1 {
    transform: translate(0px, 20px) rotate(45deg) ;
  }
  
.line2 {
    transition: opacity 0.5s;
  }

.transformedLine2 {
	opacity:0;
  }

.line3 {
    transition: transform 0.5s;
    transform-origin: 50px 70px;
  }

.transformedLine3 {
    transform: translate(0px, -20px) rotate(-45deg) ;
  }  
  
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
  outline: 1px solid slategrey;
}

.menuButton{
	position: absolute;
	top: 5px;
	right: 0px;
	width: 100px;
	height: 100px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	color:white;
	font-size:3em;
	cursor: pointer;
	}
.knopf1 {display:flex; align-items:center; justify-content:center;text-align: center; box-sizing:border-box; border: 1px solid #aaaaff;border-radius:0.5em;margin:0.4em; 
		height:3.2em; width:16em;min-width:170px;min-height:2.5em;background-color: #eeeeff;opacity:0.5;}
.knopf1:hover{ opacity: 0.8;}

.knopf2 {display:flex; align-items:center; justify-content:center; text-align: center;box-sizing:border-box; border: 1px solid #aaaaff;border-radius:0.5em;margin:0.4em; margin-left:0.9em; 
		height:3.2em; width:16em;min-width:170px;min-height:2.5em;background-color: #eeeeff;opacity:0.5;}
.knopf2:hover{ opacity: 0.8;}

.knopf3 {display:flex; align-items:center; justify-content:center; text-align: center;box-sizing:border-box; border: 1px solid #ffcccc;border-radius:0.5em;margin:0.4em; margin-left:1.8em; 
		height:3.2em; width:16em;min-width:170px;min-height:2.5em;background-color: #ffeeee;opacity:0.5;}
.knopf3:hover{ opacity: 0.8;}

.knopf4 {display:flex; align-items:center; justify-content:center; text-align: center;box-sizing:border-box; border: 1px solid #ffcccc;border-radius:0.5em;margin:0.4em; margin-left:2.7em; 
		height:3.2em; width:16em;min-width:170px;min-height:2.5em;background-color: #ffeeee;opacity:0.5;}
.knopf4:hover{ opacity: 0.8;}
.icon {box-sizing:border-box;
		height:3vmax; width:3vmax;
		place-self: center;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
		-webkit-touch-callout:none;
		pointer-events: none;}