:root {
  /* https://modernfontstacks.com/ */
  --font-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

  /* https://protesilaos.com/emacs/modus-themes-colors */
  /* make sure to use modus-vivendi (dark) theme*/
  --modus-themes-bg-main:       #000000;
  --modus-themes-bg-dim:        #1e1e1e;
  --modus-themes-fg-main:       #ffffff;
  --modus-themes-fg-dim:        #989898;
  --modus-themes-red:           #ff5f59;
  --modus-themes-red-faint:     #7f0000;
  --modus-themes-green:         #44bc44;
  --modus-themes-green-faint:   #2a5045;
  --modus-themes-yellow:        #d0bc00;
  --modus-themes-yellow-faint:  #d2b580;
  --modus-themes-blue:          #2fafff;
  --modus-themes-blue-faint:    #82b0ec;
  --modus-themes-magenta:       #feacd0;
  --modus-themes-magenta-faint: #caa6df;
  --modus-themes-cyan:          #00d3d0;
  --modus-themes-cyan-faint:    #005077;
}

body {
  font-size: 105%;
  font-family: var(--font-humanist);
  background-image: url("/stars3.gif");
  color: var(--modus-themes-fg-main);
  line-height: 1.5;
}

.container {
  border: 8px var(--modus-themes-magenta) ridge;
  background-color: rgba(0, 0, 0, 0.8); /* rgb of modus-themes-bg-main */
  padding: 1rem;
  margin: auto;
  max-width: 1000px;
}

header > h1 {
  font-size: 2rem;
  font-family: var(--font-transitional);
  text-align: center;
}

hr {
  border: 4px var(--modus-themes-magenta) outset;
}

nav {
  line-height: 1.5;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  margin: .75rem auto;
}

nav > a, nav > span {
  margin: 0 .75rem;
}

.intro {
  display: flex;
}

.intro div:first-child {
  flex-basis: 80%;
  margin-right: 1rem;
}

.intro div:last-child {
  flex-basis: 20%;
}

.intro img {
  border-radius: 8px;
  max-width: 300px;
}

table.post-list {
  margin: 1.5rem auto;
  border-collapse: collapse;
  width: 90%;
}

table.post-list th,
table.post-list td {
  padding: .5rem;
}

table.post-list thead,
table.post-list tbody {
  border-top: 1px solid var(--modus-themes-fg-main);
}

table.post-list tr:nth-child(2n) {
  background-color: var(--modus-themes-bg-dim);
}

details.toc {
  padding: .5rem .75rem;
  border: 2px solid var(--modus-themes-fg-main);
  border-radius: 6px;
  max-width: 50%;
}

details.toc summary {
  text-decoration: underline;
}

.webring {
  text-align: center;
}

.webring a {
  text-decoration: none;
}

.counter {
  text-align: center;
}

.counter #countnum {
  font-size: 2rem;
  color: var(--modus-themes-green);
}

@media screen and (max-width: 600px) {
  body {
    font-size: .95rem;
    margin: 0 0 200px 0;
  }

  .intro {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .intro div:first-child {
    flex-basis: initial;
    margin-right: 0;
  }

  .intro div:last-child {
    flex-basis: initial;
  }

  nav > a, nav > span {
    margin: 0 .5rem;
  }

  details.toc {
    max-width: 75%;
  }
}

/* typography */

a { color: var(--modus-themes-blue-faint); }
a:visited { color: var(--modus-themes-magenta-faint); }

h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.5rem;
  color: var(--modus-themes-yellow-faint);
}

h3 {
  font-size: 1.25rem;
  color: var(--modus-themes-blue-faint);
}

h4 {
  font-size: 1rem;
  color: var(--modus-themes-magenta);
}

svg {
  width: 1.2rem;
  height: 1.2em;
  vertical-align: text-bottom;
}

.page-content table {
  border-collapse: collapse;
}

.page-content th,
.page-content td {
  border: 1px solid var(--modus-themes-fg-main);
  padding: .25rem .5rem;
}

.page-content th {
  text-align: center;
}

img {
  max-width: 100%;
}

blockquote {
  padding: 0 1rem;
  border-left: 3px solid var(--modus-themes-fg-main);
}

li {
  margin: .25rem 0;
}

code {
  font-family: monospace;
  font-size: .9rem;
}

pre {
  border-radius: 6px;
  overflow-x: auto;
  padding: .5rem;
}

:not(pre) > code {
  color: var(--modus-themes-magenta);
  padding: 0 .125rem;
  margin: 0 .125rem;
}

pre {
  border-radius: 4px;
  padding: .5rem;
}

@media screen and (max-width: 600px) {
  table.post-list {
    width: 100%;
  }

  ul, ol {
    padding-left: 1.5rem;
  }
}