:root {
  --main-dark: #000000;
  --main-light: #ffffff;

  --grey-dark: #404040;
  --grey-medium: #595959;
  --grey-light: #a6a6a6;

  --red-light: #ffdddd;

  --accent-1: #174fa7;
  --accent-2: #6b9ff2;
  --accent-3: #103673;
  --accent-4: #4f76b5;

  --default-fg: var(--main-dark);
  --default-bg: var(--main-light);
  --default-bg-hover: var(--accent-2);
  --default-fg-faded: var(--grey-dark);
  --default-fg-faded-more: var(--grey-medium);
  --default-fg-tag: var(--main-light);
  --default-bg-tag: var(--accent-1);
  --default-fg-category: var(--main-light);
  --default-bg-category: var(--accent-3);
  --default-fg-link: var(--accent-1);
  --default-bg-menu-ddl: var(--accent-1);
  --default-fg-menu-ddl: var(--main-light);
  --default-bg-shadow: var(--grey-medium);
  --default-border: var(--grey-light);
  --default-bg-draft: var(--red-light);
}

body {
  margin: 5em 1em;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.3;
  color: var(--default-fg);
  background: var(--default-bg);
}

#content {
  margin: 1em auto;
  padding: 2em 0;
}

.main {
  margin: 1em auto;
  max-width: 40em;
  text-align: left;
}

.main.taxonomy h1 {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  margin-top: 1.6em;
  margin-bottom: 0.3em;
  margin-left: 0;
  margin-right: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1.3em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.6em;
}

h5 {
  font-size: 0.3em;
}

a {
  text-decoration: none;
  color: var(--default-fg-link);
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 95%;
  height: auto;
  overflow: auto;
}

figure {
  margin: 1em auto;
  max-width: 90%;
}

figure.right {
  float: right;
  max-width: 30%;
  text-align: center;
}

figure.medium {
  max-width: 60%;
}

figure h4,
.summary figure h4 {
  margin: 0.5em;
}

pre,
code {
  white-space: pre-wrap;
  max-width: 98%;
  overflow: auto;
}

pre > code {
  max-width: 100%;
}

header {
  position: fixed;
  right: 1em;
  top: 0em;
  font-size: larger;
}

header a {
  color: var(--default-fg-faded);
}

a#menu-icon {
  color: var(--default-fg);
  background: var(--default-bg);
  margin: 0.5em auto;
  width: 0.8em;
  height: 0.8em;
  padding: 0.2em 0.3em 0.4em;
}

nav ul {
  list-style: none;
}

header {
  position: fixed;
  z-index: 100;
}

header > nav {
  text-align: left;
}

header > nav > ul a {
  padding: 0 0.4em;
  min-width: 100%;
  color: var(--default-fg-menu-ddl);
}

header > nav a:hover,
header > nav a:active {
  font-weight: bold;
}

header > nav > ul,
header > nav:active > ul {
  display: none;
  background: var(--default-bg-menu-ddl);
  padding: 1em;
  position: fixed;
  right: 1em;
  top: 2em;
  min-width: 10em;
}

header > nav:hover > ul {
  display: block;
  box-shadow: 0 0.2em 0.8em var(--default-bg-shadow);
}

header > nav ul li {
  margin: 0 2px;
  padding: 0.1em 0;
}

header > nav > ul > li > ul {
  padding: 0.5em 0.8em;
}

aside {
  clear: both;
  margin: 4em auto;
  text-align: center;
  font-size: 150%;
}

footer {
  clear: both;
  margin: 0.5em auto 0;
  font-size: 75%;
  font-variant: small-caps;
  text-align: center;
}

footer a {
  color: var(--default-fg-faded-more);
}

footer > nav {
  margin: 0 auto;
}

footer > nav ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

footer > span {
  display: inline-block;
  padding: 0.2em;
}

nav#TableOfContents ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  margin: 0 0 0 1em;
}

nav#TableOfContents > ul {
  font-size: smaller;
  background: var(--default-bg-menu-ddl);
  margin: 0;
  padding: 1em;
}

section.scripture {
  padding-left: 2em;
  margin-top: 2em;
  margin-bottom: 4em;
}

section.scripture h4 {
  text-align: left;
}

