/*========================================= Reset =========================================== */
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}
body{
    line-height:1
}
blockquote,q{
    quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
    content:none
}
table{
    border-collapse:collapse;
    border-spacing:0
}
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 .group:before, .group:after {
     content: "";
     display: table;
}
 .group:after {
     clear: both;
}
 .group {
     zoom: 1;
}
 .hidden {
     display: none;
}

/*========================================= General Spacing =========================================== */
 .post h1, h3, h4, h5, p, .postbody ul, #post-list li, pre {
     margin-bottom: 20px;
}

li p {
    margin-bottom: 0;
}

 .postbody ul li {
     list-style-type: "→ ";
     list-style-position: outside;
}
/*========================================= Dark Mode / Light Mode =========================================== */

/*
 Using the colors from https://developer.apple.com/design/human-interface-guidelines/foundations/color/
 */

@font-face {
font-family: valkyrie_a;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_regular.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_italic.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_bold.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: italic;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_bold_italic.woff2') format('woff2');
}

@font-face {
font-family: triplicate_a_code;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('triplicate_a_code_regular.woff2') format('woff2');
}

@font-face {
font-family: triplicate_a_code;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('triplicate_a_code_italic.woff2') format('woff2');
}

@font-face {
font-family: triplicate_a_code;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('triplicate_a_code_bold.woff2') format('woff2');
}

@font-face {
font-family: triplicate_a_code;
font-style: italic;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('triplicate_a_code_bold_italic.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a_caps;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_caps_regular.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a_caps;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('valkyrie_a_caps_bold.woff2') format('woff2');
}

@font-face {
font-family: concourse_4;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_regular.woff2') format('woff2');
}

@font-face {
font-family: concourse_4;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_italic.woff2') format('woff2');
}

@font-face {
font-family: concourse_4;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_bold.woff2') format('woff2');
}

@font-face {
font-family: concourse_4;
font-style: italic;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_bold_italic.woff2') format('woff2');
}

@font-face {
font-family: concourse_4_caps;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_caps_regular.woff2') format('woff2');
}

@font-face {
font-family: concourse_4_caps;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: auto;
src: url('concourse_4_caps_bold.woff2') format('woff2');
}

 :root {
     --background-color: #fff;
     --secondary-background-color: #fdfdfd;
     --primary-color: #222;
     --secondary-color: #333;
     --tertiary-color: #666;
     --quaternary-color: #aaa;
     --blue: rgb(0, 122, 255);
     --border-color: #eee;
     --pink: rgb(255, 45, 85);
     --accent-color: var(--blue);
     --code-font: 'SF Mono', SFMono-Regular, ui-monospace, triplicate_a_code;
     --base-font: valkyrie_a;
     --heading-font: concourse_4;
     --all-caps-font: valkyrie_a_caps;
     --all-caps-heading-font: concourse_4_caps;
     --small-font-size: 0.8em;
     /* code highlight colors */
     --keyword-color: #9B2493;
     --string-color: #C51A16;
}
 @media (prefers-color-scheme: dark) {
     :root {
         --background-color: #161616;
         --secondary-background-color: #222;
         --primary-color: #ddd;
         --secondary-color: #ccc;
         --tertiary-color: #999;
         --quaternary-color: #555;
         --border-color: #222;
         --blue: rgb(10, 132, 255);
         --pink: rgb(255, 55, 95);
         --accent-color: var(--pink);
         --keyword-color: #fc5fa2;
         --string-color: #FB6A5C;
    }
     #header img {
         filter: invert(100%);
    }
}
/*========================================= Base =========================================== */
 html, body {
     height: 100%;
     font-size: 22px;
}
 body {
     background-color: var(--background-color);
     font: 0.9rem var(--base-font), "Helvetica Neue",Helvetica,Arial,sans-serif;
     color: var(--primary-color);
     -webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;
}
 #wrapper {
     padding:100px 40px 100px 40px;
     max-width: 37em;
     margin:0 auto;
}

/*========================================= Typography =========================================== */
/*Accent color*/
 a, #title, #post-list a:hover, #post-list li:hover .dates, #title:hover {
     text-decoration:none;
/*     color:#5badf0;*/
/*     color:#5694f1;*/
     color: var(--accent-color);
}

 p a {
     color: var(--accent-color);
/*     color:#5694f1;*/
}

