#menu-bar{ 
display: none;
}
header label{float:right;
font-size:28px; margin:6px 0;
cursor:pointer; color:#0000ff;}
.menu{position:absolute;
top:50px;
left:0;
width:100%;
height:100vh;
background:rgba(51,51,51,0.9);
transition: all 0.5s;
transform:translateX(-100%);
}

.menu a{display:block;
color:#0000ff; height:50px; text-decoration:none;
padding:15px;
border-bottom:1px solid rgba(72,26,187,0.3);
}

.menu a:hover{
background:rgba(72,26,187,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;
}
}