body p {
  color: #000000;
  background-color: white;
}

body,
body td,
body dl,
body p {
  font-size: medium;
}

html > body,
html > body td,
html > body dl,
html > body p {
  font-size: medium;
}

body {
  margin-left: 2%;
  margin-right: 2%;
  font-family: Arial, sans-serif;
}

blockquote.quote {
  font-weight: bold;
}

h1, h2, h3, h4, h5, p {
  font-family: Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  color: #008000;
}

h4 {
  font-style: italic;
}

h5 {
  font-weight: bold;
}

h4.middle {
  vertical-align: middle;
}

sup {
  font-size: 0.9em;
}

ul.list {
  line-height: 1.5;
}

ul.space li:not(:last-child),
ol.space li:not(:last-child) {
  margin-bottom: 20px;
}

li.list {
  padding-bottom: 1em;
}

li.dev {
  line-height: 2;
}

p.bibliography {
  text-align: justify;
  margin: 0 1cm 0 2cm;
  text-indent: -1cm;
  font-family: system-ui, sans-serif;
}

p.caption,
p.caption2,
p.case,
p.credits,
p.docid,
p.footnote,
p.home,
p.mailing {
  font-family: system-ui, sans-serif;
}

p.case {
  font-weight: bold;
}

p.home {
  font-style: italic;
}

p.link {
  float: right;
  font-family: system-ui, sans-serif;
  width: 17%;
  line-height: 150%;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 20px solid white;
  border-bottom: 20px solid white;
  background-color: #FAFAD2;
}

p.mailing {
  font-style: italic;
}

p.problem {
  font-weight: bold;
}

p.quote {
  font-weight: bold;
  padding: 20px 10px;
  border-left: 20px solid white;
  border-bottom: 10px solid white;
  background-color: #ADDE63;
}

a.nav {
  color: white;
  font-weight: bold;
  font-family: system-ui, sans-serif;
}

.smallcaps {
  font-family: "Palatino Linotype", Georgia, serif;
  font-variant: small-caps;        /* simulated small caps (widely supported) */
  font-variant-caps: small-caps;   /* real small caps if the font has them */
}

/* =========================================================
   Additions for mobile UX and your requested enhancements
   ========================================================= */

/* 1) Collapsible sections for long lists (details/summary) */
details {
  margin: 1em 0;
  padding: 0.5em 1em;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
}
details[open] {
  background: #ffffff;
}
details summary {
  font-weight: bold;
  cursor: pointer;
  outline: none;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none; /* hide default marker in some browsers */
}

/* 2) Reusable spacing class to replace inline margin-bottom styles */
li.spacious {
  margin-bottom: 18px;
}

/* 3) Responsive image helper (pair with srcset/sizes in HTML) */
img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Nice-to-have: smaller motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Remove extra space above navbar/footer content */
#navbar, #footer {
  margin: 0;
  padding: 0;
}

/* Prevent first and last child elements from adding unwanted space */
#navbar > *:first-child,
#footer > *:first-child {
  margin-top: 0;
}
#navbar > *:last-child,
#footer > *:last-child {
  margin-bottom: 0;
}

/* 0) Normalize body margins (you currently set only left/right) */
body {
  margin: 0 2%; /* top/bottom = 0, left/right = 2% */
}

/* 1) Prevent margin-collapsing at the boundaries of the main content */
#main {
  display: flow-root;          /* establishes a new block formatting context */
  /* If you prefer, tiny padding also prevents collapse:
     padding-block: 0.01px;  */
}

/* 2) Trim “leaky” top/bottom margins from first/last elements in main */
#main > :first-child { margin-top: 0; }
#main > :last-child  { margin-bottom: 0; }

/* 3) (You already added these, keep them) – make sure no extra gaps inside navbar/footer */
#navbar, #footer { margin: 0; padding: 0; }
#navbar > *:first-child,
#footer > *:first-child { margin-top: 0; }
#navbar > *:last-child,
#footer > *:last-child { margin-bottom: 0; }

/* Tighten page edges: remove default top/bottom body margins */
body {
  /* keep your 2% side margins, zero out top/bottom */
  margin: 0 2% !important;
}

/* Stop margin-collapsing around the header/main/footer boundaries */
#navbar,
#footer {
  margin: 0 !important;
  padding-block: 0.01px;   /* creates a BFC, prevents margin collapse */
  overflow: hidden;        /* also creates a BFC */
}

/* Make sure content immediately after #navbar isn't pushed down by its own top margin */
#navbar + * { margin-top: 0 !important; }

/* Trim first/last child edges inside the includes */
#navbar > *:first-child,
#footer > *:first-child { margin-top: 0 !important; }

#navbar > *:last-child,
#footer > *:last-child { margin-bottom: 0 !important; }

/* Belt-and-suspenders: neutralize big default margins on common elements inside includes */
#navbar h1, #navbar h2, #navbar p, #navbar table,
#footer h1, #footer h2, #footer p, #footer ol, #footer table {
  margin-top: 0;
  margin-bottom: 0.5rem;   /* keep a modest rhythm; adjust as desired */
}

/* Also guard the main content block so its first/last child margins don't leak up/down */
main, #main {
  display: flow-root;                  /* BFC stops margin collapse */
  border-top: 1px solid transparent;   /* defensive; also stops collapse */
  border-bottom: 1px solid transparent;
}
main > :first-child, #main > :first-child { margin-top: 0; }
main > :last-child,  #main > :last-child  { margin-bottom: 0; }

/* Finally, ensure the very first/last elements in body don't create stray page edges */
body > :first-child { margin-top: 0 !important; }
body > :last-child  { margin-bottom: 0 !important; }