*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#ham{
  background-color:#999999 ; 
  /* margin-right: 20px;   */
  
  padding: 5px;
}
#menu{
  background-color:white;
  width:50px;
  height:50px;
  /* box-shadow: 5px 5px 2.5px #5F5F5F; */
  /* position:relative;  */
  display: flex;
  align-self: center;
  margin-top: 5px;
  margin-left: 5px;
  /* padding: 20px; */
  z-index:5; 
  border-radius: 25%;
  /* margin-right: 5%; */
}
#bars, #bigx{
  height:50px; 
  width:50px}
.ham-menu {
  height:100%; 
  width:0%;
  display:none; 
  border:black solid 2px;
  /* box-shadow: 10px 10px 5px #5F5F5F */
}
.ham-menu2 {display:inline;border:black solid 2px;
  /* box-shadow: 10px 10px 5px #5F5F5F; */
  position:absolute; top:5px; left:5px; z-index:5; margin-right: 5%;}
#ham a {color:white; text-decoration:none; z-index:10 !important; }
#ham ul{ list-style-type: none; margin-right: 15%;}
#ham:focus{outline-color:black; }
#site{margin-right: 15%;}
#bars {
    -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
}


#bigx {
    -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  z-index:11;
}

#body {z-index:0;
box-sizing: border-box;
margin: 0;
padding: 0%;
margin-top: 60px}
#nav-menu{
display: flex;
align-self: center;
}
nav{
  /* background-color: #666666; */
  min-width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
}