.mobile-menu-backdrop {
  background: transparent;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.mobile-menu {
  background: white;
  bottom: 0;
  border-left: solid 10px var(--color-turquoise);
  left: 20vw;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100vw);
  transition: 0.2s ease-out transform;
  z-index: 100;
  padding: 20px;
}

.mobile-menu-close-button {
  appearance: none;
  background: transparent;
  width: 30px;
  height: 30px;
  border: none;
  padding: 0;
  margin-bottom: 10px;
}

.mobile-menu-close-button > img {
}

.mobile-menu-open {
  transform: translateX(0);
  box-shadow: 0 0 21px 1px #aba6a6;
}

/*
 * menu opening results in the main content being obscured in some way.
 */

.main-content {
  transition: all 0.2s ease-in-out;
}

.main-content-fade {
  filter: opacity(0.2);
}

.mobile-menu-links {
}

.mobile-menu-link a {
  color: var(--color-black);
  display: inline-block;
  font-family: var(--font-rubik);
  font-size: 18px;
  line-height: 20px;
  padding: 10px 0;
  text-decoration: none;
}