:root {
      --color-white: #FFFFFF;
      --color-black: #000000;

      --color-text-main: #222222;
      --color-text-mid: #444444;
      --color-text-muted: #777777;
      --color-text-highlight: #586e75;
      --color-text-footer: #888888;

      --color-red-main: #cd2e29;
      --color-red-hover: #b22a25;
      --color-blue-main: #1f76b6;
      --color-green-main: #128e5c;

      --color-light-gray: #FAFAFA;
      --color-light-gray-95: rgba(250, 250, 250, 0.95);

      --color-border: #CCCCCC;
      --color-background-highlight: #fdf6e3;
      --color-background-demo: #EDEDED;
      --color-white-80: rgba(255, 255, 255, 0.8);

             --page-width: 56em;
    }


        html {
            box-sizing: border-box;
        }

        *, *:before, *:after {
            box-sizing: inherit;
        }


        body, h1, h2, h3, h4, h5, h6, p, ol, ul {
            padding: 0;
            font-weight: normal;
        }
        h1 {
            font-size: 1.8em;
        }
        h2 {
            font-size: 1.5em;
        }
        h3 {
            font-size: 1.2em;
        }

        body {
            line-height: 1.5;
            font-family: -apple-system-ui-serif, ui-serif, "Georgia", serif;
            color: #222;
            margin: 0;
        }


        img {
            max-width: 100%;
            height: auto;
            border: solid 1px #f6f4ee;
            border-radius: 3px;
        }

        p {
            margin: 1em 0;
        }

        ul, ol {
            padding: 0 0 0 2em;
        }

        a:hover{
            border-bottom: solid 1px #cd2e29;
        }
        a.selected {
            color: #222;
            font-weight: bold;
        }

        a {
            color: #cd2e29;
            text-decoration: none;
            outline: none;
            border-bottom: solid 1px rgba(209, 236, 250, 0);
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        main a[href ^= "http"]::after {
            content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
        }


        video {
            max-width: 100%;
        }

        .quote {
            border: 1px dotted #828282;
            border-radius: 5px;
            background-color: #fdf6e3;
            margin: 0;
            padding: 0;
            color: #586e75;

        }

        blockquote {
            border: 1px dotted #828282;
            border-radius: 5px;
            background-color: #fdf6e3;
            padding: 0 1em;
            margin: 0;
            color: #586e75;
        }

        code {
            color: #526d7a;
            font-family: Menlo, Consolas, Monaco, monospace;
            font-size: 0.8em;
        }

        a code {
            color: #1481b8;
        }

        pre {
            color: #444;
            padding: 1em;
            border-top: 1px dotted #828282;
            border-bottom: 1px dotted #828282;
            overflow: auto;
            font-size: 0.9em;
            filter: sepia(30%);
        }

         .header {
      top: 0;
      background-color: var(--color-light-gray);
      border-bottom: 1px solid var(--color-border);

      z-index: 999;
    }

         /* Enable sticky on larger screens */
@media (min-width: 768px) {
  .header {
    position: sticky;
  }
}

             .top-bar {
      max-width: var(--page-width);
      margin: auto;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }



        #page {
            margin: 0 auto;display: flex;flex-direction: column;max-width: var(--page-width);
            padding:1em;
        }

        main, header, footer{
            display: flex;flex-direction: row;
        }
        main {
            margin-top: 3em;
            margin-bottom: 4em;
            display: flex;
            flex-direction: row;
            column-gap: 4em;
        }

        @media (max-width: 56em) {
            main {
                flex-direction: column;
            }
        }

        nav {
            flex-basis: 14em;
            flex-shrink: 0;
            flex-grow: 0;
            font-size: 0.84em;
           filter: opacity(0.5) grayscale(35%);
            transition: filter 0.3s ease;
        }

        nav:hover, nav a:hover{
            filter: opacity(1) grayscale(0%);
        }

        .article{

            flex-grow: 1;
            max-width: 38em;
        }

        .article.full-width {
    max-width: none;
    flex-grow: 1;
}

        .machine-note {
            font-size: 1px;
            line-height: 1px;
            opacity: 0;
            border: 0;
        }

        header, footer, #page, article, nav, main{
            /*border: 1px solid green;*/
        }

hr {
    border: none;
    border-top: 2px solid #cd2e29;
    margin: 2em 0;
}

        /* from: https://github.com/mpchadwick/pygments-high-contrast-stylesheets */
.code { background-color: #fdf6e3; color: #586e75; }
.code .c { color: #627272; }
.code .err { color: #586e75; }
.code .g { color: #586e75; }
.code .k { color: #677600; }
.code .l { color: #586e75; }
.code .n { color: #586e75; }
.code .o { color: #677600; }
.code .x { color: #c14715; }
.code .p { color: #586e75; }
.code .cm { color: #627272; }
.code .cp { color: #677600; }
.code .c1 { color: #627272; }
.code .cs { color: #677600; }
.code .gd { color: #217d74; }
.code .ge { color: #586e75; font-style: italic; }
.code .gr { color: #d72825; }
.code .gh { color: #c14715; }
.code .gi { color: #677600; }
.code .go { color: #586e75; }
.code .gp { color: #586e75; }
.code .gs { color: #586e75; font-weight: bold; }
.code .gu { color: #c14715; }
.code .gt { color: #586e75; }
.code .kc { color: #c14715; }
.code .kd { color: #1f76b6; }
.code .kn { color: #677600; }
.code .kp { color: #677600; }
.code .kr { color: #1f76b6; }
.code .kt { color: #d72825; }
.code .ld { color: #586e75; }
.code .m { color: #217d74; }
.code .s { color: #217d74; }
.code .na { color: #586e75; }
.code .nb { color: #8d6900; }
.code .nc { color: #1f76b6; }
.code .no { color: #c14715; }
.code .nd { color: #1f76b6; }
.code .ni { color: #c14715; }
.code .ne { color: #c14715; }
.code .nf { color: #1f76b6; }
.code .nl { color: #586e75; }
.code .nn { color: #586e75; }
.code .nx { color: #586e75; }
.code .py { color: #586e75; }
.code .nt { color: #1f76b6; }
.code .nv { color: #1f76b6; }
.code .ow { color: #677600; }
.code .w { color: #586e75; }
.code .mf { color: #217d74; }
.code .mh { color: #217d74; }
.code .mi { color: #217d74; }
.code .mo { color: #217d74; }
.code .sb { color: #627272; }
.code .sc { color: #217d74; }
.code .sd { color: #586e75; }
.code .s2 { color: #217d74; }
.code .se { color: #c14715; }
.code .sh { color: #586e75; }
.code .si { color: #217d74; }
.code .sx { color: #217d74; }
.code .sr { color: #d72825; }
.code .s1 { color: #217d74; }
.code .ss { color: #217d74; }
.code .bp { color: #1f76b6; }
.code .vc { color: #1f76b6; }
.code .vg { color: #1f76b6; }
.code .vi { color: #1f76b6; }
.code .il { color: #217d74; }