.overlay {
  position: fixed;
  /* background: rgba(0, 0, 0, 0.5); */
  background: linear-gradient(
    75deg,
    rgba(22, 28, 36, 0.48) 0%,
    rgb(22, 28, 36) 100%
  );
  z-index: 10;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
}

.sidebar {
  /* background: var(--primary-color); */
  background: var(--secondary-color);
  color: var(--text-color);
  position: fixed;
  top: 0;
  left: -100%;
  width: 70vw;
  height: 100vh;
  transition: left 0.3s ease-out;
  max-width: 360px;
  /* box-shadow: rgb(0 0 0 / 20%) 0px 8px 10px -5px,
    rgb(0 0 0 / 14%) 0px 16px 24px 2px, rgb(0 0 0 / 12%) 0px 6px 30px 5px; */
  overflow-y: scroll;
  z-index: 10;
}

.overlay.active {
  pointer-events: all;
  opacity: 1;
}

.sidebar.active {
  left: 0;
}

.sidebar_container {
  width: 90%;
  margin: 40px auto;
}

.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-track {
  background: inherit;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

@media screen and (min-width: 1200px) {
  .overlay {
    display: none;
  }
  .sidebar {
    display: none;
  }
}