.menu {
  position: fixed;
  z-index: 9999;
  right: 0;
  top: 0;
  height: 100vh;
  filter: drop-shadow(2px 4px 40px black);
}

.uppercase {
  text-transform: uppercase;
}

.menu .menu-icon {
  position: absolute;
  right: 0;
  margin-top: calc(2vh - 0.35vw);
  margin-right: 1.97vw;
  width: 3.9vw;
  stroke-width: 1.4;
  height: auto;
  fill: #ffb11d;
  color: #ffb11d;
  cursor: pointer;
  transition: all 300ms ease-out;
}

.menu:hover .menu-icon {
  stroke-width: 2;
}

.menu.expanded .menu-icon {
  stroke-width: 2;
}

.menu.expanded .menu-icon:hover {
  stroke-width: 1.4;
  fill: var(--theme-dark-blue);
  color: var(--theme-dark-blue);
}

.menu.expanded {
  height: 100vh;
  width: 18.4vw;
  background: var(--theme-orange);
}

.menu.expanded .menu-icon {
  color: white;
  fill: white;
}

.menu .menu-triangle {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 18.4vw;
  border-top: 100vh solid transparent;
  border-right: 2.8vw solid var(--theme-orange);
}

.menu .expanded-text {
  display: none;
  color: white;
  padding-top: calc(2.06vh + 3.9vw + 5vh);
}

.menu .expanded-text p {
  font-size: 1.2vw;
  margin-left: 3.5vw;
  margin-top: 5.2vh;
  margin-right: 2vw;
  margin-bottom: 14vh;
}

.menu .expanded-text p.longer {
  margin-right: 0;
}

.menu .expanded-text a {
  color: white !important;
  text-decoration: none !important;
}

.menu .expanded-text a:hover {
  font-family: "Brandon Grotesque Bold";
}

.menu.expanded .menu-triangle {
  display: block;
}

.menu.expanded .expanded-text {
  display: block;
}

@media screen and (min-width: 1060px) {
  .menu.expanded .expanded-text a {
    cursor: pointer;
  }
}

@media screen and (max-width: 1060px) {
  .menu .menu-icon {
    margin-top: 0;
    width: 15vw;
  }
  .menu.expanded {
    width: 50vw;
  }
  .menu .menu-triangle {
    right: 49.9vw;
    border-top: 100vh solid transparent;
    border-top-width: 100vh;
    border-top-style: solid;
    border-top-color: transparent;
    border-right: 6vw solid var(--theme-orange);
  }
  .menu .expanded-text p {
    font-size: 5.2vw;
  }
  .mobile-bold {
    font-family: "Brandon Grotesque Bold";
  }
}