@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700|Source+Sans+Pro|Source+Serif+Pro|Source+Code+Pro&display=swap);

:root {
  --font-family-body: "Source Sans Pro", sans-serif;
  --font-family-heading: "Oxygen", sans-serif;
  --font-family-code: "Source Code Pro", monospace;

  --color-background: white;
  --color-text: black;
  --color-accent: #084b72;
  --color-link: #f15009;
  --color-link-visited: #9b390e;
  --color-topnav-background: #ffffc0;
  --color-topnav-border: black;
  --color-codebox-background: #f7f7f7;
  --color-codebox-border: #e6e6e6;
  --color-note-info-background: #c7dceb;
  --color-note-info-border: #8db7d6;
  --color-note-warning-background: #ffffcc;
  --color-note-warning-border: #e0e064;

  --topnav-shadow: 0 0 0.75em #0000007f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1f1f1f;
    --color-text: white;
    --color-accent: #7bafcc;
    --color-link: #bf6f4c;
    --color-link-visited: #e6c6b8;
    --color-topnav-background: #66554e;
    --color-topnav-border: transparent;
    --color-codebox-background: transparent;
    --color-codebox-border: transparent;
    --color-note-info-background: #ffffff1a;
    --color-note-info-border: transparent;
    --color-note-warning-background: #ffff7f1a;
    --color-note-warning-border: transparent;
  }
}

/* Use a serif font for body text on high-resolution media, since it’s easier
   to read than the sans-serif used on lower-resolution media. */
@media print,
       (min-resolution: 2dppx),
       (min-resolution: 192dpi),
       (min-device-pixel-ratio: 2) {
  :root {
    --font-family-body: "Source Serif Pro", serif;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: var(--font-family-body);
  font-size: 12pt;
  margin: 1ex 1em;
}

#top-nav {
  position: fixed;
  top: 0;
  right: 0;
  margin: -1ex -1em 0 0;  /* Extend past top/right edges so shadow looks good */
  padding: 1.5ex 1.5em 0.5ex 0.5em;  /* Cancel out negative top/right margins */
  font-size: smaller;
  background-color: var(--color-topnav-background);
  border-color: var(--color-topnav-border);
  border-style: solid;
  border-width: 1px;
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 0.5em;
  box-shadow: var(--topnav-shadow);
}
@media print {
  #top-nav {
    display: none;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-accent);
}

dl > dt {
  font-weight: bold;
}
dl > dt .supplementary {
  font-weight: normal;
}

a[href] {
  color: var(--color-link);
}
a[href]:visited {
  color: var(--color-link-visited);
}

blockquote {
  font-style: oblique;
}

code, kbd, samp {
  font-family: var(--font-family-code);
  font-size: 10pt;
  color: var(--color-accent);
  background-color: var(--color-codebox-background);
  border-color: var(--color-codebox-border);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  padding: 0 2pt;
}

/* Accomodate UAs that can’t use fonts and borders to distinguish code from
   plain text.  (Just in case elinks ever actually adds support for @media…) */
@media tty {
  code, kbd, samp {
    font-weight: bold;
    background-color: transparent;
    border: none;
    padding: none;
  } 
}

mark {
  background-color: yellow;
  border-radius: 3px;
}

/* Special styling for "note" boxes. */
div.note {
  border-style: solid;
  border-width: 1px;
  border-radius: 0.5em;
  padding: 8px 16px 8px 32px;  /* 16px == 1em; 32px == 1em + 16px for image */
  background-position: 8px 8px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  margin: 1em 0;
}
div.note > *:first-child {
  margin-top: 0;
}
div.note > *:last-child {
  margin-bottom: 0;
}
div.note.info {
  border-color: var(--color-note-info-border);
  background-color: var(--color-note-info-background);
  background-image: url("../img/icon/info");
}
div.note.warning {
  border-color: var(--color-note-warning-border);
  background-color: var(--color-note-warning-background);
  background-image: url("../img/icon/warning");
}

/* A “display” citation (for lack of a better term) is one that’s used in a
   heading-ish sort of way, where it stands on its own rather than being part
   of some flowing text.  Italics don’t look good in this context, so use
   quotes instead. */
cite.display {
  font-style: normal;
}
cite.display::before {
  content: open-quote;
}
cite.display::after {
  content: close-quote;
}

/* Copied from the HTML5 spec.  Browsers are supposed to have this (as well as
   other languages) in the default stylesheet, but some don’t. */
:root:lang(ja),
:not(:lang(ja)) > :lang(ja) {
  quotes: "「" "」" "『" "』"
}

.fine-print {
  font-size: smaller;
  font-style: italic;
}