.header a {
  text-decoration: none;
	color: inherit;
	line-height: 2.5em;
}
.header a:hover{
	background-color: hsl(150, 2%, 90%);
	border-bottom: 1px solid #000;
}

.menu-items {
	list-style: none;
	position: fixed;
    top: -1em;
    right: 0;
    height: 100vh;
    transform: translateX(100vw);
    background-color: hsla(150, 2%, 90%, 0.9);
    transition: transform 0.5s ease-out;
	padding: 8em 2em 0 1em;
	text-align: right;
	z-index: 2;
}

  .menu-items.open {
    transform: translateX(0);
  }

/* nav menu button */
.menu-btn {
	position: fixed;
cursor: pointer;
z-index: 4;
    background-color: hsla(150, 2%, 90%, 0.9);
top: 0;
right: 3em;
width: 3em;
height: 3em;
padding:  2.5em 0 0 1.4em;
	box-sizing: unset;
}
.menu-btn__lines,
.menu-btn__lines::before,
.menu-btn__lines::after {
  width: 2rem;
  height: 0.2rem;
  background-color: #000;
  transition: all .2s ease-out;
}
.menu-btn__lines::before,
.menu-btn__lines::after {
  content: "";
  position: absolute;
}
.menu-btn__lines::before {
  transform: translateY(-0.5rem);
}
.menu-btn__lines::after {
  transform: translateY(0.5rem);
}
/* animation */
.menu-btn.open .menu-btn__lines {
  transform: translateX(2rem);
  background-color: transparent;
}
.menu-btn.open .menu-btn__lines::before {
  transform: rotate(45deg) translate(-1.5rem, 1.5rem);
  background-color: #000;
}
.menu-btn.open .menu-btn__lines::after {
  transform: rotate(-45deg) translate(-1.5rem, -1.5rem);
  background-color: #000;
}
.menu-btn__lines{
	margin-top: 1em;
}



@media (orientation: portrait){
	.menu-btn {
right: 1em;
width: 1.8em;
height: 1.8em;
padding:  0.2em 0.3em 0.4em 0.7em;
}
.menu-btn__lines,
.menu-btn__lines::before,
.menu-btn__lines::after {
  width: 1.5rem;
  height: 2px;
}
}