/* Wow, I got really lucky with these colors;
   light and dark mode have perfect inverses,
   and it's entirely made up of named colors! */

html {
  --b: antiquewhite;
  --f: darkslategray;
  --h: deeppink;
  --l: royalblue;
}

@media (prefers-color-scheme: dark) {
  html {
    --b: black;
    --f: blanchedalmond;
    --h: hotpink;
    --l: cornflowerblue;
  }
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light dark;
  font-family: "EB Garamond", serif;
  background-color: var(--b);
  font-size: max(12pt, min(3vh, 4vw));
  color: var(--f);
}

h1, h2, h3 {
  font-family: "Libre Caslon Text", serif;
  color: var(--h);
  font-weight: normal;
  font-variant: all-small-caps;
}

a {
  color: var(--l);
  text-underline-offset: 3px;
}

header {
  position: sticky;
  top: 0;
  background-color: var(--b);
  height: 3em;
  align-content: center;
  box-shadow: 0px 1px 2px 3px var(--b);
  z-index: 1;
}

header, footer {
  font-family: "Mako", sans-serif;
  font-optical-sizing: auto;
}

nav ul {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
  list-style-type: none;
}

nav ul > :first-child {
  flex: 1 0 auto;
}

aside, blockquote, details>:last-child {
  margin-left: 0;
  padding-left: 1em;
  border-left: 2px solid var(--h);
}

footer {
  padding-top: 1em;
  font-size: small;
  color: var(--h);
  text-decoration: overline;
}

main li {
  margin: .25em 0;
}

body {
  max-width: 30rem;
  width: 90%;
  margin: 0 auto 3em;
}

.articles {
  padding: 0;
  list-style-type: none;
}

.articles li {
  display: flex;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

figure {
  margin-inline: 0;
}

figcaption {
  text-align: center;
  font-style: italic;
  font-size: smaller;
}

.currentblog {
  font-weight: bold;
}

details summary::marker {
  content: '';
}

details summary {
  position: sticky;
  top: 3em;
  background-color: var(--b);
  box-shadow: 0px 1px 2px 3px var(--b);
}

details summary h2 {
  margin-bottom: 0;
}

details summary h2::after {
  float: right;
  text-decoration: underline;
  content: 'show';
}

details[open] summary h2::after {
  content: 'hide';
}

article p {
  text-align: justify;
}