body { max-width: 90ch; margin: auto; font-family: sans-serif; line-height: 1.3; letter-spacing: -0.01em; padding: 0em 1em; }
.title { display: flex; flex-direction: column; }
a { color: blue; text-decoration: none; }
a:hover { color: indianred; }
#header { height: 0em; letter-spacing: -0.1em; padding-bottom: 2.5em; }
.subtitle { font-size: medium; margin-top: 0px; font-weight: 500; }
table { border-style: hidden; }
td { padding: 6px 0px; }
h2 { margin-bottom: 0.2em; font-size: 1em; }
p { hyphens: none; }
td { vertical-align: baseline; }
img { max-width: 100%; }
.figure > p { text-indent: 0em; font-weight: bold; }
#table-of-contents { font-size: 0.85em; padding-top: 0.5em; padding-bottom: 0.5em; margin: auto; letter-spacing: 0px; position: sticky; top: 0em; background: white; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; }
#table-of-contents > h2 { font-size: 100%; margin-bottom: -0.5em; display: none; }
#text-table-of-contents > ul > li:first-child { background: blue; }
#text-table-of-contents > ul > li:first-child:hover { background: indianred; }
#intro { flex-direction: column; text-indent: 0px; }
#text-table-of-contents > ul > li { display: inline-block; padding: 0.4em; font-weight: 600; color: lightblue; }
#text-table-of-contents > ul { padding: 0px; margin: auto; }
.outline-2 { margin-bottom: 1.5em; max-width: 28ch; padding-right: 17.5px; }
#lists { display: flex; flex-wrap: wrap; width: 90ch; gap: 0px; }
#links { margin: -1.5em auto auto; width: fit-content; padding-bottom: 1em; font-weight: 600; font-size: 90%; }
.outline-2 > h2 { margin: 0px; }
#links > a { padding-right: 0.1em; padding-left: 0.5em; }
#intro-par { display: flex; margin-bottom: -1em; }
#intro-par-photo { display: flex; align-items: center; padding-left: 2em; width: 65%; }
#intro-par-text { text-align: justify; }
#intro-par-text > p { text-indent: 0px; }
#updates {
    background: rgba(193, 224, 193, 0.3);
    font-family: monospace;
    border-radius: 5px;
    padding: 0px 8px;
    margin-top: 1.6em;
    margin-bottom: 2em;
    border: 1px solid rgb(193, 224, 193);
    margin-right: 1em;

}
#updates > table { font-size: 95%; margin-top: -1em; margin-bottom: -1em; width: 100%; }
#updates > table > tbody > tr > td:first-child { padding-right: 1em; color: rgb(50, 50, 50); font-weight: 600; }
#updates > table > tbody > tr > td > a { color: black; text-decoration: underline; }
@media screen and (max-width: 835px) and (min-width: 540px) {
  body { max-width: 58ch; }
  #intro { padding-top: 0.5em; }
  #updates { margin-left: 0em; margin-right: 0em; }
  .outline-2 { max-width: 26.5ch; margin-right: auto; margin-left: auto; }
  #lists { width: unset; margin-right: auto; margin-left: auto; }
  #intro-par-photo { width: 80%; padding-left: 1em; }
}
@media screen and (max-width: 540px) {
  #intro { padding-bottom: 0px; margin-bottom: -3.5em; }
  #lists { width: unset; gap: 1em; }
  .outline-2 { max-width: 80ch; margin-bottom: 0em; margin-left: unset; margin-right: unset; }
  #table-of-contents { text-align: center; }
  #intro-par { align-items: center; flex-direction: column-reverse; }
  #intro-par-photo { width: 30%; padding-top: 1em; }
  .title { text-align: center; }
  #updates { margin-left: 0em; margin-right: 0em; }
  #intro-par-photo { display: flex; margin-top: 0.5em; align-items: center; left: 0em; padding-left: 0em; }
  #updates {
        margin-top: 4.6em;
        margin-bottom: -3em;
    
    }
}