/*To create a page with static side bar to the right side*/
/*Container = side menu + main content*/
.container {
  display: grid;
  grid-template-columns: 1fr 200px; /* Adjust sidebar/content width ratio */
  gap: 20px; /* Space between sidebar and main content */
  width: 100%;
  max-width: 1100px; /* Optional: limits overall width */
  margin: 0 auto 0 auto; /* Center the layout */
  padding: 20px;
}
.static-side-bar {
  position: sticky; /* Makes the sidebar stick to the viewport */
  top: 300px; /* Distance from the top when it becomes sticky (adjust as needed) */
  align-self: start; /* Aligns the sticky element to the top of its grid area */
  /* Add other sidebar styling as needed */
  background-color: inherit;
  padding: 10px;
}
.main-content {
  overflow-y: auto; /* Allows the main content to scroll if its content is too long */
  /*max-height: 100vh;*/ /* Or adjust to your page's height needs */
  padding: 15px;
}
/* Add styling for the table of contents list items */
.static-side-bar ul {
  list-style: none;
  padding: 0;
}
.static-side-bar li {
  margin-bottom: 10px;
  font-size: 1rem;
}
.static-side-bar a {
  text-decoration: none;
  color: #333;
}
.static-side-bar a:hover {
  color: #007bff;
}

/*=========RESPONSIVE DESIGN============*/
/*Screens less wider than 1024px won't display the sidebar:*/
@media (max-width: 1024px) {
  .container {
grid-template-columns: 1fr; /* Only one column, full width */
  }
  .static-side-bar {
display: none; /* Remove the sidebar entirely */
  }
}