/* Imports */
@import url("reset.css");
@import url("pygment.css");
@import url("typogrify.css");
@import url("ribbon.css");


@font-face {
    font-family: 'Libertine';
    src: url('linlibertine_rah-webfont.woff2') format('woff2'),
         url('linlibertine_rah-webfont.woff') format('woff'),
         url('LinLibertine_Rah.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxygen Mono';
    src: url('oxygen-mono-regular.woff'), url('oxygen-mono-regular.ttf');
    font-display: swap;
}

html, body {
    font-family: Libertine, serif;
    font-size: 18px;
    background-image: url('../images/background_fancy_fallback.png');
    background-repeat: repeat;
    image-rendering: auto;
    text-rendering: optimizeLegibility;
}

.offline_fallback_page h2 button { min-height: 84px; }

#menu .active > * { background: rgb(200, 74, 0); }
/*.active:hover, .active > *:hover { background: rgb(220, 174, 70); }*/

body {
    display: block;
    margin: 0px; padding: 0px;
    background-color: #eaecee;
    color: #111;
    min-width: 100%;
    min-height: 100vh;
    word-break: break-word;
}

a:link    { color: #00f; text-decoration: none;      }
a:hover   { color: #00f; text-decoration: underline; }
a:visited { color: #00f;                             }

h1 { font-size: 2.0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }

b, strong { font-weight: 600; }
i, em { font-style: italic; }

h1 a { color: inherit !important }
h2 a { color: inherit !important }
h3 a { color: inherit !important }
h4 a { color: inherit !important }
h5 a { color: inherit !important }
h6 a { color: inherit !important }

ul, ol {
    list-style: outside disc;
    margin: 0em 0 0 1.5em;
}
ol { list-style: decimal; }
ul, li { margin-bottom: 0.2rem; }

/* text elements layout */
p, ul, ol { margin-bottom: 0.8rem; line-height: 1.3rem; }

/* general layout padding */
header, #main_content_box, #extras { padding: 0.8rem 1rem; }
nav#menu, footer#contentinfo { padding: 0rem 1rem; }

header h1 a { display: flex; flex-flow: row wrap; align-items: baseline; }
/* sub title string */
header h1 a sub { font-size: 1.2rem; }

#menu {
    margin-bottom: 1rem;
    background: #000;
}
/*Strip the ul of padding and list styling*/
#menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type:none;
    margin:0;
    padding:0;
    /*position: absolute;*/
}
/*Create a horizontal list with spacing*/
#menu ul li {
    display: inline-block;
    flex-grow: 1;
    margin: 0;
}
/*Style for menu links*/
#menu li a {
    display: block;
    min-width: 8rem;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    background: #000;
    padding: 1.6rem;
}
#menu li a:hover {
    background: rgba(255,0,0,0.6);
}
/*Style 'show menu' label button and hide it by default*/
#menu .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #3d7d47;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
#menu input[type=checkbox] {
    display: none;
}
/*Responsive Styles*/
@media screen and (max-width : 720px){
    #menu ul {
        /*position: static;*/
        display: none;
    }
    nav#menu {
        padding: 0rem 0rem;
    }
    #menu ul li {
        /*Create vertical spacing*/
        margin-bottom: 1px;
        /*Make all menu links into two columns*/
        width: 50%;
    }
    /*Display 'show menu' link*/
    #menu .show-menu {
        display:block;
    }

    /*Show menu when invisible checkbox is checked*/
    #menu input[type=checkbox]:checked ~ #menuul {
        display: flex;
    }
}
@media screen and (max-width : 410px){
    /*Make dropdown links appear inline*/
    #menu ul li {
        /*Create vertical spacing*/
        margin-bottom: 1px;
        /*Make all menu links full width*/
        width: 100%;
    }
    /*Show menu when invisible checkbox is checked*/
    #menu input[type=checkbox]:checked ~ #menuul {
        display: block;
    }
}

#post-list {
    margin-bottom: 1em;
    margin-top: 1em;
}

#main_content_box {
    background: #fff;
    font-size: 1rem;
    padding-top: 1px;
}
#main_content_box h1, #main_content_box h2, #main_content_box h3, #main_content_box h4, #main_content_box h5, #main_content_box h6 {
    margin-top: 0.7em;
    margin-bottom: 0.3em;
}
#main_content_box h1 { text-decoration: underline rgb(200, 74, 0); }
#main_content_box h1 a, #main_content_box h2 a, #main_content_box h3 a, #main_content_box h4 a, #main_content_box h5 a, #main_content_box h6 a { text-decoration: underline; line-height: 1.2em; }
#main_content_box img, #main_content_box .embed { margin: 1rem 0; max-width: 100%; max-height: 72vh; }

#main_content_box section#content.body {
    /* same height as .climate_bar_code */
    margin-top: 0.5rem;
}
.climate_bar_code {
    display: block;
    background-image: url(/2019/8/5/climate-bar-codes/images/2019-08-05_EUROPE-Switzerland--1864-2018-MS.png);
    background-size: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    margin: -1rem;
    margin-top: -1px;
    margin-bottom: -0.5rem;
    height: 0.5rem;
}

