.ham_menu {

  height: 40px;

  width: 40px;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  padding: 5px 0;

  margin-left: 0; /* remove any margin pushing it outside */

  position: relative;

  z-index: 9999;

}





.ham_menu span {

  display: block;

  height: 4px;

  width: 100%;

  background-color: rgb(0, 0, 0);

  border-radius: 10px;

  transition: all 0.3s ease;

}



/* Fix selectors to target the spans properly */

.ham_menu.active span:nth-child(1) {

    transform: rotate(-45deg) translate(0, 0);

}



.ham_menu.active span:nth-child(2) {

  opacity: 0;

  transform: translateX(-20px);

}



.ham_menu.active span:nth-child(3) {

    transform: rotate(45deg) translate(0, 0);

}







.offscreen_menu {

  height: 100vh;

  width: 100%;

  max-width: 450px;

  position: fixed;

  top: 0;

  right: -450px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 2rem;

  transition: right 0.3s ease;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  background-color: rgba(34, 37, 49, 0.6);

  z-index: 999; 

}





.offscreen_menu a {

  color: rgb(255, 255, 255);

  text-decoration: none;

  margin: 15px 0;

}



.offscreen_menu-active {

  right: 0;

}