:root {
  --button-width: 30px;
  --button-height: calc(var(--button-width) * 0.8);
  --rectangle-height: calc(var(--button-width) * 0.1);
  --translate: calc(var(--button-width) * 0.17);
  --transition: 0.65s;
  --text-color: #2b2b2b;
  --background-color: #A1A19C;
}

nav.navbar {

  width: 100%;
  z-index: 1000;
  height: 75px;
  background-color: var(--accent-purple);

}

.navbar-brand {
  color: var(--webwhite);
  font-size: 1.5rem;
  letter-spacing: 1.1px;
}

.nav-container {
  display: block;
  margin: 0 auto;
  width: 90%;
  padding: 10px;
}


.burger-menu {
  position: relative;
  width: 30px;
  height: var(--button-height);
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.rectangle {
  position: absolute;
  height: var(--rectangle-height);
  background: var(--webwhite);
  transition: transform var(--transition);
}

.rectangle-small {
  width: calc(var(--button-width) / 2);
}

.rectangle-top {
  top: 0;
  right: 0;
  transform-origin: top right;
}

.rectangle-middle {
  top: 50%;
  left: 0;
  width: var(--button-width);
  transform: translateY(-50%);
}

.rectangle-bottom {
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
}

.box {
  position: absolute;
  top: 34px;
  right: 40px;
  width: max-content;
  padding: 0 50px;
  height: auto;
  border: 3px solid var(--salmon);
  border-radius: 5px;
  background: var(--webwhite);
  opacity: 0;
  transform: scale(0);
  transform-origin: top right;
  transition-property: opacity transform;
  transition-duration: var(--transition);
}

li {
  margin: 20px 0;
}

a.menu-nav-link {
  text-decoration: none;
  color: var(--background-purple);
}

a.menu-nav-link:hover {
  color: var(--accent-purple);
}

.rectangle-top.open {
  transform: translateX(calc(-1 * var(--translate))) rotate(-45deg);
}

.rectangle-middle.open {
  transform: translateY(-50%) rotate(45deg);
}

.rectangle-bottom.open {
  transform: translateX(var(--translate)) rotate(-45deg);
}

.box.open {
  opacity: 1;
  transform: scale(1);
}