p a:hover, #post-list a:hover, #post-list li:hover .dates, #title:hover {
    color: var(--accent-color);
}
/*Transitions*/
 a, #post-nav a, #post-list a {
     -webkit-transition: all 0.15s ease;
     -moz-transition: all 0.15s ease;
     -ms-transition: all 0.15s ease;
     -o-transition: all 0.15s ease;
     transition: all 0.15s ease;
}
 ul {
     margin:0;
     padding:0;
}
 ul li {
     list-style-type:circle;
     list-style-position:inside;
}
/* Line Height */
 .postbody, p {
     line-height:1.7;
}
 em, i {
     font-style: italic;
}
 #title {
     display:inline-block;
     line-height:100%;
     font-size:19px;
     margin:0;
     padding-bottom:20px;
}
 h1 {
     font: 30px var(--heading-font);
/*     font-size:30px;*/
     letter-spacing:-1px;
     color: var(--primary-color);
}
 h2 {
     font: 19px/1.3em var(--heading-font);
     color:#bbb;
}
 .post h2 {
     margin-bottom:20px;
     color:inherit;
     font:18px/1.7em var(--heading-font);
}
 .post h2.headline {
     font: 22px/1.3em var(--heading-font), sans-serif;
     color: var(--quaternary-color);
     margin:-5px 0 40px 0;
}
 #post-list h2 {
     font:normal 17px/1.5em var(--base-font), "Helvetica Neue",Helvetica,Arial,sans-serif;
     color: var(--quaternary-color);
     margin-top: 2px;
}
 h3, h4, h5 {
     color: var(--secondary-color);
}
 h3 {
     font-size:20px;
}
 h4 {
     font-size:16px;
}
 h5 {
     font-size:15px;
}
 h6 {
     font-size: 13px;
     color: #666;
     margin-bottom: 6px;
}
 blockquote {
     padding-left: 15px;
     border-left: 3px solid var(--border-color);
     color: var(--tertiary-color);
}
strong {
    font-weight: bold;
}
 hr {
     display: block;
     border: none;
     height: 3px;
     margin: 40px auto;
     background: var(--border-color);
}
 code, span.code {
/*     font-family: var(--code-font), Menlo, Monaco, Courier;*/
     font-weight: bold;
     color: var(--tertiary-color);
}
 span.code {
     background-color:#EEE;
}
 pre {
     font-family: var(--code-font), Menlo, Monaco, Courier;
     border: 1px solid var(--border-color);
     padding:20px;
     background-color: var(--secondary-background-color);
     font-size:18px;
     overflow:auto;
     border-radius: 3px;
}


 table {
     width:100%;
     margin:40px 0;
     border-collapse:collapse;
     font-size:13px;
     line-height:1.5em;
}
 th,td {
     text-align:left;
     padding-right:20px;
     vertical-align:top;
}
 table td,td {
     border-spacing:none;
     border-style:solid;
     padding:10px 15px;
     border-width:1px 0 0 0;
}
 tr>td {
     border-top:1px solid #eaeaea;
}
 tr:nth-child(odd)>td {
     background:#fcfcfc;
}
 thead th,th {
     text-align:left;
     padding:10px 15px;
     height:20px;
     font-size:13px;
     color:#444;
     border-bottom:1px solid #dadadc;
     cursor:default;
     white-space:nowrap;
}
 img {
     width:100%;
     max-width:100%;
     border-radius: 3px;
}
/*========================================= Post List =========================================== */
 #post-list,#archive-list {
     margin-top:0px;
}
 #header {
     margin-bottom:100px;
}
 #post-list li,#archive-list li, #log-list li {
     list-style-type:none;
}


 #post-list li+li, #post-list li+li {
     padding-top:20px;
     border-top:1px solid var(--border-color);
}
 #post-list a {
     color:var(--secondary-color);
     display:block;
     font:19px/1.7 var(--heading-font), "Helvetica Neue",helvetica,Arial,sans-serif;
}
 #post-list .dates {
     float:right;
     position:relative;
     top:1px;
     font:15px/1.8 var(--all-caps-heading-font), "Helvetica Neue",helvetica,Arial,sans-serif;
     color:#bbb;
}
 #post-list-footer {
     border-top:1px solid var(--border-color);
     margin-top:20px;
     padding-top:100px;
}
 #about-me {
     padding-top:100px;
}
a.back, #archive-link {
     display:inline-block;
     font-size: var(--small-font-size);
     border-radius:4px;
     padding:3px 10px 6px;
     box-shadow:0 0 0 1px var(--border-color);
}
a.back:hover, #archive-link:hover {
     background: var(--accent-color);
     color:#fff;
     box-shadow:0 0 0 1px var(--accent-color);
}
 #archive-link span {
     position:relative;
     top:0px;
     font-size: 17px;
}

#wrapper footer {
    font-family: var(--heading-font);
}

 #footer {
     box-shadow: inset 0 1px 0 var(--border-color);
     padding: 40px 0 0 0;
     margin-top: 100px;
}
/*========================================= Post Page =========================================== */
 #header {
     border-bottom:1px solid var(--border-color);
}
 .post {
     margin:80px 0 0 0;
}
 .footnotes {
     font-family: var(--heading-font);
     font-size: var(--small-font-size);
}

 .postbody .footnotes ol {
     list-style-type:number;
}
 #post-meta {
     font: var(--small-font-size) var(--heading-font);
/*     font-size: var(--small-font-size);*/
     margin-bottom:40px;
     line-height:1.4;
     border-top:1px solid var(--border-color);
     padding-top:40px;
     margin-top:40px;
     color: var(--secondary-color);
}


