.ham {
  display: none;
}

.xIcon {
  display: none;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  transform: translateY(-100%);
  transition: transform 0.2s;
  list-style: none;
  padding-top: 4rem;
  margin: 0px;
}

.showMenu {
  transform: translateY(0);
}

.menuLink {
  display: inline;
  font-size: 24px;
  color: white;
  text-decoration: none;
}

.menuLink:hover {
  text-decoration: underline;
}

@media (max-width: 780px) {
  .ham {
    /* keep the hamburger button above everything */
    z-index: 100;
    border: 0px;
    background: none;
    cursor: pointer;
    padding: 0px;
    display: block;
  }
}