#menu-bar{
  display: none;
}

header label{
    float: right;
    font-size: 28px;
  margin: 6px 0;
    cursor: pointer;
}

.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: #fff;
  height: 50px;
  text-decoration: none;
  padding: 15px;
}

.menu a:hover{
  color: orange;
  background: black;
}

#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;
  }
}