:root {
  --background-color: #ffffff;
  --text-color: #1a1a1a;
  --main-header-color: #a5830d;
  --header-color: black;
  --card-bg: #f5f5f7;
  --card-border: #ccc;
  color-scheme: light dark; 
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #f5f5f7;
    --main-header-color: #c6b270;
    --header-color: white;
    --card-bg: #1e1e1e;
    --card-border: #333;
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
 }

html {
    height: 100%;
    font: 100%/1.5 sans-serif;
    word-wrap: break-word;
    margin: 0 auto;
    padding: 0.5rem;
 }
.cards div { flex-direction: column; }

  body {
    background: var(--background-color);
    color: var(--text-color);
     padding-bottom: 2rem;
  }
h1 { color: var(--main-header-color); }
h2, h3, h4, h5 {
  color: var(--header-color);
  margin-top: 1em; margin-bottom: 0.5em;
}
h2 {
   border-bottom: 1px solid var(--header-color);
}
h3 {
  width: max-content;
  padding: 0 0.5rem;
}
p {
  margin-bottom: 0.75rem;
}
p:last-of-type {
  margin-bottom: 0;
}

  p.subtitle {
    font-weight: bold;
    color: #999;
    margin-bottom: 2rem;
  }
  img.embedded {
     max-width: 100%;
 }

  .cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(25rem,100%), 1fr));
     gap: 1rem;
     justify-items: stretch;
  }
 
 .cards p {
    padding: 1rem;
    margin: 0;
    flex-grow: 1;
  }
  .cards div {
    border: 1px solid var(--card-border);
   background: var(--card-bg);
    border-right: 0;
    display:flex;
    align-items: stretch;
  }
  .cards img {
     width: min-content;
     margin-top: 1em;
     max-width: 70dvw;
     border-radius: 0.5em;
     align-self: center;
     border: 1px solid black;
  }
img {
  cursor: pointer;
  object-fit: contain; 
}
img[data-img="static"] {
  cursor: unset;
}


img.expanded {
  height: 95dvh;
  width: 95dvw;
  max-width: unset;
  max-height: unset;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 max(100dvh, 100dvw) black;
  background-color: black;
  border-radius: 0;
}

ul, ol {
  margin-top: 1rem;
}
li {
  margin-bottom: 1rem;
  margin-right: 1.5rem;
}
p:has(u) {
  margin-right: 0.5rem;
}

.links {
  display: flex;
}
.links img {
  max-height: 6rem;
  box-shadow: 0 0 0.3rem #00000055;
}
.links ul { margin-top: 0; }
.links li { margin: 0 2rem 0 0 ; list-style: none; font-size: 90%; }
.links a { color: var(--main-header-color); }

@media (min-aspect-ratio: 4/5) {
    html {
        font-size: 125%;
        max-width: 42rem;
         padding: 1.5rem;
    }
  .cards div { flex-direction: row; }
  img {
    max-height: 12rem;
  }
  .cards img { margin-top: 0;  border-radius: 0; border: 0; }
}