/*
Oh, you're looking at my CSS. Here be dragons.

Let's bundle in a rant while you're here: I'd like to use variable width fonts
instead of fixed size fonts. I enjoy 300 (i.e. light) and 600 (i.e. semibold)
over regular and bold for Crimson Pro only. But Chrome doesn't like to show
anything but 400 and 700 with variable width fonts, so I'll have to trick Chrome
by declaring my 300 and 600 fonts as if they were 400 and 700 respectively.

... or well, I could use font-variation-settings, but that's a global override
which means I have to specify it EVERYWHERE and that's just too much effort for
poor me.
*/


/*
  The Crimson Pro font is provided under the SIL license, and its license is
  available under /licenses/crimson-pro-ofl.txt on this hostname.
*/

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400; /* Really 300 */
  src:  url('/sha/56c996e4cdc0c4b5bd9aeff21054a0f25e8e22ad908d00377aff497ff94a832a.woff2') format('woff2'),
        url('/sha/e0658e608bf1b3799fc7d88a369994348cf9206538ce57ba140eebfdbfbacfa0.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400; /* Really 300 */
  src: url('/sha/3c003f45e2009a6d0b387b23c6e83ca499313d7e023b586a84c5380a3fc35813.woff2') format('woff2'),
       url('/sha/e56b7a3b5d6ec5be351a90a59d5b4341a5df5f1477691b2946ed1d51b42721ae.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700; /* Really 600 */
  src: url('/sha/9f71c18609250a2a16bf63ae91c244fcd7f60db7dedf0a7ffa68e90a924cd0cd.woff2') format('woff2'),
       url('/sha/7c606c2cfb616ffb5a6139a00d64b76615ffede4276bba84bcae71a2f8922927.woff') format('woff');
  font-display: swap;
}

/* Is this font necessary in practice? Probably not. Eh, whatever. */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 700; /* Really 600 */
  src: url('/sha/912a1fa41e3ad7f7322d6f5bfb246ddd3a692110c401b14d62988ead25ed37d4.woff2') format('woff2'),
       url('/sha/ef8e04ad083b732ee3ffafb998acd8f28aaaaafe247b2bf109c9f8ea8e848daf.woff') format('woff');
  font-display: swap;
}


/* This one is fine though, as it only uses the defaults. */

/*
  The Source Code Pro font is provided under the SIL license, and its license is
  available under /licenses/source-code-pro-ofl.txt on this hostname.
*/
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  src: local('Source Code Pro'),
       url('/sha/332e57c5358521eede215d9ed188295c855a0ff3c9e7bb97addfe65029e362b1.woff2') format('woff2'),
       url('/sha/2b29d3d4d439a4888957dbb1b4770352f46a2d02e670243905d1269064e3e480.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya SC-hypirion-min';
  font-style: normal;
  src: url('/sha/5cc318c961a5dbb733545e3bc66359f3b2effbc6521132368fca6def38fff1c0.woff2') format('woff2'),
       url('/sha/5815423eaefba102916dbeca006da4de48a49cc47fe2e6bf5f284a23a7c82e0c.woff') format('woff');
  font-display: swap;
}
:root {
    --notification-info-bg: #e1f5fe;
    --notification-info-border: color-mix(in srgb, var(--notification-info-bg) 70%, black);
}

body {
    font-family: 'Crimson Pro', serif;
    margin: 0 auto;
    background: white;
    color: #111;
}

body.dark {
    background: #111;
    color: white;
}

p, li { line-height: 1.3; magin-bottom: 1.8rem; }

#logo {
  font-family: 'Alegreya SC-hypirion-min', serif;
  font-size: 1.5em;
}

@media all and (min-width: 900px) {
    body{
        font-size: 1.6em;
    }
}

@media all and (max-width: 899px) {
    body{
        font-size: calc(1.2em + 0.7vw); /* because we don't have max(.., calc) :( */
    }
}

/* Include page border */

@media all and (min-width: 900px) {
    body {
        width: 900px;
    }

    #wrapper {
        border: 1px gray solid;
    }
}

/* So small that page border makes no sense */

@media all and (max-width: 899px) {
   #wrapper {
       border-bottom: 1px gray solid;
   }
}

#wrapper {
    padding: 1px 0;
}

h1, h2, h3 {font-weight: normal; margin: 0.3em 0;}
h1, h2, h3, h4 {text-align: center;}

content h1, footer h1, h2, h3 {line-height: 1;}


nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

nav ul li { display: inline; padding-right: 0.5rem; padding-left: 0.5rem;}


header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

#musing-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: baseline;
}

.musing-info {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    padding-bottom: 0.1em;
}

.category-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.category-list a {
    font-size: 0.9em;
    text-decoration: none;
    color: #111;
    background: #f6f6f6;
    border: 1px gray solid;
    padding: .2em .5em .3em;
    border-radius: 0.3em;
    margin: 0.2em 0.5em;
    transition: all 0.1s ease-in-out;
}

