:root {
  --body-fg: #191919;
  --gutter: 10px;
  --faint-gray: #fafafa;
  --light-gray: #f0f0f0;
  --site-max-width: 950px;
  --post-max-width: 700px;
  --nav-max-width: 240px;
  --banner-bg: cornsilk;
  --banner-fg: #191919;
  --target-bg: gold;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-fg: #cdcdcd;
    --body-bg: #1b1b1b;
    --faint-gray: #252525;
    --light-gray: #505050;
    --banner-bg: #4b0202;
    --banner-fg: #fafafa;
  }

  body { background: var(--body-bg); }

  a { color: cornflowerblue; }
  a:visited { color: hotpink; }

  .nbe__search > img { filter: invert(100%); }

  input {
    background-color: var(--body-bg);
    color: var(--body-fg);
    border-color: var(--body-fg);
  }

  body > main > nav img[src="avatar.svg"] { filter: invert(100%); }

  .banner a { color: hotpink; }

  img.bw { filter: invert(70%); }
}

@media (prefers-color-scheme: light) {
  img.bw { filter: invert(20%); }
}

@media (min-width: 980px) {
  body {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

body {
  color: var(--body-fg);
  font-family: Georgia, serif;
  margin-top: 0;
}

a { text-decoration: none; }

blockquote {
  margin-left: 0.1em;
  margin-right: 0;
  background-image: url("blockquote.svg");
  background-repeat: repeat-y;
  background-size: 10px 6px;
  padding-left: 1.1em;
}

/* a diff font for headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: serif;
}

img,
object,
video,
embed {
  width: auto;
  max-width: 100%;
  height: auto;
}

.img--float-right {
  float: right;
  max-width: 100%;
  width: auto;
  margin: 1em 0 1em 1em;
}

pre, code {
  font-size: 115%;
  background-color: var(--faint-gray);
  white-space: pre-wrap;
}

pre > code { font-size: 100%; }

pre {
  padding: 2px 2px 2px 0.5em;
  word-wrap: break-word;
}

:target { background: var(--target-bg); }

summary { word-wrap: break-word; }
summary:not(:last-child) { cursor: pointer; }
summary:only-child { display: flex; }
summary:hover:not(:last-child) { background: var(--light-gray); }
summary > a { width: 100%; }
summary > a:hover { background: var(--light-gray); }

body > main > nav img[alt="avatar"] {
  border-radius: 6px;
  margin: var(--gutter) 0;
}

nav.prevnext {
  display: flex;
  font-size: xx-large;
  justify-content: space-between;
}

nav.prevnext a {
  display: block;
  border: 1px solid var(--light-gray);
  border-radius: 6px;
  padding: 0 calc(var(--gutter) * 4);
  margin-top: var(--gutter);
}

body > header {
  font-variant: small-caps;
  border-bottom: 1px dotted var(--body-fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.2em;
}

body > header > h1 { margin: 0.2em 0; }

body > header .nbe__search {
  height: 2em;
  display: flex;
  justify-content: flex-end;
  flex-basis: 20%;
}

#nfts__dialog {
  border-bottom: 1px dotted var(--body-fg);
  padding: var(--gutter) 0;
}

#nfts__dialog  input {
  font-size: 130%;
  font-family: monospace;
  width: 100%;
}

#nfts__dialog > div { margin-top: 1em; }

body > footer {
  border-top: 1px dotted var(--body-fg);
  color: gray;
  font-size: smaller;
}

hr {
  border: 0;
  border-bottom: 1px dotted gray;
}

audio { width: 100%; }

.banner {
  background: var(--banner-bg);
  color: var(--banner-fg);
  padding: 1em;
}

article table:not(.nbe__metatable) {
  border-collapse: collapse;
  border: 1px solid;
}

article table:not(.nbe__metatable) th,
article table:not(.nbe__metatable) td {
  border: 1px solid;
  padding: 3px;
}

.youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* the holy grail */

body > main { display: flex; }

body > main > section {
  order: 2;
  flex: 1;
  margin-bottom: var(--gutter);
  max-width: var(--post-max-width);
  padding-left: var(--gutter);
  word-wrap: break-word;
}

body > main > nav {
  order: 1;
  width: var(--nav-max-width);
  padding-right: var(--gutter);
  border-right: 1px dotted var(--body-fg);
}

/* too narrow to support 2 columns */
@media (max-width: 949px) {
  body > main { flex-flow: column; }

  body > main > section {
    padding-left: 0;
    width: 100%;
    margin: 0 auto;
  }

  body > main > section,
  body > main > nav {
    order: 0;
  }

  body > main > nav {
    margin-top: var(--gutter);
    border-top: 1px dotted var(--body-fg);
    padding-right: 0;
    border-right: 0;
    width: auto;
  }

  body > main > nav img[alt="avatar"] { display: none; }
}

/* nav in 2 columns when a screen is small but not too narrow */
@media (max-width: 949px) and (min-width: 600px) {
  body > main > nav {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: var(--gutter);
    margin-bottom: 1em;
  }
}

@media print {
  nav.screen,
  body > main > nav,
  body > header,
  body > footer { display: none; }
}


/* Chartist */
#nbe__authors__graph .ct-label.ct-horizontal.ct-end {
  width: 6em !important;
  justify-content: flex-end;
  transform-origin: 100% 45%;
  transform: translate(-100%) rotate(-60deg);
}

#nbe__authors__graph .ct-label { color: var(--body-fg); }

#nbe__authors__graph .ct-series-a .ct-line { stroke-width: 1px; }

#nbe__authors__graph .ct-series-a .ct-point { stroke-width: 4px; }

#nbe__authors__graph__tooltip {
  background: cornsilk;
  border: 1px solid var(--body-fg);
  padding: 5px;
}

@media (prefers-color-scheme: dark) {
  #nbe__authors__graph svg { filter: invert(100%); }
  #nbe__authors__graph .ct-label { color: #252525; }
  #nbe__authors__graph__tooltip { color: #191919; }
}

/* https://github.com/gromnitsky/endnotes */
@media (prefers-color-scheme: dark) {
  #footnotes_dialog_12c1b560_content {
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
  }
}