/* -------------------------------------------------------------------------- */
/*                                    MENU                                    */
/* -------------------------------------------------------------------------- */

.menuHolder {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 99;
}

.menuHolder.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.main-slide-menu {
  height: 100%;
  width: 100%;
  max-width: 800px;
  background-color: var(--white-colour);
  position: absolute;
  top: 0;
  right: -100%; /* hidden off screen */
  transition: right 0.4s ease;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.main-slide-menu.show {
  right: 0;
}

.menuSection {
  width: 100%;
  height: 85vh;
  height: 85svh;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3vmin 6vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: var(--white-colour);
}

.title-section {
  height: 15vh;
  height: 15svh;
  width: 100%;
  background-color: var(--light-colour);
  display: flex;
  justify-content: space-evenly;
  padding: 0 6vmin;
  flex-direction: row;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.15) 0 0.35vmin 0.6vmin -0.15vmin,
    rgba(0, 0, 0, 0.1) 0 -0.3vmin 0 inset;
}

.title-section .top-title {
  width: 100%;
  text-align: center;
  color: var(--dark-colour);
  font-size: 5vmin;
  font-weight: 900;
  text-transform: uppercase;
}

.title-section .top-title .circleButton {
  height: 50%;
  background-color: var(--dark-colour);
}

.title-section .top-title .circleButton svg {
  fill: var(--white-colour);
}

.menuSection .menuFooterSection {
  height: 15vh;
  height: 15svh;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0 6vmin;
}

.menuSection .top-title {
  width: 100%;
  text-align: center;
  color: var(--dark-colour);
  font-size: 5vmin;
  font-weight: 900;
  text-transform: uppercase;
}

.menuSection h2 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 3.5vmin;
  color: var(--dark-colour);
  margin-bottom: 2vmin;
}

.unique-link-holder {
  display: flex;
  justify-content: center;
  column-gap: 2vmin;
  margin-top: 4vmin;
  align-items: center;
  background-color: var(--white-colour);
  width: 100%;
  padding: 1.5vmin 2vmin;
  border-radius: 1vmin;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.unique-link-holder p {
  flex: 1;
  margin: 0;
}

#copy-unique-link {
  height: 5vmin;
}

.menu-btn-holder {
  display: flex;
  column-gap: 3vmin;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.label-above-button,
.menu-btn-holder .simpleButton {
  display: flex;
  flex-direction: column;
  row-gap: 0.5vmin;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5vmin;
}

.label-above-button p {
  font-weight: 700;
  font-size: 1.75vmin;
}

.label-above-button .simpleButton {
  width: 100%;
}

.menu-footer-text {
  width: 100%;
  text-align: right;
}