#menu-bar{
display: none;
}
header label{
float: right;  
margin: 6px 0;
font-size: 28ox;
cursor: pointer;
}
.menu{
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 100vh;
background:  rgb(81, 86, 90);
transition: all 0.5s;
transform: translateX(-100%)
}
.menu a{
display: block;
padding: 15px;
height: 50px;
border-bottom: 1px solid rgba(255,255,255,0.5);
color: #fff;
text-decoration: none;
 }
.menu a:hover{
background: rgba(255,255,255,0.3);
 }
#menu-bar:checked ~ .menu{
transform: translateX(0%) 
}
@media (min-width:1024px){
     .menu{
         position: static;
         width: auto;
         height: auto;
         transform: translateX(0%);
         float: right;
         display: flex;
       }

     .menu a{
         border: none;
     }

     header label{
         display: none;
     }
}