.content {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }


 .sidebar-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(51, 51, 51, 0.8);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    display: none; /* hidden by default, only on mobile */
    z-index: 1000;
  }

  /* Sidebar styles */
  .sidebar {
    width: 277px;
    background-color: #B3B3B3;
    color: white;
    padding: 8px;
    flex-shrink: 0;
  }

  .sidebar h2 {
    margin-bottom: 15px;
  }

  .sidebar ul {
    list-style: none;
    padding-left: 0;
  }

  .sidebar ul li,
  .sidebar ul a {
    margin: 20px 0;
    color: white;
    text-decoration: none;
    display: block;
  }

  .sidebar ul a:hover {
    text-decoration: underline;
  }

  /* Layout container */
  .container {
    display: flex;
  }

  /* MOBILE STYLES */
  @media (max-width: 768px) {
    .sidebar-toggle {
      display: block;
    }

    .container {
      flex-direction: column; /* stack masthead and sidebar vertically */
    }

    .sidebar {
      width: 100%;
      padding: 15px;
      display: none; /* hide sidebar initially */
    }

    .sidebar.open {
      display: block; /* show sidebar on toggle */
    }






    .sidebar h2.mydate {
    text-align: center;
  }

  /* Center the entire list */
  .sidebar ul {
    text-align: center;
  }

  /* Center links inside list items */
  .sidebar ul li a {
    display: inline-block; /* shrink to content width */
    text-align: center;
  }



  }

  @media (max-width: 768px) {
    .sidebar ul a {
        margin: 4px 0; /* Or any other value suitable for mobile */
    }
}