#header{
position:relative;
display:block;
width:100%;
height:100px;
}

#logo{
position:relative;
display:inline-block;
margin-left:0px;
height:100%;
aspect-ratio: 1/1;
}

#logo img{
width:100%;
height:100%;   
}

#menuExpander{
position:absolute;
right:0px;
display:inline-block;
width:50px;
height:50px;
background:lightgray;
}

#menuExpander .bar{
position:absolute;
display:block;
width:40px;
left:5px;
height:6px;
background:black;
}

#highbar{
top:9.5px;
}

#midBar1{
top:22px;
transform-origin:50% 50%;
transition-duration:1s;
}
#midBar2{
top:22px;
transform-origin:50% 50%;
transition-duration:1s;
}
.midBar1Morph{
transform:rotateZ(45deg);
transition-duration:.5s;
}
.midBar2Morph{
transform:rotateZ(-45deg);
transition-duration:1s;
}
#lowBar{
top:34.5px;
}

.hide{
opacity:0;
transition-duration:.5s;
}

#menu{
position:absolute;
display:block;
width:20%;
transform-origin:100% 50%;
transform:rotateY(90deg);
background:#f2f2f2;
right:0px;
top:50px;
margin-top:0px;
margin-bottom:0px;
transition-duration:1s;
list-style-type:none;
box-shadow:3px 3px 5px black;
padding-left:0;
z-index:5;
}
.menuExpand{
transform:rotateY(0deg)!important;
transition-duration:.5s;
}
#menu li{
width:100%;
text-align:center;
font-size:20pt;
border:1px solid black;
}
#menu li:hover{
background:white;
box-shadow:3px 3px 3px lightgreen inset,-3px -3px 3px lightgreen inset;
text-shadow:2px 2px 5px lightblue;
}