html {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#html {
  display: none
}

.grid-container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  /* Adjust column sizes as needed */
  gap: 10px;
  /* Space between columns */
  width: 100%;
  /* Full width of the container */
  height: 100vh;
  /* Adjust the height as needed, e.g., full viewport height */
}

#article-outline {
  background-color: #f0f0f0;
  /* Light grey background for visibility */
  padding: 20px;
  /* Padding around the text */
}

#article-section {
  background-color: #eeeeee;
  outline: 1px solid #ccc;
  /* White background for the content area */
  padding: 20px;
  overflow: auto;
  /* Adds scrollbars if the content overflows */
}

#article-outline a {
  display: block;
  background-color: olive;
  margin: 1em 0;
  padding: 0.5em;
  text-decoration: none;
}

#article-outline a:link {
  background-color: #808000
}

#article-outline a:visited {
  background-color: #804040
}

#article-outline a:hover {
  background-color: #804040
}

#article-outline a:focus {
  background-color: #804040
}

#logo {
  width: 30%;
}

#article-section p {
  color: black;
}

#article-section li {
  color: black;
}