.sidenav {
  /* Other properties */
  height: auto;
  /* Other properties */
  position: fixed;
  /* Other properties */
  z-index: 1;
  margin-top: 0;
  background-color: #0b1118;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.5s;
  padding-top: 10px;
}

@media (min-width: 600px) {
.sidenav {
  /* Other properties */
  top: 50px; /* Height of navbar. Adjust as needed */
  left: 0; /* Align to the left side of the screen */
}
}
@media (min-width: 1024px) {
.sidenav {
  left: 0; /* Adjust as needed */
}
}
.sidenav a {
  padding: 8px 16px;
  text-decoration: none;
  font-size: 20px; /* Adjust as needed */
  color: #ffffff;
  display: block;
  transition: 0.3s;
  text-align: center;
}

@media (max-width: 600px) {
  .sidenav a {
      font-size: 16px; /* Smaller font size on small screens */
      padding: 6px 12px; /* Smaller padding on small screens */
  }
}

.sidenav a:hover {
color: #f1f1f1;
}
.sidenav a.active {
  border-left: 3px solid #f1f1f1; /* Adds a bar to the left */
}