:root {
  --menu-colour: #c8b99a;
  --hamburger-lines: 1px;
  --hamburger-lines-colour: #4b4c4e;
  --hamburger-hover-colour: #c8b99a;
  --hover-colour: #999c9e;
  --menu-background: #4b4c4e; 
  --menu-width: min(30%, 20rem);
  --timeless-light-grey: #dfe0e1;
  --timeless-mid-grey: #999c9e;
  --timeless-heavy-grey: #696b6d;
  --timeless-dark-grey: #4b4c4e;
  --timeless-beige: #c8b99a;
  
}


.menu {
  position: fixed;
  top: 0;
  margin-top: 27px;
  right: 30px;
  width: 30px;
  height: 22px;
}

.hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  background: var(--hamburger-lines-colour);
  width: 100%;
  height: var(--hamburger-lines);
  border-radius: 0px;
  z-index: 100;
  transition: 0.3s;
}

.hamburger:before, .hamburger:after {
  position: absolute;
  content: "";
  width: 100%;
  height: var(--hamburger-lines);
  background: var(--hamburger-lines-colour);
  border-radius: 0px;
  transition: 0.3s;
}

.hamburger:before {
  top: calc(var(--hamburger-lines)*-10);
}

.hamburger:after {
  top: calc(var(--hamburger-lines)*10);
}

#menuToggle {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
  cursor: url('Timeless_cursor.svg') 8 8,url('Timeless_cursor.png') 8 8, pointer;
  opacity: 0;
}

#menuToggle:hover{
    cursor: url('Timeless_cursor_hover.svg') 8 8,url('Timeless_cursor_hover.png') 8 8, auto;
}

.menu-items {
  position: fixed;
  top: 0;
  right: calc(var(--menu-width)*-1);
  background: var(--menu-background);
  width: var(--menu-width);
  height: 100vh;
  padding-top: 50px;
  transition:0.5s ease-out;

}

.menu-items li {
  list-style-type: none;
}

.menu-items li a{
  display: block;
  text-decoration: none;
  color: var(--menu-colour);
  padding: 10px 10px 10px 10px;
  transition:0.9s;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-transform: uppercase;
}
/*.menu-items li.nav-dropdown > ul {
  min-width: max-content;
  max-height: 0;
  opacity: 0;
  transition:0.5s ease-out;

}
.menu-items li.nav-dropdown:hover ul{
  max-height: 200px;
  opacity: 1;
}
*/
.menu input:checked ~ .menu-items{
  right: 0;
}

.menu input:checked ~ .menu-items li a:hover {
  padding: 10px 10px 10px 30px;
  background: var(--menu-colour);
  color: var(--menu-background);
}

.menu input:checked ~ .hamburger, 
.menu input:checked ~ .hamburger:before,
.menu input:checked ~ .hamburger:after {
  background: var(--hamburger-hover-colour);
}
.menu input:checked ~ .hamburger:before{
  transform: translate3d(0px,10px,0px)  rotate(45deg);
  transition: 0.5s;

}
.menu input:checked ~ .hamburger:after{
  transform: translate3d(0px,-10px,0px)  rotate(-45deg);
  transition: 0.5s;

}
.menu input:checked ~ .hamburger{
  background: none;
  transition: 0.5s;


}



@media screen and (max-width: 600px) {
  .menu-items {
  position: fixed;
  top: 0;
  right: -100%;
  max-width: none;
  background: var(--menu-background);
  width: 100%;
  height: 100vh;
  }
}