.menu-toggle {
  position: relative;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--wp--preset--color--primary);
  color: red;
  cursor: pointer;
}

.menu-toggle .hamburger-icon{
  display: block;
  position: relative;
  height: 16px;
}

.menu-toggle .hamburger-icon em{
  width: 26px;
  height: 1px;
  background: var(--wp--preset--color--primary);
  display: block;
  position: relative;
  top: 50%;
}
.menu-toggle .hamburger-icon em:before{
  content: '';
  width: 26px;
  height: 1px;
  background: var(--wp--preset--color--primary);
  display: block;
  position: absolute;
  top: -8px;
}
.menu-toggle .hamburger-icon em:after{
  content: '';
  width: 26px;
  height: 1px;
  background: var(--wp--preset--color--primary);
  display: block;
  position: absolute;
  top: 8px;
}

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 330px;
  max-width: 100%;
  background:  var(--wp--preset--color--primary);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offcanvas-menu .wp-block-navigation a{
  transition: all .2s ease;
}

.offcanvas-menu .wp-block-navigation a:hover{
  color: #000;
  padding-right: 1em;
}

body.menu-open .offcanvas-menu {
  transform: translateX(0%);
}

.offcanvas-close{
  position: absolute;
  top: .25em;
  right: .25em;
  font-family: var(--wp--preset--font-family--monument-extended);
  font-weight: 100;
  background: none;
  border: none;
  color: #FFF;
  font-size: 1.2em;
}

@media (max-width: 768px) {
  .offcanvas-menu {
    width: 100vw;
  }
}