.category-list a:hover {
    background: #e5e5e5;
    border: 1px dimgray solid;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    transition: all 0.1s ease-in-out;
}


#musing-header p, .musing-info time {font-size: 0.8em; margin:0; padding-left: 0.4rem;}
article h1 {font-size: 1.5em;}
.pull-right {margin-left: auto;}

a:not(.category-list a) {color: #0d5eaf; text-decoration: none;}
a:visited:not(.category-list a) {color: #073460;} /* Hmm, need to think about this one. */
a:hover:not(.category-list a)   {color: red;     text-decoration: underline;}

svg, img, canvas, video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
img, video {
    height: auto;
}
.non-selectable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
svg text::selection {
    background: none;
}

figure {margin-left: 0; margin-right: 0;}
figcaption {
    font-size: 0.8em;
    text-align: center;
}
figure img {padding-bottom: 0.5em;}

.inline-img {
    display: inline;
}

.footnotes {
    padding-top: 2em;
    font-size: 0.8em;
}

.hidden {
    display: none;
}

@media all and (min-width: 420px) {
    .mobile {
        display: none;
    }
}
@media all and (max-width: 419px) {
    .non-mobile {
        display: none;
    }
}

.notification-banner {
    font-size: 0.9em;
}

.notification-banner a {
    text-decoration: underline !important;
}

@media all and (min-width: 711px) {
    #content, footer {
        width: 640px;
    }
    pre {
        border: 1px gray solid;
        padding: 0.5rem 1rem;
    }

    .notification-banner {
        background: var(--notification-info-bg);
        border: 1px var(--notification-info-border) solid;
        padding: 0.5rem 1rem;
    }
    .no-bullet { /* grumble grumble, padding is hard */
        list-style-type: none;
        padding-left: 0;
    }
    .tablet {
        display: none;
    }
}
@media all and (max-width: 710px) {
    p, pre, h1, h2, h3, h4, dl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    ul, li { padding-right: 1rem; }
    .no-bullet { list-style-type: none; }
    pre {
        border-bottom: 1px gray solid;
        border-top: 1px gray solid;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }

    .notification-banner {
        background: var(--notification-info-bg);
        border-bottom: 1px var(--notification-info-border) solid;
        border-top: 1px var(--notification-info-border) solid;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }

    li pre, blockquote pre {
        border: 1px gray solid;
    }
}

#footnotes {
    padding-top: 5em;
}

#content, footer {
    margin: 0 auto;
    text-align: justify;
}

footer {
    border-top: 1px gray solid;
    font-size: 0.8em;
    text-align: center;
}

pre {
    background: rgba(0,0,0,.05);
    overflow: auto;
}

/* Apparently not that efficient, but we have no reloads so whatever. */
:not(pre) > code {
    background: rgba(0,0,0,.05);
}

code {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.70em;
}

pre code {
    font-size: 0.60em;
    overflow-wrap: anywhere;
    display: block; /* Without this, the line spacing's all off for some reason*/
}

.footnotes pre code {
    font-size: 0.70em;
}

dt {
  font-weight: bold;
}

.star {
    color: orange;
}

.katex {
    font-size: 0.85em !important;
}

.centered-table {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.grid-table, .grid-table th, .grid-table tr, .grid-table td {
  margin: auto;
  border-collapse: collapse;
  border: 1px solid;
  padding: 0.3rem 0.5rem;
  /* All tables should have this, but backwards compatibility with that old post
     that depends on no padding is messy so.. */
}

.bordered tr {
    outline: solid 1px;
}

/* inspired by https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */

kbd {
  font-family: 'Source Code Pro', monospace;
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
  color: #333;
  display: inline-block;
  font-size: .65em;
  line-height: 1;
  padding: 4px;
  white-space: nowrap;
}

.profile-pic {
    float: right;
    margin-left: 1rem;
}

.profile-pic img {
   border-radius: 10%;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
}

@media all and (max-width: 899px) {
    .profile-pic {
        width: 40%;
        margin-top: 0.7rem;
        margin-right: 1rem;
    }
}

@media all and (min-width: 900px) {
    .profile-pic {
        width: 30%;
    }
}


/*
  These classes are removed if the user has the locale provided (which
  the name should tell ya).
*/

.remove-if-nb {
    display: none;
}
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #60a0b0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40a070 } /* Literal.Number */
.highlight .s { color: #4070a0 } /* Literal.String */
.highlight .na { color: #4070a0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60add5 } /* Name.Constant */
.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287e } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #bb60d5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #40a070 } /* Literal.Number.Float */
.highlight .mh { color: #40a070 } /* Literal.Number.Hex */
.highlight .mi { color: #40a070 } /* Literal.Number.Integer */
.highlight .mo { color: #40a070 } /* Literal.Number.Oct */
.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070a0 } /* Literal.String.Char */
.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #c65d09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
.highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */