:root {
    --sans: Cantarell, Lato, "Noto Sans", "Nunito Sans", sans-serif;
    --mono: "JetBrains Mono NL","Noto Sans Mono","Andale Mono","DejaVu Sans Mono", monospace;
    --border-width: 1px; /* default border width, also hr */
    --border-color: var(--base03);
    }
html {
    scrollbar-color: var(--base03) #00000000
    }
::-webkit-scrollbar-thumb {
        background: var(--base03)
    }

body,html,header,footer {
    width: 100%;
    overflow-x: hidden;
    }
body {
    font-family:var(--sans);
    font-size: 1em;
    color: var(--base05,#43474e);
    background: var(--base00,#f5f0e7);
    line-height: 1.4em;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    text-rendering: optimizeLegibility;
    position: relative;
    margin:0;
    }
.block_bg {
    background: var(--base01,#f5f0e7);
    }
.block_bg2 {
    /* Currently only article-list-item on index page. It can be a little different from header & footer if so desired */
    background: var(--base01,#f5f0e7);
    }
kbd {
    border-color: var(--base02);
    border-width: var(--border-width);
    border-style: solid;
/*
    border-radius: 0.2em;
*/
    }
hr {
    margin: 1em 0;
    height:var(--border-width);
    border-width:0;
    background: var(--border-color);
    }
h1,h2,h3,h4,h5,h6,summary {
    font-family:var(--sans);
    font-weight: 600;
    color: var(--base04,#777);
    }
h1 {
    font-size: 2.2em;
    padding: 1em 0 .9em 0;
    line-height: 1.2em;
    }
h2 { 
    font-size: 1.9em;
    padding: .9em 0 .8em 0; 
    line-height: 1.05em;
    }
h3 { 
    font-size: 1.6em;
    padding: .75em 0 .7em 0;
    line-height: .9em;
    }
h4 { 
    font-size: 1.35em;
    padding: .65em 0 .55em 0;
    line-height: .7em;
    }
h5 { 
    font-size: 1.1em;
    padding: .5em 0 .45em 0;
    line-height: .6em;
    }
h6 { 
    font-size: 1em;
    padding: .45em 0 .4em 0;
    line-height: .6em;
    }
/* unfortunate consequence of the primitive reset file I use */
strong, b {
    font-weight: bold;
    }
em, i {
    font-style: italic;
    }
small {
    font-size: 75%;
    }
blockquote {
/*
    font-size: 90%;
*/
    margin: 1em 0;
    text-align: left;
    background: var(--base01);
    padding: .5em 1em .15em 1em;
    border-left: thick double var(--base08);
    }
div.content blockquote p:not(:first-child) {
    border-top: var(--border-width) solid var(--base02);
    padding-top: .25em;
    }
div.content blockquote p, div.content :not(h1) > blockquote p:first-child {
    margin: 0 0 .5em 0;
    }
/*
blockquote::before {
    content: "";
    margin-left: -0.5em;
    margin-right: .5em;
    float:left;
    font-family: forkawesome;
    color: var(--base0f);
    }
*/
img {
    width: 100%;
/*
    border: var(--border-width) solid var(--base05);
*/
    /* More complex and pronounced shadows for images */
	box-shadow: 0 0 3px hsl(0deg 0% 0% / 0.2), 0 2px 2px hsl(0deg 0% 0% / 0.2), 2px 0 2px hsl(0deg 0% 0% / 0.2), 0 3px 3px hsl(0deg 0% 0% / 0.2), 0 4px 4px hsl(0deg 0% 0% / 0.2);
/*
    border-radius: .25em;
    }
.sharp {
    border-radius: 0;
*/
    }
.highlight, .article-list-item, :not(.highlight) > pre, blockquote, div.toc {
    /* Very subtle */
	box-shadow: 0 2px 2px hsl(0deg 0% 0% / 0.1), 0 3px 3px hsl(0deg 0% 0% / 0.1);
    }
header {
    border-bottom: var(--border-width) solid var(--border-color);
    }
footer {
    border-top: var(--border-width) solid var(--border-color);
    }
.flexbox {
    display:flex;
    height:100%;
    flex-basis: auto;
    }
.flexbox > * {
    align-self: center; /* vertically */
    flex: 1 0;
    display:inline-block;
    line-height:1;
    }
header {
    padding: 0;
    height: 4em;
    position: sticky;
    top: 0;
    opacity:.9;
    }
header .flexbox .title {
    font-weight:normal;
    font-size:2.5em;
    line-height: 2em;
    text-align: center;
    }
header .flexbox .links {
    text-align: right;
    font-size: 2em;
    line-height: 2em;
    padding-right:.25em;
    }
header .flexbox .logo {
    display:inline-block;
    visibility: hidden;
    height:4em;
    }
header .flexbox .logo svg {
    height:100%;
    margin-left: .3em;
    /* for the (colorless) SVG logo */
    fill: var(--base00,#f5f0e7);
    }
header .flexbox .links ul li {
    padding: 0 .25em;
}
ul li, ol li {
    margin: .5em 0;
    }
ul, ol {
    margin: 0 0 1em 1em;
    }
/* clickable menu*/
input#menu-icon {
    display: none;
    }
nav#menu-icon {
    display: none;
    list-style: none;
    padding: 1em;
    position:fixed;
    left:0;
    top: 4em;
    background: var(--base02,#f5f0e7);
    margin:0;
    border-bottom: var(--border-width) solid var(--border-color);
    }
input#menu-icon:checked ~ nav#menu-icon {
    display: inline-block;
    }
input#menu-icon ~ label[for="menu-icon"]::before {
    content: "";
    padding-left: .5em;
    }
input#menu-icon:checked ~ label[for="menu-icon"]::before {
    content: "";
    }
label[for="menu-icon"] {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    font-size: 2em;
    line-height: 2em;
    width: 25%;
    }
div.headerlink {
    position: fixed;
    left: 33.33%;
    top: 0;
    z-index: 999;
    height: 4em;
    width: 33.33%;
    padding: 0;
    }
div.headerlink a {
    width:100%;
    height:100%;
    display:inline-block;
    }
.article-list-item  {
    padding: .5em .5em 0 .5em;
    margin: .5em 0;
    }
a { 
    text-decoration: none;
    }
a,
.p01-contact .required label:after,
a>code,
#toc ul li,
input#titlesonly[type=checkbox]:checked ~ label::before,
input,
textarea,
select,
div.footnotes ol>li {
    color: var(--base09,#664747);
    }

label[for=menu-icon]:hover,
a:hover, a.fa-home {
    text-decoration:none;
    color: var(--base0d,#2c3138)
    }
.tag_cloud a:hover span:first-child,
article.list a:hover h1 {
    text-decoration:underline solid .05rem;
    }
nav ul, header .links ul { /* tag cloud and list of links */
    list-style-type:none;
    padding:0;
    margin:0;
    }
ul.tag_cloud {
    margin-bottom: 0.5em;
    }
ul.tag_cloud li, header .links ul li {
    display: inline-block;
    line-height:100%;
    }
ul.tag_cloud > span {
    margin-right: .5em;
    }
ul.tag_cloud li span {
    font-size:.7rem;
    }
div.toc ul {
    margin-bottom: 0;
    }
div.toc li, .nav li {
    margin: 0;
    }
div.toc {
    background: var(--base01,#f5f0e7);
    padding: .5em 2em .5em 1em;
    display: inline-block;
    }
.border, .highlight, div.toc {
    border:var(--border-width) solid var(--border-color);
    }
code, pre, kbd {
    font-family: var(--mono);
    }
:not(pre) > code, kbd {
    padding: 0 0.15em;
    line-height:inherit;
    font-size: .85em;
    /* override pygments */
    color: var(--base0d);
    background: var(--base01);
    }
pre > code {
    display: block; /* stackoverflow.com/a/20673961 */
    padding: .5em;
    }
pre {
    display: inline-block; /* stackoverflow.com/a/20673961 */
    line-height:1.3em;
    overflow: auto;
    max-width:100%;
    word-break: break-all;
    white-space: pre-wrap;
    padding-top:.3em;
    padding-left:.4em;
    font-size: .85em;
    }
.highlight {
    margin:.8em 0 .8em -1px;
    }
a.external::after {
    content: "";
    font-family: ForkAwesome;
    padding-left: 0.2em;
    font-size: 50%;
    vertical-align: super;
    line-height: 100%;
    color: var(--base04);
    }
.fa {
    /* less contrast than regular */
    color: var(--base04);
    }
.text-right {
    text-align: right;
    }
form#search_form label {
    font-size: 75%;
    }
form#search_form input.submit, .article-list-item {
    border:var(--border-width) solid rgba(0,0,0,0);
    }
form#search_form input.submit:hover, .article-list-item:hover {
    border-color: var(--border-color);
    }
.article-list-item a:hover { text-decoration: none }
.article-list-item > a { color: var(--base05,#43474e); }
.article-list-item:hover h2 { color: var(--base09,#27354E); }
.article-list-item h2 {
    margin-bottom: 0.2em;
    line-height:1.1em;
    font-size: 1.9em;
    padding: .3em 0;
    color: var(--base0d,#373F4E);
    }
div.summary {
    margin-bottom: 1em;
    font-size: 0.9em;
    line-height:1.2em;
    }
div.content p { 
    margin: 1em 0;
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    }
div.content :not(h1) > p:first-child { 
    margin-top: 2em;
    }
div.article { 
    padding: 0 .5em;
    }
div.tagline {
    font-size: 0.9em;
    border-bottom: 1px solid var(--base03);
    }
div.tagline .tags {
    float: right;
    }
.article_list ul, .tag_page ul, ul.tag_list {
    list-style-type: none;
    margin: 0px;
    }
.half {
    width:100%;
    padding:0 0 1%;
    }
#image-block {
    margin: 0.2em auto
    }
table.yearly th {
    min-width: 5em
    }
table.yearly td {
    min-width: 4em
    }
.paginator a { 
    padding: 0 .25em;
    vertical-align: .1em;
    }
.gallery .preview {
    width:50%;
    margin:0;
    padding:0 1em 1em 0;
    display:inline-block;
    }

/*
usually 641px, in accordance with foundation.css
*/
@media (min-width: 40.0625em) {
    img {
        width: initial;
        max-width:100%;
        }
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
    header .flexbox .links {
        padding-right: .25em;
        }
    header .flexbox .links ul li {
        padding: 0 .25em;
    }
    div.article { 
        padding: 0 1em;
        }
    #image-block {
        float: right
        }
    .half {
        width:49.5%;
        padding-left: .25%;
        padding-right: .25%;
        }
    .left {
        float: left;
        max-width: 50%;
        margin-right: 1em;
        }
    .right {
        float: right;
        max-width: 50%;
        margin-left: 1em;
        }
    .article-list-item { 
        margin-bottom: 0.8em;
        padding: 1em 1em 0 1em;
        }
    .fixed {
        bottom: .6em;
        right: .5em;
        }
    }
/*
This is when grid.css creates the sidebar, i.e. when it makes columns float
*/
@media (min-width: 64.0625em) {
    /* switch position of logo & title */
    .flexbox > div:nth-child(2) {
        order: -1;
        }
    header .flexbox .logo {
        visibility: visible;
        margin:0;
        }
    header .flexbox .logo svg {
        width:100%; /* this makes it center-align */
        margin-left: 0;
        }
    header .flexbox .title {
        padding-left: .5em;
        text-align: left;
        }
    .desktop-no {
        display: none;
        }
    label[for="menu-icon"] {
        display:none;
        }
    nav#menu-icon {
        display: inline-block;
        position: initial;
        text-align:right;
        background: var(--base00,#f5f0e7);
        padding: .5em 0 0 .5em;
        border:none;
        }
    .fixed {
        bottom: .7em;
        right: .6em;
        }
    }