body {
  padding-top: 80px;
  padding-left: 20%;
  padding-right: 20%;
}

.header-box {
  width: 100%;
  background-color: #ccc; /* light grey */
  padding: 20px 20%; /* increased vertical padding */
  text-align: left;
  font-family: arial;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

h1 {
  font-family: arial;
  font-size: 20px;
}

h2 {
  font-family: arial;
  font-size: 18px;
}

h3 {
  font-family: arial;
  font-size: 16px;
}

p {
  font-family: arial;
  font-size: 16px;
}

li {
  font-family: arial;
  padding: 10px 0;
}

table, th, td {
  vertical-align: top;
  font-family: arial;
  font-size: 100%;
  width: 80%;
}

.container {
  display: flex; /* Enable flexbox for column layout */
  gap: 20px;     /* Optional: Add some space between the columns */
}

.main-content {
  flex: 1; /* Allows the main content to take up remaining space */
}

.sidebar {
  width: 20%; /* Adjust the desired width of the sidebar */
}

/* Media query for smaller screens */
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
  .container {
    flex-direction: column; /* Stack the items vertically */
  }

  .sidebar {
    width: 100%; /* Make the sidebar take full width on smaller screens */
  }
}