/* Hamburger button (top right) and the overlay with the project list. The list is generated from the
   project folders and scrolls inside the overlay when there are more projects than fit. */
.projecten-menu-toggle {
  position: absolute;
  left: var(--projecten-menu-button-left);
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--projecten-menu-button-width);
  height: var(--projecten-menu-button-height);
}

.projecten-menu-toggle svg {
  position: relative;
  width: var(--projecten-menu-icon-size);
  height: var(--projecten-menu-icon-size);
  fill: rgb(0, 0, 0);
}

.projecten-menu {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--projecten-visible-height);
  z-index: 4;
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--color-project-slide);
}

.projecten-menu__list {
  padding: var(--projecten-menu-item-top) 0 40px var(--projecten-menu-item-left);
}

.projecten-menu__item { height: var(--projecten-menu-item-height); }

.projecten-menu__link {
  height: 100%;
  font-family: var(--font-gothic);
  font-size: var(--projecten-menu-font-size);
  letter-spacing: var(--projecten-menu-letter-spacing);
  color: rgb(0, 0, 0);
  text-align: left;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.projecten-menu__link:hover { color: rgba(0, 0, 0, 0.9); text-decoration: underline; }