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

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

/* Sidebar Header */
.sidebar-header {
  background: #2E3A44;
  color: lightblue;
  padding: 15px;
  font-size: 35px;
  display: flex;
  justify-content: space-between;
}

/* Subject Name */
.name {
  display: block;
  padding: 15px;
  border-bottom: 1px solid lightblue;
  text-decoration: none;
  color: lightblue;
  font-size:20px;
}

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

/* Active Closed Sidebar */
#closed.active {
  display: block;
}