nav.menu--main {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background-color: #f9ffe6;
  padding-top: 10rem;
  z-index: 500;
}

nav.menu--main[data-is-visible="false"] {
  transform: translateX(100vw);
}

nav.menu--main[data-is-visible="true"] {
  transition: transform 300ms ease;
  transform: translateX(0);
}

.menu--main-hamburger-menu {
  z-index: 2000;
}

.menu--main-hamburger-menu > .material-icons {
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem;
  transform: rotate(0deg);
  transition: transform 250ms ease;
}

.menu--main-hamburger-menu > .material-icons[data-is-open="true"] {
  transform: rotate(-360deg);
}

nav.menu--main > ul {
  padding: 0;
  margin: 0;
}

nav.menu--main > ul > li > a {
  text-decoration: none;
  padding: 1rem 0.5rem;
  color: #000;
  display: block;
  max-width: 100%;
  font-size: 1.5rem;
  text-align: center;
}

nav.menu--main > ul > li > a:hover,
nav.menu--main > ul > li > a.is-active {
  background-color: #4a9836;
  color: #fff;
}

@supports (display: grid) {
  .menu--main-hamburger-menu {
    grid-area: navigation;
    justify-self: end;
  }
}

@media screen and (min-width: 60rem) {
  .menu--main-hamburger-menu {
    display: none;
  }

  nav.menu--main[data-is-visible="true"],
  nav.menu--main[data-is-visible="false"] {
    position: relative;
    transform: unset;
    height: unset;
    width: unset;
    top: unset;
    right: unset;
    background-color: unset;
    padding-top: unset;
  }

  nav.menu--main > ul {
    margin: 0;
  }

  nav.menu--main > ul > li {
    float: left;
    margin: 0 0.5rem;
  }

  nav.menu--main > ul > li > a {
    padding: 1rem 0.5rem;
    color: #000;
    max-width: 100%;
    font-size: 1rem;
    text-align: center;
  }

  nav.menu--main > ul > li > a:hover,
  nav.menu--main > ul > li > a.is-active {
    border-bottom: 0.125rem solid #000;
    margin-bottom: -0.125rem;
    background-color: unset;
    color: unset;
  }

}