:root {
  --button-width: 25px;
  --button-height: calc(var(--button-width) * 0.8);
  --rectangle-height: calc(var(--button-width) * 0.1);
  --rectangle-radius: calc(var(--button-width) * 0.04);
  --translate: calc(var(--button-width) * 0.17);
  --transition: 0.2s; /*speed of the transition on the hidden menu*/
  --backgroud: #fff;
}

.menu-burger {
  position: relative;
  width: var(--button-width);
  height: var(--button-height);
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.rectangle {
  position: absolute;
  height: var(--rectangle-height);
  background: var(--backgroud);
  border-radius: var(--rectangle-radius);
  transition: transform var(--transition);
  /* border: 1px solid black; */
}
.rectangle--small {
  width: var(--button-width);
}
.rectangle--top {
  top: 0;
  left: 0;
  transform-origin: top left;
}
.rectangle--top.open {
  transform: translateX(var(--translate)) rotate(45deg);
}
.rectangle--middle {
  top: 50%;
  left: 0;
  width: var(--button-width);
  transform: translatey(-50%);
}
.rectangle--middle.open {
  transform: translatey(-50%) rotate(-45deg);
}
.rectangle--bottom {
  bottom: 0;
  left: 0;
  transform-origin: bottom right;
}
.rectangle--bottom.open {
  transform: translateX(calc(-1 * var(--translate))) rotate(45deg);
}