.pixelated {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.embed {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.ratio-16-9 { padding-bottom: 56.25%; }

.embed iframe, .embed video {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.button {
    display: inline-block;
    background: #eaecee;
    border-radius: 0.3em;
    padding: 0.4em;
}
.button img {
    height: 1em;
    margin: 0 !important;
}
.button.blue {
    color: #fff;
    background: rgb(44,105,195);
    background: linear-gradient(128deg, rgba(44,105,195,1) 0%, rgba(35,9,121,1) 100%);
}
.button.blue:hover {
    background: rgb(101,163,255);
    background: linear-gradient(128deg, rgba(101,163,255,1) 0%, rgba(95,47,253,1) 100%);
}
.button.red {
    color: #fff;
    background: rgb(255,231,65);
    background: linear-gradient(128deg, rgba(255,231,65,1) 0%, rgba(221,0,0,1) 100%);
}
.button.red:hover {
    background: rgb(255,243,101);
    background: linear-gradient(128deg, rgba(255,243,101,1) 0%, rgba(253,47,47,1) 100%);
}

/* Posts */
#main_content_box img.inline { display: inline-block; margin: 0; max-height: 1em; vertical-align: baseline; }

#main_content_box table { margin: 1rem 0; border: 1px solid #999; background: rgb(200, 74, 0, 0.2); }
#main_content_box table thead th { margin: 1rem; font-size: 1.4rem; font-weight: 600; }
#main_content_box table thead th, #main_content_box table tbody td { padding: 0.4rem; border: 1px solid #999; }
/** highlights */
#main_content_box table thead th, #main_content_box table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.1); }
#main_content_box table .left { text-align: left; }
#main_content_box table .center { text-align: center; }
#main_content_box table .right { text-align: right; }

#main_content_box .gallery { display: flex; flex-flow: wrap row; }
#main_content_box .gallery img { flex-grow: 1; }

#main_content_box .inverted-daemonic { background: rgb(60,60,60); background: linear-gradient(142deg, rgba(147,0,0,1) 0%, rgba(60,60,60,1) 18%, rgba(2,0,36,1) 82%, rgba(147,0,0,1) 100%); padding: 0.2em; color: #fff; }

footer.post-info, .toc_frame {
    /*float: right;*/
    margin: 0.3rem 0;
    border: 1px solid;
    background: rgb(232, 220, 213);
    padding: 1rem;
    /*border-radius: 0.8rem;*/
}

.toc_frame h1 { margin-top: 0; font-size: 1.2rem; }
.toc_frame .toc_entries a { display: block; margin-top: 0.7em; }
.toc_frame .toc_entries a.toc_level1 { margin-left: 0em; }
.toc_frame .toc_entries a.toc_level2 { margin-left: 1em; }
.toc_frame .toc_entries a.toc_level3 { margin-left: 2em; }

.float_barrier { clear: both; }

.hentry { clear: both; margin-top: 0.5rem; border-top: 1px solid #ccc; padding-top: 0.5rem; }
.hentry header { padding: 0rem; }
.entry-content h1, .entry-content h2, .entry-content h3 { font-weight: 600; }

.entry-content blockquote {
    margin: 2rem;
    border-radius: 1rem;
    background: rgba(0,0,0, 0.1);
    padding: 0.6rem;
}
@media print {
     .entry-content a[href]::after { content: " (" attr(href) ")"; }
}

/* Archive */
dd { margin-left: 3rem; }


/* Footer */
.blogroll ul li img { height: 2em; }
.blogroll ul li a { display: inline-block; }

.social ul { list-style: none; }
.social ul li { float: left; }
.social ul li a { display: inline-block; }
.social ul li img { height: 2em; margin-right: 1em; }

.blogroll ul li img:hover, .social ul li img:hover { filter: invert(100%); }

#extras {
    display: flex;
    flex-wrap: wrap;
}
#extras > div { min-width: 50%; }


pre, code {
    padding: 0.05rem 0.2rem;
    background: rgba(255,0,0,0.05);
    background: repeating-linear-gradient(to bottom, rgba(80,80,80,0.1) 0, rgba(80,80,80,0.1) 1.2em, rgba(0,0,0,0.2) 1.2em, rgba(0,0,0,0.2) 2.4em);
    background-color: rgba(200, 74, 0, 0.1);
    font-family: 'Oxygen Mono', monospace;
    white-space: pre-wrap;
}
pre {
    margin: 1em;
    line-height: 1.2em;
}
code { display: inline; }
pre code, code span { padding: 0; background: none; background-color: transparent; }

@media only screen and (min-width:540px){
    body > * { margin: auto 2rem; }
    #extras > div { min-width: 14rem; }
    #main_content_box .gallery img { flex-grow: 1; max-width: calc(50% - 1em); }
}

@media only screen and (min-width:720px){
    body > * { margin: auto; max-width: 80%; }
    .toc_frame .toc_entries a { margin-top: 0.5em; }
    #menu li a { min-width: 4.2rem; }
    footer#contentinfo { padding: 0.0rem 1.0rem; }
    .twocolumn { column-count: 2; column-gap: 1rem; margin-bottom: 1rem; }
    .twocolumn .keeptogether { display: inline-block; width: 100%; }
}

@media only screen and (min-width:1281px){
    body > * { max-width: 60%; }
    .toc_frame .toc_entries a { margin-top: 0.4em; }
    #menu li a { min-width: 6rem; }
    html, body { font-size: 17px; }
    #main_content_box .gallery img { flex-grow: 1; max-width: 33%; }
}

@media only screen and (min-width:2000px){
    html, body { font-size: 20px; }
}

@media only print {
    nav, footer, #extras.body { display: none; }
    footer.post-info { display: block; }
    .entry-title { font-size: 2.8rem; text-align: center; font-weight: 600; }
}