* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

:root {
    --main-width: 42rem;
    --gutter-width: 4rem;
    --margin-width: 16rem;
    --body-width: calc(var(--main-width) + 2 * (var(--gutter-width) + var(--margin-width)));
}

#meta-tags {
  display: none;
}

/*

    {{Note: width}}

    According to CSS’ own specification, you cannot use 'var()' inside
    media queries. As a consequnece, for our theme to be responsive,
    the full width of the page content is

       2 * (margin_width + gutter_width) + content_width = 82rem

 */

/* See {{Note: width}} */
@media (max-width: 82rem) {
    :root {
        --body-width: var(--main-width);
        --width: var(--main-width);
    }
}

body {
    font-family: Inter, Roboto, sans-serif;
    line-height: 1.8;
    max-width: var(--body-width);
    text-align: justify;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    color: #0a0a0a;
}

main {
    counter-reset: sidenote-counter;
    max-width: var(--main-width);
    margin: auto;
}

img {
    max-width: 100%;
}

figure {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

figure, figcaption {
    text-align: center;
    margin-left:0;
    margin-right:0;
}

figcaption p {
    margin-top: 0;
    margin-left: 0;
}

/* See {{Note: width}} */
@media (min-width: 82rem) {
    .fullwidth, figure {
        /*margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width)));*/
    }

    figure, figcaption, .fullwidth {
        /*width: var(--body-width);*/
    }


    .sidenote.note-left {
      padding-right: 1em;
      border-right: 1px solid black;
    }

    .sidenote.note-right {
      padding-left: 1em;
      border-left: 1px solid black;
    }

    ul.tags-list {
      columns: 2;
    }
}

ul.tags-list {
  list-style-type: none;
}

.sidenote,
.marginblock {
    font-size: smaller;
    position: relative;
    width: var(--margin-width);
    margin-bottom: 1em;
}

.note-right {
    margin-right: calc(-1 * (var(--margin-width) + var(--gutter-width)));
    float: right;
    clear: right;
}

.note-left {
    float: left;
    clear: left;
    margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width)));
}

.footnote-p:not(:first-child) {
  display: block;
  margin-top: .5em;
}

.footnote-p.narrow:not(:first-child) {
  margin-top: .15em;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number::after {
    content: "(" counter(sidenote-counter) ")";
    font-size: 60%;
    top: -0.4rem;
    left: 0.1rem;
}

.sidenote::before {
    content: "(" counter(sidenote-counter) ")";
    font-size: 70%;
    top: -0.5rem;
    right: 0.1rem;
}

/* See {{Note: width}} */
@media (max-width: 82rem) {
    body {
        padding: 2rem;
        margin: auto;
        display: block;
    }

    aside {
        width: var(--main-width);
        margin: auto;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote {
        display: none;
    }

    .margin-toggle:checked + .sidenote,
    .marginblock {
        display: block;
        float: left;
        clear: both;
        width: 95%;
        margin: 1rem 2em;
        vertical-align: baseline;
        position: relative;
    }

    label {
        cursor: pointer;
    }

    pre, aside, div.code {
        width: 100%;
    }

    .marginblock {
      text-align: center;
      margin-top: 0;
    }

    .full-only {
      display: none !important;
    }

    #whoami img {
      max-width: 12em;
    }
}

/*
#whoami nav {
}

#whoami nav ul {
    padding-left: 0rem;
    margin: 0;
    list-style: none;
    text-align: center;
}

#whoami nav ul li {
  font-size: 1rem;
}

#whoami nav ul ul {
  font-size: 0.95rem;
}

#whoami nav ul ul li {
  font-size: 0.95rem;
}

#whoami nav ul a {
  font-weight: normal;
}
*/

nav#main-nav {
    text-align: center;
}

nav#main-nav ul {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

nav#main-nav li {
    display: inline;
}

nav#main-nav li:not(:first-of-type)::before {
  width: 2rem;
    content: " · ";
}

nav#main-nav a {
  font-weight: normal;
}

main {
    counter-reset: sidenote-counter;
    max-width: var(--main-width);
    margin: auto;
}

h1 {
    text-align: center;
    line-height: 1.3em
}

#tags-list {
  text-align: center;
  font-size: smaller;
  padding-bottom: 1em;
}

h2, h3, h4 {
    font-style: italic;
    border-bottom: 1px solid black;
    text-align: left;
}

h1, h2, h3, h4 {
    color: black;
    /*font-family: serif;*/
    font-weight: normal;
}

pre {
  border-radius: .1em;
  border: 1px solid silver;
}

.icon svg {
    display: inline-block;
    width: 1em;
    height: .9em;
}

a[href] {
  text-decoration-line: underline;
  text-decoration-color: black;
  text-decoration-style: dashed;
  text-underline-offset: .3em;
  color: black;
  /*font-weight: 500;*/
}

a[href]:hover {
  text-decoration-color: black;
}

img.avatar {
  border: 1px solid black;
  border-radius: .5em;
}

main nav#series-nav {
  padding: 1em 2em;
  border: 1px solid #eee;
  background: #fafafa;
  border-radius: .2em;
}
main nav#series-nav .series-next {
    text-align: right;
}

main nav#series-nav p.series-next::after {
    content: " →";
}

main nav#series-nav p.series-prev::before {
    content: "← ";
}

.index {
  padding-top: 2em;
  padding-bottom: 2em;
}

.index dt,
.index li {
  text-align: left;
}

.index dd {
    margin-left: 0;
    margin-bottom: 1rem;
}

.index dd:not(:empty) {
    border-bottom: 1px solid #ddd;
}

.index p {
    margin-top: 0;
}

/*  Dirty patching of the github highlight.js theme*/
p code.hljs,
dt code.hljs,
li code.hljs {
  padding: 0;
}

table {
    border-top: 2px solid #555;
    border-bottom: 2px solid #555;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

th {
    font-weight: normal;
    text-transform: uppercase;
}

td,
th {
    border-top: 1px solid silver;
    height: 2em;
    padding: 0 1em;
}

.running-container {
  text-align: center;
}

.running-container .kilometer {
  width: 2em;
  height: 2em;
  margin: .2em;
  display: inline-block;
  border-radius: .5em;
}

.kilometer.race {
  box-shadow: 0 0 2px 2px gold;
}

.running-container p {
  text-align: justify;
  font-size: smaller;
}