html, body{
   height: 100%;
   margin: 0;
}
  
#map{
   height: 100%;
}

#legend {
  position: absolute;
   z-index: 1;
  top: 20px;
  left: 20px;
  padding: 20px;
  margin-bottom: 20px;
  width: 175px;
  height: min(200px, 75%);
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px 0 3px 3px;
  word-break: break-all;
  overflow-y: scroll;
}

#button {
   position: absolute;
   top: 20px;
   left: 225px;
   width: 35px;
   height: 40px;
   background-color: #ffffff;
   border-radius: 0 3px 3px 0;
}

.menu-button {
   border: none;
   width: 100%;
   height: 100%;
   background-color: transparent;
   transition: transform 0.7s ease-in-out;
}

.menu-button::before{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 10px;
	height: 10px;
	border-left: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: translateX(-2px) rotate(45deg);
}

.menu-button.is-closed {
	transform: translateX(3px) rotateY(180deg);
}
.menu {
   transition: transform 0.7s ease-in-out;
}
.menu.is-closed {
   transform: translateX(-230px);
}