styles.css

@import "styles-highlights.css";

#key {
    width: 410px;
    padding-right: 0px;
}
.panel {
    padding: 1em 2.3em;
}


#key div p {
    margin-bottom: 10px;
    padding: 0 1em;
}
#key div ul {margin: 0;}
#key div, #toc {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--darkborder);
    border-radius: 3.75pt;
}
#key > div {
    padding-top: 0;
}
#key div .focusable-div {
    margin-top: 0;
    display: inline-block;
}

.panel > p, ol li, ul {
  margin: 0 0 0.65em;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--nearblack);
}
h1, h2, h3 {
  margin: 0.65em 0;
}
h4, h5, h6 {
  margin: 0;
}
h2 {
padding: .32em 0;
border-bottom: 1px solid var(--darkborder);
}
ol,
table,
pre {
  margin: 0 0 1.3em;
}
table {
  border-collapse: collapse;
}
th,
td {
  text-align:left;
  padding:5px 10px;
  border-bottom: 1px solid var(--textgray);
}
th {
  color: var(--nearblack);
}


pre, code {
  color: var(--nearblack);
  background: var(--verylitebg);
  font-family: monospace;
  font-size: 110%;
}
pre {
  padding: 8px 15px;
  border-radius: 3.75pt;
  border: 1px solid var(--darkborder);
}
#markdown {
  width: 100%;
  max-width: 55em;

  box-sizing: border-box;

  padding: 0 2.3em 0 0;
}
pre.highlight,
div.highlight,
table {
  width: fit-content;
  max-width: 100%;
}
pre.highlight,
table {
  min-width: 25em;
  overflow-x: auto;
}



/* Media query for narrow screens */
@media print, screen and (max-width: 960px) {
    .content-container {
        flex-direction: column; /* Stack panels vertically */
        overflow: visible !important;
    }
    .panel {
        width: 100% !important; /* Make panels take full width */
        height: auto; /* Let height adjust to content */
        overflow-y: visible !important;
    }
    #key {
        padding-right: 2.3em;
    }
}


.highlight table td {
  padding: 5px;
}
.highlight table pre {
  margin: 0;
}