#post-meta time {
     font-family:  var(--all-caps-heading-font);
}

 #post-meta.promo {
     background: var(--secondary-background-color);
     padding: 40px;
     font-size: 17px;
}
 #post-meta div span {
     color:#666;
     color:var(--secondary-color);
     color: var(--quaternary-color);
     display:block;
}
 .postbody ol {
     margin-bottom: 20px;
}
 #post-meta div {
     margin:0 25px 0 0;
     float:left;
}
/*========================================= Post Navigation =========================================== */
 #post-nav {
     border-top:1px solid var(--border-color);
     text-align:center;
     padding-top:20px;
     font-size: var(--small-font-size);
}
 #post-nav span {
     -webkit-transition:all 0.1s linear;
     -moz-transition:all 0.1s linear;
     -ms-transition:all 0.1s linear;
     -o-transition:all 0.1s linear;
     transition:all 0.1s linear;
     position:relative;
}
 #post-nav span.prev {
     float:left;
}
 #post-nav span.next {
     float:right;
}
 #post-nav span .arrow {
     position:relative;
     padding:1px;
}
 #post-nav span.prev:hover .arrow {
     left:-4px;
}
 #post-nav span.next:hover .arrow {
     right:-4px;
}
 #post-nav span.prev:hover {
     left:-3px;
}
 #post-nav span.next:hover {
     right: -3px;
}
/*========================================= Archive =========================================== */
 h1.archive {
     margin-bottom:0px;
     margin-top: 2em;
}
 h2.month {
     width:100%;
     font: var(--small-font-size) var(--all-caps-heading-font), "Helvetica Neue",helvetica,Arial,sans-serif;
/*     text-transform:uppercase;*/
     margin-top:40px;
     margin-bottom:10px;
     padding-bottom:10px;
     border-bottom:1px solid var(--border-color);
}
 #archive-list a {
     display:block;
     font:17px/1.7 var(--base-font), "Helvetica Neue",helvetica,Arial,sans-serif;
     color:var(--secondary-color);
}
 #archive-list .dates {
     float:right;
     position:relative;
     top:1px;
     font:normal 17px var(--base-font), "Helvetica Neue",helvetica,Arial,sans-serif;
     color:#bbb;
}
 #archive-list li a:hover,#archive-list li:hover .dates {
/*     color: #5694f1;*/
     color: var(--accent-color);
}
 #header img {
     float: right;
}
 #header a:hover img {
     opacity: 0.8;
}
/*=====================*/
 @media screen and (max-width: 540px) {
     #wrapper {
         padding:20px 20px 20px 20px;
    }
     #header {
         margin-bottom: 60px;
         border-bottom: 1px solid var(--border-color);
    }
     .post {
         margin: 40px 0;
    }
     #footer {
         margin-top: 60px;
    }
     #post-list, #archive-list {
         margin-top: 0;
    }
     #post-meta {
         margin-top: 60px;
    }
     #title {
         font-size: 17px;
    }
     #post-list .dates {
         display: none;
    }
     #post-list-footer {
         margin-top: 20px;
         padding-top: 40px;
    }
     h1 {
         font-size: 26px;
    }
     .post h2.headline {
         font-size: 20px;
    }
     h7 {
         max-width: 80%;
    }
}
 @media screen and (max-width:440px) {
     #avatar {
        display: none;
    }
     h7 {
         max-width: 100%;
    }
}
/* Footnotes */
/*=============*/
 sub, sup {
    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
     font-size: 75%;
    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
     line-height: 0;
    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
     position: relative;
    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
     vertical-align: baseline;
}
 sup {
    /* Move the superscripted text up */
     top: -0.5em;
}
 sub {
    /* Move the subscripted text down, but only half as far down as the superscript moved up */
     bottom: -0.25em;
}
 code .hljs-keyword {
     font-weight: bold;
     color: var(--keyword-color);
}
 code .hljs-keyword {
     font-weight: bold;
}
 code .hljs-comment {
     color:#bbb;
}
 code .hljs-string, code .hljs-number {
     color: var(--string-color);
}
 .snippet {
     border: 1px solid var(--border-color);
    /* padding:20px;
    */
     background-color: var(--secondary-background-color);
     font-size:14px;
     overflow:auto;
     border-radius: 3px;
}
 .snippet h3 {
     font-size: 13px;
     border-bottom: 1px solid var(--border-color);
     padding: 15px 20px;
     font-weight: bold;
}
 .snippet pre {
     border: none;
     padding-top: 0;
}
 
/* presentations */

.presentation header {
    font-family: var(--heading-font);
    padding-bottom: 50px;

    p {
        color: var(--secondary-color);
    }
}

.presentation iframe {
    padding-bottom: 50px;
}


/* From https://stackoverflow.com/questions/59967310/how-to-load-a-different-video-for-dark-mode */

.dark-video {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .dark-video {
        display: block;
    }

    .light-video {
        display: none;
    }
}