.burger-wrapper {
  cursor: pointer; /* Pointer cursor for clickable element */
}
.burger-container {
  position: fixed;
  top: 10rem;
  right: 2rem;
  background-color: #90298d;
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  z-index: 9998;
  display: none;
  /* border: 3px solid#fff; */
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4), 6px 6px 12px rgba(0, 0, 0, 0.3),
    9px 9px 18px rgba(0, 0, 0, 0.2);
}
#menu {
  background: #333; /* Dark background for the menu */
  width: 105vw; /* Width of the menu (50rem = 800px) */
  height: 100vh; /* Full height of the viewport */
  position: fixed; /* Fixed position */
  right: 0; /* Align to the right */
  transition-timing-function: cubic-bezier(
    10,
    2,
    3,
    1
  ); /* Custom timing function for transitions */
  transform: translateX(105vw); /* Start hidden off-screen (50rem = 800px) */
  top: 0; /* Align to the top */
  z-index: 2; /* Stack order */
  transition: 0.5s; /* Transition duration */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* align-items: center; */
  gap: 20rem;
  padding-top: 10vh;
}

#menu li,
.menu-item a,
.menu-item a:visited {
  text-decoration: none;
  list-style: none;
  font-size: 4rem;
  color: #fff;
  z-index: 3;
  letter-spacing: 1px;
  margin-bottom: 3rem;
}

#menuActive {
  display: none;
}

/* When the menu is active, move it into view */
#menuActive:checked ~ #menu {
  transform: translateX(0vh); /* Slide in */
}

#burger {
  position: fixed; /* Absolute positioning */
  cursor: pointer; /* Pointer cursor */
  width: 32px; /* Width of the burger icon (2rem = 32px) */
  height: 32px; /* Height of the burger icon (2rem = 32px) */
  right: 4rem; /* Position from the right (1rem = 16px) */
  top: 12rem; /* Position from the top (1rem = 16px) */
  display: none; /* Flexbox for layout */
  justify-content: space-between; /* Space between lines */
  flex-direction: column; /* Arrange lines vertically */
  mix-blend-mode: hard-light;
}

#burger > div {
  height: 2px; /* Thickness of each line */
  background-color: #000; /* Black color for lines */
  transition: 0.5s; /* Transition duration */
  z-index: 5; /* Stack order */
}

/* Change color of lines when menu is active */
#menuActive:checked ~ #burger > div {
  background-color: #fff; /* Change to white */
}

/* Transformations for the lines when the menu is active */
#menuActive:checked ~ #burger > div:nth-child(1) {
  transform: translateY(15px) rotate(45deg); /* Top line to form an 'X' */
}

#menuActive:checked ~ #burger > div:nth-child(2) {
  opacity: 0; /* Hide middle line */
}

#menuActive:checked ~ #burger > div:nth-child(3) {
  transform: translateY(-15px) rotate(-45deg); /* Bottom line to form an 'X' */
}