/* Sidebar */
#sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* hidden */
  width: 300px;
  height: 100%;
  background: #2F4F4F;
  transition: 0.3s;
  z-index: 9998;
}

/* Active class */
#sidebar.active {
  left: 0;
}

/* Top bar */
.top {
  background: #2E3A44;
  color: lightblue;
  padding: 15px;
  font-size: 35px;
  display: flex;
  justify-content: space-between;
}

/* Menu items */
#sidebar a {
  display: block;
  padding: 15px;
  border-bottom: 1px solid lightblue;
  text-decoration: none;
  color: lightblue;
}

/* Overlay */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9998;
}

#overlay.active {
  display: block;
}