section.scripture p {
  white-space: pre-wrap;
}

section.social a {
  padding: 0.2em;
  color: black;
}

div.categories a {
  color: var(--default-fg-category);
  background: var(--default-bg-category);
}

div.tags a {
  color: var(--default-fg-tag);
  background: var(--default-bg-tag);
}

div.tags,
div.categories {
  font-size: smaller;
  display: inline-block;
  margin: 0.5em 0;
}

div.tags a,
div.categories a {
  font-variant: all-small-caps;
  margin: 0 1px 0 0;
  padding: 0 0.5em 0.2em;
  border-radius: 0.6em;
  box-shadow: 0 0.2em 0.3em var(--default-bg-shadow);
}

div.tags a:hover,
div.categories a:hover {
  box-shadow: 0 0.5em 0.7em var(--default-bg-shadow);
  text-decoration: none;
}

div.tags a:active,
div.categories a:active {
  box-shadow: 0 0.3em 0.5em var(--default-bg-shadow);
  text-decoration: underline;
}

blockquote {
  margin: 1em;
  padding: 0 0.5em;
  border: none;
  border-left: 1px dotted var(--default-border);
  color: var(--default-fg-faded);
}

.taxonomy > ul {
  margin: 0 auto;
  padding: 0;
  max-width: 20em;
}

.taxonomy > ul > li {
  list-style: none;
  max-width: 20em;
  border-bottom: 1px dotted var(--default-border);
}

.taxonomy > ul > li:hover {
  background: var(--default-bg-hover);
}

.taxonomy > ul > li h4 {
  margin: 0.3em 0 0;
  display: inline-block;
}

.taxonomy > ul > li span {
  float: right;
  font-size: x-small;
  padding: 0.7em 0 0;
}

.taxonomy-links {
  margin: 5em 0 0;
  font-size: smaller;
}

.footnotes {
  font-size: x-small;
}

.summary h4 {
  margin: 3em 0 1em;
}

.summary h5 {
  margin: 0;
  color: var(--default-fg-faded-more);
  float: right;
}

.summary-body {
  margin: 1em 0 1em 0.4em;
}

.summary.blog h4::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  content: " \f1d8  ";
}

.summary.link h4::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: " \f0c1  ";
}

.read-more-link {
  font-size: small;
}

.draft {
  background: var(--default-bg-draft);
}

@media only screen and (min-width: 640px) {
  a#menu-icon {
    display: none;
  }

  header {
    width: 100%;
    margin: 0 auto;
    padding: 0.2em 0;
    border-bottom: dotted 1px var(--default-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--default-bg);
  }

  header > nav {
    text-align: center;
  }

  header > nav > ul,
  header > nav:active > ul {
    font-size: smaller;
    text-align: right;
    position: initial;
    display: inline;
    background: var(--default-bg);
    padding: 0;
    margin: 0 auto;
  }

  header > nav > ul > li {
    display: inline-block;
  }

  header > nav > ul a {
    color: var(--default-fg-faded-more);
  }

  header > nav > ul > li > ul {
    display: none;
    padding: 0;
  }

  header > nav > ul > li.expand.expanded ul {
    position: absolute;
    display: block;
    background: var(--default-bg-menu-ddl);
    padding: 0.5em;
    top: 2em;
    text-align: left;
    box-shadow: 0.2em 0.2em 0.5em var(--default-bg-shadow);
  }

  header > nav > ul > li ul a {
    color: var(--default-fg-menu-ddl);
  }

  header > nav a:hover,
  header > nav a:active {
    font-weight: inherit;
    text-decoration: underline;
  }

  header > nav:hover > ul {
    display: inline;
    box-shadow: none;
  }

  header > nav ul li:hover,
  header > nav ul li:active {
    background: var(--default-bg);
  }

  header > nav ul li ul li:hover,
  header > nav ul li ul li:active {
    background: none;
  }

  header > nav li.active {
    font-weight: bold;
  }

  footer {
    padding: 0.2em 0;
    margin: 0 auto;
    border-top: dotted 1px var(--default-border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--default-bg);
  }
}

@media only screen and (min-width: 1000px) {
  figure.right {
    position: absolute;
    top: 4em;
    right: 1em;
    max-width: 12em;
  }
}