/* sticky header */
/* body { */
/* 	padding-top: 60px; */
/* } */
body {
  margin: 8px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 16px); }

.themed {
  color: black;
  background: #e2e2e2;
  font-family: "Merriweather", sans-serif;
  /*
	    Fix <code> border touching and overlapping each other, while making
	    document styling uniform throughout instead of only affecting pieces
	    with <code> elements
	*/
  line-height: 1.6rem;
  /* Sizing differences between light and dark mode. Yay! */ }
  .themed main {
    flex: 1;
    max-width: 1000px;
    margin: auto;
    /* em, i { */
    /* Italics make the font look smaller */
    /* Font dependent! */
    /* font-size: 1.1rem; */
    /* } */ }
    .themed main hgroup p {
      margin: 0px;
      padding-top: 0.2rem;
      font-style: italic;
      font-size: large; }
    .themed main hgroup .publish-date {
      font-size: initial !important;
      color: #565656; }
    .themed main hgroup h1 {
      margin-bottom: 0.1rem;
      line-height: 1.3; }
    .themed main code {
      font-style: normal;
      white-space: nowrap; }
    .themed main code, .themed main pre {
      background: #d6d6d6;
      padding: 2px 5px;
      border: 1px solid;
      border-color: #3e3e3e;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 0.9rem; }
    .themed main h2,
    .themed main h3,
    .themed main h4 {
      scroll-margin-top: 4rem; }
    .themed main h2 a.fragment,
    .themed main h3 a.fragment,
    .themed main h4 a.fragment {
      color: inherit;
      font: inherit;
      text-decoration: none; }
      .themed main h2 a.fragment:visited,
      .themed main h3 a.fragment:visited,
      .themed main h4 a.fragment:visited {
        color: inherit; }
    .themed main .preface {
      font-style: italic;
      /* Italics make the font look smaller */
      /* Font dependent! */
      /* font-size: 1.1rem; */ }
    .themed main .image img {
      display: block;
      max-width: 80vw;
      /* Seems unecessary? */
      /*width: 100%; */
      /* shrink below 80 % when parent narrows */
      height: auto;
      margin: 0 auto; }
    .themed main .image .image-description {
      margin: 0.5rem 0 1rem 0;
      text-align: center;
      font-style: italic;
      /* Italics make the font look smaller */
      /* Font dependent! */
      /* font-size: 1.1rem; */ }
      .themed main .image .image-description code {
        font-style: normal;
        white-space: nowrap; }
    .themed main .formatted-code .code-description {
      margin: 0.5rem 0 1rem 0;
      text-align: center;
      font-style: italic;
      /* Italics make the font look smaller */
      font-size: 1.1rem;
      /* code { */
      /* font-style: normal; */
      /* white-space: nowrap; */
      /* overflow-x: auto; */
      /*} */ }
    .themed main .formatted-code pre {
      /*
				   Prevent text escaping the bounding box when viewport size
				   is smaller narrower than the text.
				*/
      text-wrap-mode: wrap; }
  .themed hr {
    border: none;
    /* remove UA border */
    height: 2px;
    /* any thickness you like */
    background-color: black;
    /* any colour */ }
  .themed footer {
    margin-top: 1.5rem; }
  .themed .footer-content {
    font-size: 0.9rem;
    font-style: italic;
    display: flex;
    align-items: center; }
    .themed .footer-content p {
      padding-left: 1rem;
      margin: 0; }
    .themed .footer-content .license {
      margin-right: auto; }
    .themed .footer-content .domain {
      padding-right: 1rem; }
  .themed .nav-header {
    font-size: larger;
    /* sticky header */
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* height: 4rem; */
    /* z-index: 50; */
    /* background: inherit; */
    /* body margin is 2x8px */ }
    .themed .nav-header nav {
      display: flex;
      align-items: center; }
    .themed .nav-header img, .themed .nav-header p, .themed .nav-header .logo {
      padding: 0.5rem 1rem;
      margin: 0;
      margin-right: auto;
      font-size: larger; }
    .themed .nav-header hr {
      width: calc(100hh - 16px); }
    .themed .nav-header a {
      padding-right: 3rem;
      color: inherit;
      font: inherit;
      text-decoration: none; }
      .themed .nav-header a:visited {
        color: inherit; }
    .themed .nav-header a.logo {
      font-size: inherit;
      padding: 0;
      color: inherit;
      /* text-decoration: none; */ }
      .themed .nav-header a.logo:visited {
        color: inherit; }
  .themed .signoff {
    padding-left: 1rem; }
  .themed .posts-list {
    text-align: center; }
    .themed .posts-list hgroup p {
      padding-top: 0.5rem; }

@media (prefers-color-scheme: dark) {
  .themed.adaptive {
    color: #eaeaea;
    background: #171717;
    /* Sizing differences between light and dark mode. Yay! */ }
    .themed.adaptive hgroup .publish-date {
      color: #989898; }
    .themed.adaptive a {
      color: #ff6000; }
    .themed.adaptive a:visited {
      color: #e63032; }
    .themed.adaptive .nav-header a.logo {
      color: #eaeaea; }
    .themed.adaptive .nav-header a {
      color: #ff6000; }
    .themed.adaptive code, .themed.adaptive pre {
      border-color: #4e4e4e;
      background: #272727; }
    .themed.adaptive hr {
      border: none;
      /* remove UA border */
      height: 2px;
      /* any thickness you like */
      background-color: #eaeaea;
      /* any colour */ } }