/* Mon 26 March 2018 - 16.34pm - bslade */

/*
*  _____ _   _  ____ ___  __  __
*  | ____| \ | |/ ___/ _ \|  \/  |
*  |  _| |  \| | |  | | | | |\/| |
*  | |___| |\  | |__| |_| | |  | |
*  |_____|_| \_|\____\___/|_|  |_|
*

 * CSS Overides over Kaushal Modi's CSS Overrides over the default lanyon-hugo theme
 *
 * Below CSS is a hybrid of:
 * - https://gitlab.com/kaushalmodi/hugo-theme-refined
 * - https://github.com/tummychow/lanyon-hugo/tree/master/static/css
 * - https://github.com/abo-abo/abo-abo.github.io/tree/master/public/css
 * - https://viljamis.com
 * - lots of tweaks by Kaushal Modi 
 * - my own tweaks to make it a dark theme (with a tronish twist)
 */

/* Contents: */
/*
/*  Global */
/*    Fonts */
/*      Iosevka */
/*      Linux Biolinum */
/*      Source Sans Pro */
/*      Libre Baskerville */
/*      Andada */
/*  ** Poole ** */
/*  ** Lanyon ** */
/*  html */
/*  body */
/*    Italics */
/*    h1 */
/*    h2-h6 */
/*    Do not capitalize text in code blocks, even if they are in headers */
/*    h2 Post titles on any list page (index.html, taxonomy list, etc. */
/*    Org TODO keywords */
/*      Org TODO set to TODO state */
/*      Org TODO set to DONE state */
/*    Section numbers */
/*    Post-fix "notes" to Notes headings in summaries, post singles */
/*  Post-fix a "." to section numbers */
/*  Block quotes */
/*      Headline Hashes */
/*      Org-style Headline Level Prefix / Asterisks */
/*  Horizontal Rule */
/*  Floats */
/*  Prev/Next post links */
/*  Tables */
/*  Footnotes */
/*    Footnote Refs & Definitions */
/*    Footnote Refs */
/*    Footnote Definitions */
/*  Lists */
/*    Post list */
/*    Tags/categories buttons */
/*      Buttons on terms pages / Tag Cloud */
/*    Gray numbers/bullets for lists */
/*      Unordered lists */
/*      Checkbox lists */
/*      Social Icons */
/*      Ordered/numbered lists */
/*  All Terms (tags/categories) */
/*  Mast head */
/*    Title */
/*      Title and cursor font sizes */
/*    Tagline */
/*    Blinking cursor */
/*  Post */
/*  Summary */
/*    Read More */
/*  Keyboard tags */
/*  Image */
/*    Captions */
/*  Better link underlines */
/*    Remove underlines from certain links */
/*    Prev/Next post links */
/*    Color the links in Newer/Older text in the paginator */
/*  Comments -- Isso */
/*  Date stamp */
/*  Code Blocks: pre,.. */
/*    Show code block language on top-right/Language Overlay */
/*  Navigation Bar */
/*    Hamburger Menu only for small screens */
/*  Color border at the top of the page */
/*  Table of Contents on side */
/*  TeX, LaTeX, XeTeX rendering */
/*  Series */
/*  Footer */
/*  Note */
/*  No Wrap */
/*  microformats2 h-card */
/*  Like and Retweet icons */
/*  Badges */
/*  Small Caps */
/*  Display Inline */
/*  RSS/ATOM feed buttons */

/* * Global */
/* The --theme-color and --theme-color-light root variables are set in
   the "head.html" partial. */
:root {
    --grey: #5050bd;
    --grey-light: rgba(250, 250, 250, 0.5); /* Same as the --grey color #515151, but in decimal, with 50% opacity */
    --grey-2: #8c8cc8;
    --grey-3: #d9d9d9;
    --bluish: #00ace6;
    --yellowish: #b2b234;
    --dark-red: #800000;
    --title-heading-color: #05d5ff;
    --blinking-cursor-color: #ffffff;
    --strong-colour: #ff3c00;
    --mono: 'DejaVu Sans Mono', 'Iosevka', 'Lucida Console', Monaco, 'Courier New',  monospace;
    --serif:  'IM Fell Great Primer', 'IM Fell English', 'Libre Baskerville', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --serif-2: 'IM Fell English', 'Libre Baskerville', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --italics: 'IM Fell Great Primer', 'IM Fell English', 'Andada', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --sans-serif-1: 'Ubuntu', 'Linux Biolinum', Arial, Helvetica, sans-serif;
    --sans-serif-2: 'DejaVu Sans', 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

/* ** Fonts */
/* *** DejaVu Sans */
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSans.woff') format('woff');
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSans-Italic.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSans-Bold.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSans-BoldItalics.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSans-ExtraLight.woff') format('woff');
    font-weight: light;
}
/* *** DejaVu Sans Mono */
@font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSansMono.woff') format('woff');
}
@font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSansMono-Oblique.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSansMono-Bold.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('../fonts/dejavu-fonts-woff-2.37/woff/DejaVuSansMono-BoldItalics.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
/* *** IM Fell English Roman & Italic*/
@font-face {
    font-family: 'IM Fell English';
    src: url('../fonts/IM.Fell.fonts/IMFeENrm29C.woff') format('woff');
}
@font-face {
    font-family: 'IM Fell English';
    src: url('../fonts/IM.Fell.fonts/IMFeENit29C.woff') format('woff');
    font-style: italic;
}

/* *** IM Fell Great Primer */
@font-face {
    font-family: 'IM Fell Great Primer';
    src: url('../fonts/IM.Fell.fonts/IMFeGPrm29C.woff') format('woff');
}
@font-face {
    font-family: 'IM Fell Great Primer';
    src: url('../fonts/IM.Fell.fonts/IMFeGPit29C.woff') format('woff');
    font-style: italic;
}
/* *** Ubuntu */
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-font-family-0.83/Ubuntu-R.woff') format('woff');
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-font-family-0.83/Ubuntu-RI.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-font-family-0.83/Ubuntu-B.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-font-family-0.83/Ubuntu-BI.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-font-family-0.83/Ubuntu-L.woff') format('woff');
    font-weight: light;
}
/* *** Iosevka */
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-regular.woff2') format('woff2'),
         url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-regular.woff') format('woff');
}
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-italic.woff2') format('woff2'),
         url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-italic.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-bold.woff2') format('woff2'),
         url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-bold.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-bolditalic.woff2') format('woff2'),
         url('../fonts/iosevka/1.14.1/subset/iosevka-ss08-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/* *** Linux Biolinum */
@font-face {
    font-family: 'Linux Biolinum';
    src: url('../fonts/linux-libertine/5.3.0/subset/LinBiolinum_R.woff') format('woff');
}
@font-face {
    font-family: 'Linux Biolinum';
    src: url('../fonts/linux-libertine/5.3.0/subset/LinBiolinum_RI.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'Linux Biolinum';
    src: url('../fonts/linux-libertine/5.3.0/subset/LinBiolinum_RB.woff') format('woff');
    font-weight: bold;
}

/* *** Source Sans Pro */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-Regular.woff2') format('woff2'),
         url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-It.woff2') format('woff2'),
         url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-It.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-Bold.woff2') format('woff2'),
         url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-BoldIt.woff2') format('woff2'),
         url('../fonts/source-sans-pro/2.020R-ro-1.075R-it/subset/SourceSansPro-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/* *** Libre Baskerville */
@font-face {
    font-family: 'Libre Baskerville';
    src: url('../fonts/libre-baskerville/2012/subset/LibreBaskerville-Regular.woff2') format('woff2'),
         url('../fonts/libre-baskerville/2012/subset/LibreBaskerville-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Libre Baskerville';
    src: url('../fonts/libre-baskerville/2012/subset/LibreBaskerville-Bold.woff2') format('woff2'),
         url('../fonts/libre-baskerville/2012/subset/LibreBaskerville-Bold.woff') format('woff');
    font-weight: bold;
}

/* *** Andada */
@font-face {
    font-family: 'Andada';
    src: url('../fonts/andada/2013/subset/Andada-Italic.woff2') format('woff2'),
         url('../fonts/andada/2013/subset/Andada-Italic.woff') format('woff');
    font-style: italic;
}
@font-face {
    font-family: 'Andada';
    src: url('../fonts/andada/2013/subset/Andada-BoldItalic.woff2') format('woff2'),
         url('../fonts/andada/2013/subset/Andada-BoldItalic.woff') format('woff');
    font-style: italic;
    font-weight: bold;
}

/* * ** Poole ** */
/*
 *                        ___
 *                       /\_ \
 *  _____     ___     ___\//\ \      __
 * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
 * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
 *  \ \ ,__/\ \____/\ \____//\____\ \____\
 *   \ \ \/  \/___/  \/___/ \/____/\/____/
 *    \ \_\
 *     \/_/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/poole.
 */


/*
 * Contents
 *
 * Body resets
 * Custom type
 * Messages
 */


/*
 * Body resets
 *
 * Update the foundational and global aspects of the page.
 */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

body {
    color: var(--grey);
    background-color: #000;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Body text */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

strong {
    color: var(--strong-colour);
}


/* Lists */
ul, ol, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Description/definition lists */
dt {
    font-weight: bold;
}
dd {
    margin-bottom: .5rem;
}

/* Misc */
hr {
    position: relative;
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #000;
}

abbr {
    font-family: var(--sans-serif-1);
    font-size: 85%;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}
abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #e5e5e5;
}

/* Code */
code {
    padding: .25em .5em;
    font-size: 85%;
    color: var(--theme-color);
    background-color: #f9f9f9;
    border-radius: 3px;
}
/* Do not color <code> blocks in headings */
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    color: inherit;
    background-color: inherit;
    padding: inherit;
}

/* Quotes */
blockquote {
    padding: .5rem 1rem;
    margin: .8rem 0;
    color: #151B8D;
    background-color: #ccc;
    border-left: .25rem solid #e5e5e5;
}
blockquote p:last-child {
    margin-bottom: 0;
}
@media (min-width: 30em) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem;
    }
}

/* Tables */
table {
    margin-bottom: 1rem;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-collapse: collapse;
}
td,
th {
    padding: .25rem .5rem;
    border: 1px solid #e5e5e5;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background-color: #ddd;
    color: #000;
}


/* * ** Lanyon ** */
/*
 *  ___
 * /\_ \
 * \//\ \      __      ___   __  __    ___     ___
 *   \ \ \   /'__`\  /' _ `\/\ \/\ \  / __`\ /' _ `\
 *    \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
 *    /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
 *    \/____/\/__/\/_/\/_/\/_/`/___/> \/___/  \/_/\/_/
 *                               /\___/
 *                               \/__/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/lanyon.
 */


/*
 * Contents
 *
 * Global resets
 * Sidebar
 * Slide effect
 * Posts and pages
 * Pagination
 * Reverse layout
 * Themes
 */


/*
 * Global resets
 *
 * Update the foundational and global aspects of the page.
 */

/* Prevent scroll on narrow devices */
html,
body {
    overflow-x: hidden;
    color: #fff;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--grey-2);
    letter-spacing: -.025rem;
    text-rendering: optimizeLegibility;
    font-family: var(--sans-serif-1);
}

/*
 * Container
 *
 * Center the page content.
 */

.container {
    max-width: 28rem;
    padding-left:  1rem;
    padding-right: 1rem;
    margin-left:  auto;
    margin-right: auto;
}
@media (min-width: 38em) {
    .container {
        max-width: 32rem;
    }
}
@media (min-width: 56em) {
    .container {
        max-width: 38rem;
    }
}

/* Blog post title */
.post-title,
.post-title a {
    /* color: var(--strong-colour); */
    color: var(--dark-red);
}
.post-title {
    margin-top: 0;
}

/* Related posts */
.related {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid #eee;
}
.related-posts {
    padding-left: 0;
    list-style: none;
}
.related-posts h3 {
    margin-top: 0;
}
.related-posts li small {
    font-size: 75%;
    color: #999;
}
.related-posts li a:hover {
    color: #268bd2;
    text-decoration: none;
}
.related-posts li a:hover small {
    color: inherit;
}


/*
 * Pagination (Newer/Older links on index page)
 *
 * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 * there are no more previous or next posts to show.
 */

.pagination {
    font-family: var(--sans-serif-1);
    font-size: 1.1em;
    color: #ccc;
    text-align: center;

    margin-left: -1rem;         /* Don't show margins on small screens */
    margin-right: -1rem;

    overflow: hidden; /* clearfix */
}

/* Pagination items can be `span`s or `a`s */
.pagination-item {
    display: block;
    padding: 0.5rem;
    border: 1px solid #eee;
}
.pagination-item:first-child {
    margin-bottom: -1px;
}

/* Only provide a hover state for linked pagination items */
a.pagination-item:hover {
    background-color: #f5f5f5;
}

@media (min-width: 30em) {
    .pagination {
        margin: 3rem 0;
    }
    .pagination-item {
        float: left;
        width: 50%;
    }
    .pagination-item:first-child {
        margin-bottom: 0;
        border-top-left-radius:    4px;
        border-bottom-left-radius: 4px;
    }
    .pagination-item:last-child {
        margin-left: -1px;
        border-top-right-radius:    4px;
        border-bottom-right-radius: 4px;
    }
}

/* * html */
/* Not sure is the below is needed. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* * body */
body {
    font-weight: 400;
    font-size: 1em;
    font-family: var(--serif);
    background: transparent;
    padding-bottom: 2rem;
}

.e-content {
    line-height: 1.6;
}

/* ** Italics */
i,
em,
figcaption,          /* All things captions */
figcaption i,
.src-block-caption,
.src-block-caption i,
.table-caption,
.table-caption i,
.generated,
.post-date,          /* Date stamps */
.prev-post,          /* 'Prev' and 'Next' links in post singles */
.next-post {
    font-family: var(--italics);
    font-style: italic;
    font-size: 0.9em;
}
i,
em {
    font-size: 1.0em;
}
/* 1em italics look too big in headings, so tone them down over there. */
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
    font-size: 0.9em;
}

/* ** h1 */
h1 {
    text-rendering: optimizeLegibility;
    margin: 1em 0 0.4em -0.02em;
    font-weight: 700;
    /* font-size: 190%; */
    font-size: 2em;
    line-height: 1.1;
    /* Tue Oct 25 11:31:41 EDT 2016 - kmodi*/
    /* I am not sure what the below mask code does */
    /* -webkit-mask-image: url("/images/mask-eea06722.png"); */
    /* -webkit-mask-size: 30%; */
    /* -webkit-mask-repeat: repeat; */
}

/* Center align titles only in blog posts */
.post .post-title {
    text-align: center;
}

/* ** h2-h6 */
h2 {                            /* Top-most level heading in a post body */
    margin-top: 1.8rem;
    font-size: 1.8em;
}
h3 {
    margin-top: 1.5rem;
    font-size: 1.5em;
}
h4 {
    margin-top: 1.2rem;
    font-size: 1.2em;
}
h5 {
    margin-top: 1rem;
    font-size: 1em;
}
h6 {
    margin-top: 1rem;
    font-size: 1em;
    text-transform: uppercase;
}
h2,
h3,
h4,
h5,
h6 {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "onum" 0;
    -webkit-font-feature-settings: "onum" 0;
    font-feature-settings: "onum" 0;
    line-height: 1.0;
    margin-bottom: 0.5em;
    position: relative;
    color: var(--title-heading-color);
}

/* ** Do not capitalize text in code blocks, even if they are in headers */
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    text-transform: none;
}

h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-weight: 200;
}

/* ** h2 Post titles on any list page (index.html, taxonomy list, etc. */
h2.post-title,
h2.post-title a {
    font-family: var(--sans-serif-1);
    color: var(--theme-color);
}

h2.post-title a:hover {
        color: var(--strong-colour); 
    /*  color: var(--title-heading-color); /* try different colour */
    /*  color: var(--grey); /* try yet a different colour */
}


/* ** Org TODO keywords */
.org-todo {
    font-size: 0.8em;
    font-weight: 700;
}
/* *** Org TODO set to TODO state */
.org-todo.todo {
    color: #e60000;
}
/* *** Org TODO set to DONE state */
.org-todo.done {
    color: green;
}

/* Series TODO */
.series .todo {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--theme-color);
}

/* ** Section numbers */
h2 .section-num,
h3 .section-num,
h4 .section-num,
h5 .section-num,
h6 .section-num {
    font-weight: bold;
    color: var(--grey);
}

/* ** Post-fix "notes" to Notes headings in summaries, post singles */
.post.notes h1::after,
.summary.notes h2 a::after {
    font-size: 0.9em;
    content: "notes";
    padding: 2px 5px 2px 5px;   /* top, right, bottom, left */
    vertical-align: 0.05em;
    margin-left: 5px;
}
.post.notes h1::after {
    background: var(--grey-2);
    color: white;p
}
.summary.notes h2 a::after {
    background: var(--theme-color);
    color: white;
}

/* * Post-fix a "." to section numbers */
.section-num::after {
    content: ".";
}

/* * Block quotes */
.description,
blockquote {
    font-family: var(--sans-serif-1);
    font-style: italic;
    margin-left: 1em;             /* Space to the left of the vertical line */
    padding-left: 1em;            /* Space to the right of the vertical line */
    padding-right: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.1em;
}
.description {
    border-left: 4px solid var(--theme-color); /* Vertical line on the left */
}
blockquote {
    border-left: 2px solid #b3b3b3; /* Vertical line on the left */
}

/* *** Headline Hashes */
.headline-hash,
.headline-hash:hover {
/*    color: var(--theme-color); /* post title change colour? */
    color: var(--theme-color); /* post title change colour? */
    vertical-align: top;
    font-size: 0.8em;
}
.headline-hash:hover {
    opacity: 0.75;
}

/* *** Org-style Headline Level Prefix / Asterisks */
.content h2::before,
.content h3::before,
.content h4::before,
.content h5::before,
.content h6::before {
    font-family: var(--sans-serif-2);
    color: var(--grey-light);
    font-size: 1.5em;
    vertical-align: -35%;
    letter-spacing: -.1em;      /* Squish the asterisks together */
    margin-right: 0.25em;
}
.content h2::before {
    content: "*";
    color: var(--theme-color);
}
.content h3::before {
    content: "**";
}
.content h4::before {
    content: "***";
}
.content h5::before {
    content: "****";
}
.content h6::before {
    content: "*****";
}

/* * Horizontal Rule */
hr {
    margin: 0.75rem 0;
}

/* * Floats */
/* Applies to the date stamp in the list of all posts, and 'Prev' post links */
.left {
    float: left;
    margin-right: 1rem;
}

/* Applies to the categories listed in the list of all posts, and 'Next' post links */
.right {
    float: right;
    margin-left: 1rem;
}

.center {
    text-align: center;
}

/* https://css-tricks.com/all-about-floats/ */
/* Clear all floats. */
.clear-float {
    clear: both;
}

/* * Prev/Next post links */
.prev-next-navigator {
    /* https://stackoverflow.com/a/2073135/1219634 */
    /* Use overflow:auto; for div blocks containing only floats. */
    overflow: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid #e6e6e6;
    /* border-bottom: 1px solid #e6e6e6; */
    width: 100%;
}

/* * Tables */
td,
th {
    border: medium none;
}

/* * Footnotes */
/* ** Footnote Refs & Definitions */
.footnote-ref a,
a.footnote-return {
    font-family: var(--sans-serif-1);
    color: var(--theme-color);
}
/* ** Footnote Refs */
.footnote-ref {
    font-weight: bold;
}

/* ** Footnote Definitions */
/* Add some vertical space above the footnotes block. */
.footnotes {
    margin-top: 3em;
}

/* https://www.sitepoint.com/accessible-footnotes-css/ */
/* Highlight the footnote that you just jumped to in the footnote section. */
.footnotes :target {
    background: var(--theme-color-light);
}
/* Make the footnote numbers show in superscript, in [N] fashion */
.footnotes li::before {
    font-family: var(--sans-serif-1);
    left: -1.5rem;
    content: '[' counter(li) ']';
    vertical-align: super;
    font-size: 0.8em;
}
/* Links in footnote definitions */
.footnotes a {
    color: var(--theme-color);
}

/* * Lists */
/* ** Post list */
/* Wed Oct 12 12:22:53 EDT 2016 - kmodi
/* Hide bullets and remove left margin padding in the list of blog posts */
ul.no-bullets {
    padding-left: 0;
    list-style-type: none;
}

/* Post titles in li.html */
.li .taxo {
    margin-top: 0;
    margin-bottom: 1.5em;
}
.li .post-title {
    display: inline;
}
.li .post-title a {
    color: var(--theme-color);
}

/* ** Tags/categories buttons */
.taxo {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
/* Taxo buttons in summaries in header tag */
header .taxo {
    margin-top: -0.5em;
}

.taxo li {
    font-family: var(--sans-serif-1);
    font-size: .8em;

    border: none;

    margin-left: 3px;           /* Separation between tags/categories */
    margin-right: 3px;          /* Separation between tags/categories */
    margin-bottom: 1px;         /* Separation between tags/categories rows if they wrap around */
    padding: 1px 5px;

    text-align: center;

    display: inline-block;
}

.taxo .categories li {
    background: var(--grey);
    color: white;
}
.taxo .tags li {
    background: var(--grey-light);
}
/* Show shadow when hovered on */
.taxo li:hover {
    box-shadow: 2px 2px var(--theme-color);
}
/* Special case to handle the taxo buttons specific to a taxo term page.
   For example, below ..li.active rules will apply only to the buttons for
   "emacs" category only on the /categories/emacs/ page.
*/
.taxo li.active {
    background: var(--theme-color);
    color: white;
}
.taxo li.active:hover {
    box-shadow: none;
}

/* Show only tags and categories in summaries, not series. */
.taxo .series {
    display: none;
}

/* *** Buttons on terms pages / Tag Cloud */
.taxo.collection {
    margin-top: 2em;
    text-align: center;
}
.taxo.collection li {
    margin: 5px;
}
/* Font size increments of 0.10rem */
.taxo.collection li.x00 { font-size: 1.00em; padding: 1.0px 05px; }
.taxo.collection li.x01 { font-size: 1.10em; padding: 1.2px 06px; }
.taxo.collection li.x02 { font-size: 1.20em; padding: 1.4px 07px; }
/* Font size increments of 0.15em */
.taxo.collection li.x03 { font-size: 1.35em; padding: 1.6px 08px; }
.taxo.collection li.x04 { font-size: 1.50em; padding: 1.8px 09px; }
.taxo.collection li.x05 { font-size: 1.65em; padding: 2.0px 10px; }
/* Font size increments of 0.20em */
.taxo.collection li.x06 { font-size: 1.85em; padding: 2.2px 11px; }
.taxo.collection li.x07 { font-size: 2.05em; padding: 2.4px 12px; }
.taxo.collection li.x08 { font-size: 2.25em; padding: 2.6px 13px; }
/* Font size increments of 0.25em */
.taxo.collection li.x09 { font-size: 2.50em; padding: 2.8px 14px; }
.taxo.collection li.x10 { font-size: 2.75em; padding: 3.0px 15px; }
.taxo.collection li.x11 { font-size: 3.00em; padding: 3.2px 16px; }
/* Font size increments of 0.30em */
.taxo.collection li.x12 { font-size: 3.30em; padding: 3.4px 17px; }
.taxo.collection li.x13 { font-size: 3.60em; padding: 3.6px 18px; }
.taxo.collection li.x14 { font-size: 3.90em; padding: 3.8px 19px; }
/* Font size increments of 0.35em */
.taxo.collection li.x15 { font-size: 4.25em; padding: 4.0px 20px; }
.taxo.collection li.x16 { font-size: 4.60em; padding: 4.2px 21px; }
.taxo.collection li.x17 { font-size: 4.95em; padding: 4.4px 22px; }
/* Font size increments of 0.40em */
.taxo.collection li.x18 { font-size: 5.35em; padding: 4.6px 23px; }
.taxo.collection li.x19 { font-size: 5.75em; padding: 4.8px 24px; }

/* ** Gray numbers/bullets for lists */
/* Color the list bullets and numbers for ordered lists differently than the */
/* text in the list. */
/* https://stackoverflow.com/a/4288590/1219634 - For the gray number/bullet solution */
/* https://stackoverflow.com/a/23566705/1219634 - For using position:relative and li and */
/*  position:absolute in li::before */
li {
    position: relative;
}
li::before {
    color: gray;
    display: block;
    position: absolute;
    max-width: 0;
    max-height: 0;
    left: -1.25rem;
    top: 0;
}

/* *** Unordered lists */
ul li {
    list-style-type: none;
}
ul li::before {
    font-family: var(--mono);
    content: '○'; /* To get bullets similar to list-style-type: circle; Unicode 0x25cb WHITE CIRCLE */
    /* content: '•'; /\* For a round bullet; Unicode 0x2022 BULLET *\/ */
    /* content: '■'; /\* For a square bullet; Unicode 0x25a0 BLACK SQUARE *\/ */
}

/* Don't put those white circle bullets for these lists */
ul.navbar li::before,
ul.no-bullets li::before {
    content: '';
}

/* *** Checkbox lists */
/* Do not show list bullets for checkbox list items */
ul.task-list li::before{
    content: '';
}
ul.task-list {
    list-style-type: none;
    padding-left: 10px;
}

/* *** Social Icons */
ul.social li::before {           /* No white circle bullets */
    content: '';
}
ul.social {
    /* Somehow a left-only 40px padding was getting added that did not put the
   social icons in center of the page. Forcing the padding to be 0 fixes that. */
    padding: 0;
    margin-bottom: 0.7em;
}
.social li {
    display: inline-block;
    list-style-type: none;
    padding-left: 0.5em;        /* Spacing between icons */
    padding-right: 0.5em;       /* Spacing between icons */
}
.social a:hover {
    color: var(--theme-color);
}

/* *** Ordered/numbered lists */
/* https://jsfiddle.net/uZRGN/ */
ol {
    list-style-type: none;
    counter-reset: li;          /* Initiate a counter */
}
/* Below, ol>li implies that the properties will only apply to li */
/* tags that have ol as direct parents. This is so that it does not */
/* apply to the li elements nested as follows: */
/* <ol>                                                              */
/*     <li> Numbered list item</li>   // Below property applies here */
/*     <ul>                                                          */
/*         <li> Bullet list item</li> // But *not* here!             */
/*     </ul>                                                         */
/* </ol>                                                             */
/* This is because we want the bullet counter to increment only for */
/* the numbered list items. */
ol>li::before {
    counter-increment: li;      /* Increment the counter by 1 */
    /* content: counter(li)'.'; /\* Use the counter as content - for default direction *\/ */
    content: '.'counter(li);       /* Use the counter as content - for rtl direction */
    font-weight: bold;

    /* Solution for the problem when the numbers are 2-digits or more. */
    /* https://www.w3.org/Style/Examples/007/color-bullets.en.html#numbers */
    margin-left: 0.8em;
    direction: rtl;
    /* margin-right: 0.5em;        /\* margin-right does not seem to make any difference *\/ */
    /* width: 2em;                 /\* width does not seem to make any difference *\/ */
    /* text-align: right;          /\* text-align also does not seem to make any difference *\/ */
}

/* * All Terms (tags/categories) */
.all-terms a {
    font-family: var(--sans-serif-1);
    color: var(--theme-color);
}
.all-terms .term {
    font-weight: bold;
}

/* * Mast head */
/* Super small header above the content for site name and short description. */

.masthead {
    font-family: var(--mono); /* Monospace fonts for the masthead */
/*    font-family: var(-serif-2) /* IM Fell English Roman for masthead */
    font-weight: normal;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* ** Title */
/* Set the title color differently based on whether mouse is hovering on it or not */
.masthead-title a {
    color: var(--title-heading-color);
}
.masthead-title a:hover {
    color: var(--theme-color);
}

/* *** Title and cursor font sizes */
.masthead-title {
    font-size: 2em;
    font-weight: bold;
}
.masthead-title .blinking-cursor {
    font-size: 1.1em;
}

/* Reduce whitespace between title and tagline */
.masthead-title {
    margin-bottom: 0;
}

/* ** Tagline */
/* Reduce the font size of the tagline in small tags in the masthead */
.masthead-tagline {
    font-family: var(--serif); /* IM Fell Great Primer  for the tagline */
    margin-top: -0.4em;     /* Reduce whitespace between title and tagline/tagline */
    color: var(--yellowish);
}

@media (max-width: 48em) {
    .masthead {
        text-align: center;
    }
    .masthead-tagline {
        display: none;
    }
}

/* ** Blinking cursor */
/* https://codepen.io/ArtemGordinsky/pen/GnLBq */
.masthead-title .blinking-cursor {
    color: var(--blinking-cursor-color);
    font-family: var(--mono);
    -webkit-animation: 2s blink step-end infinite;
    -moz-animation:    2s blink step-end infinite;
    -ms-animation:     2s blink step-end infinite;
    -o-animation:      2s blink step-end infinite;
    animation:         2s blink step-end infinite;
}

/* 80% duty cycle blink, where the text will stay transparent only for 1/5th of the time */
@keyframes         blink {from, to {color: transparent;} 20% {color: var(--blinking-cursor-color);}}
@-moz-keyframes    blink {from, to {color: transparent;} 20% {color: var(--blinking-cursor-color);}}
@-webkit-keyframes blink {from, to {color: transparent;} 20% {color: var(--blinking-cursor-color);}}
@-ms-keyframes     blink {from, to {color: transparent;} 20% {color: var(--blinking-cursor-color);}}
@-o-keyframes      blink {from, to {color: transparent;} 20% {color: var(--blinking-cursor-color);}}

/* * Post */
.post {
    margin-bottom: 0;
}

/* * Summary */
.summary {
    margin-bottom: 1rem;
}

/* ** Read More */
.readmore {
    font-family: var(--sans-serif-1);
    color: var(--grey-light);

    margin-top: -1rem;         /* Reduce whitespace above the 'Read more' links after summaries */
}
.readmore .more {
    font-weight: bold;
}
.readmore a:hover {
    color: var(--theme-color);
}
/* Accessible 'Read more' links */
/* https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/links/link-text-needs-to-be-uniquely-identifiable-within-the-page/ */
.screen-readers-only {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

/* * Keyboard tags */
kbd {
    padding: 0.15em 0.6em;       /* top/bottom, left/right */
    border: 1px solid #ccc;
    vertical-align: 0.2em;
    font-size: 0.55em;
    font-weight: bold;
    font-family: var(--mono);
    background-color: #f3d3d3;
    color: #333;
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0.1em;
    text-shadow: 0 1px 0 #000;
    line-height: 1.4;
    white-space: nowrap;
}

/* * Image */
figure {
    margin: 0;         /* Remove the default margin of 40px on left and right. */
}
img {
    display: block;
    max-width: 100%;
    margin-left: auto; /* Center align the image by setting left/right margins to auto */
    margin-right: auto;
}

/* ** Captions */
figcaption,
.src-block-caption,
.table-caption {
    /* https://www.w3.org/Style/Examples/007/figures.en.html */
    text-align: center;
    font-size: smaller;
    text-indent: 0;
    margin-top: 0;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

/* * Better link underlines */
a,
a:hover,
a:focus {
    color: inherit;
}
a {
    /* Underline using text-decoration-skip - Make them not overlap text */
    /* https://walterebert.com/blog/using-text-decoration-color-and-text-decoration-skip-with-underlined-links/ */

    /* text-decoration: underline; */
    /* -webkit-text-decoration-color: var(--theme-color); */
    /* text-decoration-color: var(--theme-color); */
    /* -webkit-text-decoration-skip: ink; */
    /* text-decoration-skip: ink; */

    /* Underline using bottom border */
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 0.15em;
    border-bottom-color: var(--theme-color);
    cursor: pointer;
}
.thin a {
    border-bottom-width: 0.15em;
}
a:hover {
    /* Underline using text-decoration-skip - Make them not overlap text */
    /* https://walterebert.com/blog/using-text-decoration-color-and-text-decoration-skip-with-underlined-links/ */

    /* -webkit-text-decoration-color: inherit; */
    /* text-decoration-color: inherit; */

    /* Underline using bottom border */
    border-bottom-color: var(--theme-color-light);
}

/* ** Remove underlines from certain links */
.footnote-ref a,
.footnotes a,
a.no-text-decoration,
.no-text-decoration a {
    text-decoration: none; /* Remove underlines done using text decoration, if any */
    border-bottom: none; /* Remove underlines done using bottom border, if any */
}

/* ** Prev/Next post links */
.prev-post a {
    font-weight: bold;
    margin-right: 0.2rem;
    padding-right: 0.2rem;
}
.next-post a {
    font-weight: bold;
    margin-left: 0.2rem;
    padding-left: 0.2rem;
}
.prev-post a:hover,
.next-post a:hover {
    color: var(--theme-color);
}

/* ** Color the links in Newer/Older text in the paginator */
a.pagination-item {
    color: var(--theme-color);
}

/* * Comments -- Isso */
.comments {
    margin: 2em 0 0.4em -0.02em;
}

.comment {
    font-size: 0.9em;
    font-family: var(--sans-serif-2);
}


/* * Date stamp */
.post-date {
    margin-bottom: 0.3em;
}
/* Date stamps in li.html */
.li .post-date {
    display: inline;
}

/* Date stamp + Syndication below post titles */
.date-syndication {
    /* Center align */
    /* https://stackoverflow.com/a/49305907/1219634 */
    display: flex;
    justify-content: center;
    /* https://css-tricks.com/almanac/properties/a/align-items/ */
    align-items: baseline;
}

.date-syndication {
    /* Center align */
    display: flex;
    justify-content: center;
    /* https://css-tricks.com/almanac/properties/a/align-items/ */
    align-items: baseline;
}

/* Add right padding to the published date stamp to give some space between the
   date and the syndication links. */
.dt-published,
.dt-updated {
    padding-right: 0.5em;
}

/* Twitter Syndication */
.u-syndication.twitter:hover {
    color: #00aced;
}

/* * Code Blocks: pre,.. */
mono, tt, code, pre {
    font-family: var(--mono);
}

code {
    /* Make the monospace code blend in better with the rest of the text */
    padding: 0em 0.1em;
}

/* Remove background color if a 'code' text is in a highlighted footnote or a
   table */
.footnotes :target code,
tr code {
    background-color: inherit;
}

/* Differentiate a hyperlinked 'code' text from non-hyperlinked */
a code {
    background-color: inherit;  /* No background color for hyperlinked <code> */
}

pre {
    display: block;

    font-size: 0.8em;
    line-height: 1.4;

    /* Below padding-top value is adjusted to match the padding in
       the "[data-lang]::before" rule.
       -> 1 + 0.25 + 0.25 + 0.2(extra) */
    padding-top: 1.7em;
    padding-bottom: 1em;
    padding-left: 0;
    padding-right: 0;

    margin-top: 0;
    margin-bottom: 0.4rem;

    border-top: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--theme-color-light);

    color: #433a33;
    background: #fafafa;
    /* https://www.w3schools.com/cssref/pr_text_white-space.asp */
    /* Preserve whitespace. Wrap text only at line breaks. */
    /* So do NOT auto-wrap the code lines. */
    white-space: pre;
    overflow-x: auto;    /* Enable horizontal scroll bars (only for overflowing code) */
}

pre code {
    padding: 0;
    font-size: 100%;
    color: inherit;
    background-color: transparent;
}

pre::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: transparent;
    width: 8px;
    height: 8px
}

pre::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #d3d2d0
}

/* Tue Oct 25 09:24:11 EDT 2016 - kmodi */
/* FIXME Below needs to be baked in correctly */
/* https://css-tricks.com/transitions-only-after-page-load/ */
/* .preload * { */
/*     -webkit-transition: none !important; */
/*     -moz-transition: none !important; */
/*     -o-transition: none !important; */
/*     transition: none !important */
/* } */

/* ** Show code block language on top-right/Language Overlay */
/* Thanks to Regis Philibert on the tip for how to make the lang identifier */
/* stay stuck (and not scroll) on top-right. */
/* https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/#comment-3711468901 */
div.highlight {
    position: relative;
}

/* The Hugo generate HTML will get the below language-* class annotation only
   if "pygmentsUseClasses = true" is set in the site config.toml. In addition
   the pygmentize generated CSS file also needs to be generated;
   see static/css/pygmentize.css.
*/
[data-lang]::before {
    color: var(--theme-color);
    background: var(--theme-color-light);
    /* When changing the below padding, adjust the padding-top in the "pre" rule */
    padding: 0.25em 0.5em;       /* top/bottom left/right */
    position: absolute;
    top: 0px;
    right: 0px;
    /* content: attr(data-lang); */
/* Above is a short hand for the below explicit content specification,
       though you lose the control on letter casing. */
}

pre code.language-C::before                { content: 'C'; }
pre code.language-D::before                { content: 'D'; }
pre code.language-J::before                { content: 'J'; }
pre code.language-R::before                { content: 'R'; }
pre code.language-abc::before              { content: 'ABC'; }
pre code.language-ada::before              { content: 'Ada'; }
pre code.language-ash::before              { content: 'ash'; }
pre code.language-asm::before              { content: 'Assembler'; }
pre code.language-asymptote::before        { content: 'Asymptote'; }
pre code.language-awk::before              { content: 'Awk'; }
pre code.language-bash::before             { content: 'bash'; }
pre code.language-calc::before             { content: 'Emacs Calc'; }
pre code.language-caml::before             { content: 'Caml'; }
pre code.language-clojure::before          { content: 'Clojure'; }
pre code.language-conf::before             { content: 'Conf'; }
pre code.language-coq::before              { content: 'Coq'; }
pre code.language-cpp::before              { content: 'C++'; }
pre code.language-csh::before              { content: 'csh'; }
pre code.language-css::before              { content: 'CSS'; }
pre code.language-dash::before             { content: 'dash'; }
pre code.language-delphi::before           { content: 'Delphi'; }
pre code.language-ditaa::before            { content: 'ditaa'; }
pre code.language-dot::before              { content: 'Graphviz'; }
pre code.language-ebnf2ps::before          { content: 'ebfn2ps'; }
pre code.language-emacs-lisp::before       { content: 'Emacs Lisp'; }
pre code.language-forth::before            { content: 'Forth'; }
pre code.language-fortran::before          { content: 'Fortran'; }
pre code.language-gnuplot::before          { content: 'gnuplot'; }
pre code.language-go::before               { content: 'Go'; }
pre code.language-go-html-template::before { content: 'Go Template'; }
pre code.language-go-text-template::before { content: 'Go Template'; }
pre code.language-groovy::before           { content: 'Groovy'; }
pre code.language-haskell::before          { content: 'Haskell'; }
pre code.language-hledger::before          { content: 'hledger'; }
pre code.language-html::before             { content: 'HTML'; }
pre code.language-idl::before              { content: 'IDL'; }
pre code.language-io::before               { content: 'IO'; }
pre code.language-java::before             { content: 'Java'; }
pre code.language-js::before               { content: 'Javascript'; }
pre code.language-json::before             { content: 'JSON'; }
pre code.language-ksh::before              { content: 'ksh'; }
pre code.language-latex::before            { content: 'LaTeX'; }
pre code.language-ledger::before           { content: 'Ledger'; }
pre code.language-lilypond::before         { content: 'Lilypond'; }
pre code.language-lisp::before             { content: 'Lisp'; }
pre code.language-lua::before              { content: 'Lua'; }
pre code.language-makefile::before         { content: 'Makefile'; }
pre code.language-matlab::before           { content: 'MATLAB'; }
pre code.language-maxima::before           { content: 'Maxima'; }
pre code.language-mercury::before          { content: 'Mercury'; }
pre code.language-metapost::before         { content: 'MetaPost'; }
pre code.language-mksh::before             { content: 'mksh'; }
pre code.language-modula-2::before         { content: 'Modula-2'; }
pre code.language-mscgen::before           { content: 'Mscgen'; }
pre code.language-nxml::before             { content: 'XML'; }
pre code.language-nim::before              { content: 'Nim'; }
pre code.language-ocaml::before            { content: 'Objective Caml'; }
pre code.language-octave::before           { content: 'Octave'; }
pre code.language-org::before              { content: 'Org'; }
pre code.language-oz::before               { content: 'OZ'; }
pre code.language-pascal::before           { content: 'Pascal'; }
pre code.language-perl::before             { content: 'Perl'; }
pre code.language-picolisp::before         { content: 'Pico Lisp'; }
pre code.language-plain-tex::before        { content: 'Plain TeX'; }
pre code.language-plantuml::before         { content: 'PlantUML'; }
pre code.language-posh::before             { content: 'posh'; }
pre code.language-processing::before       { content: 'Processing.js'; }
pre code.language-prolog::before           { content: 'Prolog'; }
pre code.language-ps::before               { content: 'PostScript'; }
pre code.language-python::before           { content: 'Python'; }
pre code.language-ruby::before             { content: 'Ruby'; }
pre code.language-sass::before             { content: 'Sass'; }
pre code.language-scala::before            { content: 'Scala'; }
pre code.language-scheme::before           { content: 'Scheme'; }
pre code.language-screen::before           { content: 'Gnu Screen'; }
pre code.language-sed::before              { content: 'Sed'; }
pre code.language-sh::before               { content: 'bash'; }
pre code.language-shell::before            { content: 'Shell'; }
pre code.language-simula::before           { content: 'Simula'; }
pre code.language-sql::before              { content: 'SQL'; }
pre code.language-sqlite::before           { content: 'SQLite'; }
pre code.language-systemverilog::before    { content: 'SystemVerilog'; }
pre code.language-tcl::before              { content: 'tcl'; }
pre code.language-tcsh::before             { content: 'tcsh'; }
pre code.language-tex::before              { content: 'TeX'; }
pre code.language-verilog::before          { content: 'Verilog'; }
pre code.language-vhdl::before             { content: 'VHDL'; }
pre code.language-xml::before              { content: 'XML'; }

/* * Navigation Bar */
.nav-collapse.disable-pointer-events {
    pointer-events: none !important;
}

.nav-collapse {
    z-index: 1;
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-size: 1em;
    transition: max-height 250ms;
    position: relative;
}

.nav-collapse,
.nav-collapse * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.nav-collapse,
.nav-collapse ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    float: left
}

@media screen and (min-width:46.25em) {
    .nav-collapse,
    .nav-collapse ul {
        text-align: center
    }
}

.nav-collapse li {
    float: left;
    width: 100%;
    display: block
}

@media screen and (min-width:46.25em) {
    .nav-collapse li {
        float: none;
        display: inline-block;
        *display: block;
        *float: left;
        width: auto;
    }
}

/* For the tabs other than the selected tab */
/* These will apply only for small screens */
.nav-collapse a {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 112.5%;
    letter-spacing: 2px;
    color: #e7e5e3;  
    background: var(--theme-color);
    width: 100%;
    border-bottom: 1px solid white;
    padding: .5em 1em;
    float: left
}

/* For the tab being clicked */
/* These will apply only for small screens */
.nav-collapse a:focus {
    color: white;
    background: var(--theme-color);
    opacity: 0.9;
    outline: none
}

/* For the selected tab */
/* These will apply only for small screens */
.nav-collapse a.active {
    -webkit-font-smoothing: subpixel-antialiased;
    color: white;
    background: var(--theme-color);
    font-weight: bold;
}

/* Below will apply to any screen larger than specified below */
@media screen and (min-width:46.25em) {
    /* For all tabs by default */
    .nav-collapse a {
        _float: none;
        -webkit-font-smoothing: antialiased;
        margin: 0;
        padding: 1.2em 1em .5em; /* top, right/left, bottom */
        font-size: 1.1em;
        background: transparent;
        color: #a0a0a0; 
        border: 0;
        -webkit-transition: background .5s ease;
        -moz-transition: background .5s ease;
        -o-transition: background .5s ease;
        transition: background .5s ease
    }
    /* When hovering over an unselected navigation tab */
    .nav-collapse a:hover,
    .nav-collapse a:focus {
	/*   background: #e7e5e3; */
	 background: var(--grey);
    }
    /* When hovering over an already selected navigation tab */
    .nav-collapse a.active:hover,
    .nav-collapse a.active:focus {
        background: var(--theme-color);
        opacity: 0.9;
    }

    /* For the selected tab */
    .nav-collapse a.active {
        -webkit-font-smoothing: subpixel-antialiased;
        font-weight: normal;
        color: white;
        background: var(--theme-color);
    }
}

.js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden
}

@media screen and (min-width:46.25em) {
    .js .nav-collapse {
        position: relative !important;
        max-height: none
    }
}

.nav-collapse.opened {
    max-height: 9999px;
}

/* ** Hamburger Menu only for small screens */
.nav-toggle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 70px;
    height: 55px;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background: var(--theme-color) url("/images/hamburger.gif") no-repeat 50% 33%
}

@media screen and (-webkit-min-device-pixel-ratio:1.3), screen and (min--moz-device-pixel-ratio:1.3), screen and (-o-min-device-pixel-ratio:2 / 1), screen and (min-device-pixel-ratio:1.3), screen and (min-resolution:192dpi), screen and (min-resolution:2dppx) {
    .nav-toggle {
        background-image: url("/images/hamburger-retina.gif");
        -webkit-background-size: 100px 100px !important;
        -moz-background-size: 100px 100px !important;
        -o-background-size: 100px 100px !important;
        background-size: 100px 100px !important
    }
}

@media screen and (min-width:46.25em) {
    .nav-toggle {
        display: none
    }
}

/* * Color border at the top of the page */
.border {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: .5rem;
    background: var(--theme-color);
}

/* Highlighted bookmarks */
.highlight-this {
    color: red;
}

/* * Table of Contents on side */
.toc {
    font-family: var(--sans-serif-1);
    display: none;
    position: fixed;
    left: 50%;
    top: 110px;
    width: 260px;
    margin-left: 400px;
    overflow-y: auto;
    max-height: 85%;
    padding: 0;
}
.toc li {
    list-style: none;
}
.toc ul>li {
    margin-bottom: 0.4rem;
}
.toc ul>li>ul>li {
    font-size: 0.9em;
    margin-bottom: 0.4rem;
}
.toc ul>li>ul>li>ul>li {
    font-size: 0.9em;
    margin-bottom: 0.3rem;
}
.toc ul {              /* Add left padding for headings in TOC */
    padding-left: 1rem;
}
.toc nav>ul {           /* The highest level heading in a blog post is level-2 */
    padding-left: 0;    /* The level-1 heading is reserved for the blog title. */
    /* So do not add any padding for level-1 heading, as that will never show*/
    /* up in the TOC. */
}
.toc a:hover {
    color: var(--theme-color);
}
.toc a.current {
    color: var(--theme-color);
    font-weight: bold;
}
/* Override the bullets customization done above, just for list items*/
/* in .toc class */
.toc ul:not(.navbar):not(.no-bullets) li::before {
    content: '';
}
.toc .back-to-top {             /* Back to top link */
    font-size: 0.8em;
    padding-left: 1rem;
}

@media screen and (min-width: 1400px) {
    .toc {
        display: block;
    }
}

/* * TeX, LaTeX, XeTeX rendering */
/*   - https://stackoverflow.com/a/8160532/1219634 */
/*   - http://tess.oconnor.cx/2007/08/tex-poshlet */
/*   - https://hroy.eu/tips/TeX/htmlAndCss] */
.tex, .latex, .tex sub, .latex sub, .xetex sub {
    font-size: 1em;
}

.tex sub, .latex sub, .latex sup, .xetex sub {
    text-transform: uppercase;
}

.tex sub, .latex sub, .xetex sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

/* * Series */
div.series {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid var(--grey-light);
    border-radius: 6px;
    font-size: 0.8em;
}
.series .active {
    background-color: #e5e5e5;
}
.series tbody tr td {
    background: inherit;
}
.series table,
.series td {
    border: none;
}
/* Don't wrap dates in series tables */
.series .date {
    white-space: nowrap;
}

/* * Footer */
footer .social,
.generated,
.badges {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}
.generated {
    font-size: 0.7em;
}
.generated a {
    font-weight: bold;
}

/* * Note */
.note {
    background: var(--theme-color-light);
    padding: 10px;
    /* As we are removing margin from .note p (see the following
       CSS rule), we need to ensure that there is some whitespace
       following a .note block. */
    margin-bottom: 1rem;
}
.note p {
    margin: 0;
}

/* * No Wrap */
.nobr {
    white-space: nowrap;
}

/* * microformats2 h-card */
.hide,
.h-card {
    display: none;
}

/* * Like and Retweet icons */
.like a .icon {
    color: red;
}
.retweet a .icon {
    color: #19cf86;             /* Twitter retweet color */
}
.tweet .icon {
    color: #00aced;
}
.like .count,
.retweet .count {
    font-family: var(--sans-serif-1);
}
.like,
.retweet {
    padding-right: 0.5em;
}

.send-mention p,
.comment p,
.comment dd,
.comment dt,
.mention dd,
.mention dt,
.syndication-comment p {
    font-size: 0.9em;
}

/* Send Webmention button */
.send-mention input[type=url] {
    width: 60%;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border: 1px solid var(--theme-color);
    padding: 8px 10px;
    font-size: 1em;
}
.send-mention input[type=submit] {
    width: 35%;
    background-color: var(--theme-color);
    color: white;
    border: none;
    padding: 8px 20px;
    font-size: 1.1em;
    cursor: pointer;
}
.send-mention input[type=url],
.send-mention input[type=submit] {
    font-family: var(--sans-serif-2); 
    margin-bottom: 1em;
    border-radius: 3px;
}
@media screen and (max-width: 600px) {
    .send-mention form {
        text-align: center;
    }
    .send-mention input[type=url],
    .send-mention input[type=submit] {
        width: 90%;
    }
}

/* commentpara Comment Button */
.comment .instructions {
    font-family: var(--sans-serif-2);
    width: 61%;
    margin-right: 1em;
}
.comment .instructions p {
    margin-bottom: 0.5em;
}
.comment .instructions small,
.comment .instructions small i,
.comment .instructions small em {
    font-size: 0.7em;
}
.comment input[type=submit] {
    font-family: var(--sans-serif-2);
    font-size: 1.1em;
    width: 35%;
    background-color: var(--theme-color);
    border: none;
    color: white;
    padding: 8px;               /* top/bottom */
    margin-top: 2em;
    margin-bottom: 1em;
    border-radius: 3px;
    cursor: pointer;
}
.comment {
    margin-bottom: 1em;
}
@media screen and (max-width: 600px) {
    .comment .instructions {
        width: 100%;
    }
    .comment form {
        text-align: center;
    }
    .comment input[type=submit] {
        width: 90%;
        margin-top: 1em;
    }
}

.send-mention input[type=submit]:hover,
.comment input[type=submit]:hover {
    opacity: 0.75;
}
.send-mention input[type=submit]:active,
.comment input[type=submit]:active {
    transform: translateY(2px);
}

/* Microformats2 replies */
/* This mf2 reply block is inserted using this Org macro:
   #+macro: reply @@html:<div class="reply">In reply to: <p><a class="u-in-reply-to h-cite" rel="in-reply-to" href="$1">$1</a></p></div>@@
*/
.reply {
    padding-top: 0.5em;
    padding-left: 1em;
    border-top: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--theme-color);
    margin: 1em 0;              /* top/bottom */
    background-color: #f5f5f5;
    font-family: var(--sans-serif-1);
}
.reply p {
    text-indent: 3em;
}
.reply p a {
    text-indent: 3em;
    font-style: italic;
    font-weight: bold;
    text-decoration: none; /* Remove underlines done using text decoration, if any */
    border-bottom: none; /* Remove underlines done using bottom border, if any */
}

/* Fragmentioner - https://github.com/kartikprabhu/fragmentioner */
#fragmentioner-ui {
/*    font-family: var(--sans-serif-2); */
    font-family: var(--mono); 
    position:absolute;
    top:-100%;
    background: #111;
    padding:0.25em;
}

#fragmentioner-ui a {
    color:#fafafa;
}
#fragmentioner-ui a:hover {
    color: inherit;
}

/* Highlight for fragmentions */
[fragmention] {
    background: rgba(136, 136, 136, 0.3);
}

/* Search */
.search h1 {
    margin-bottom: 1em;
}
.search h1,
.search form,
.search .no-results {
    text-align: center;
}
.search input[id=search-query] {
    width: 60%;
    border: 1px solid var(--theme-color);
    padding: 8px 10px;
    font-size: 2em;
    font-family: var(--sans-serif-1);
    margin-bottom: 1em;
    border-radius: 3px;
}

/* Draft */
.draft {
    color: white;
    background-color: red;
    font-family: var(--sans-serif-1);
    font-weight: bold;
    font-size: 2em;
    padding: 0 0.5em;
    margin-bottom: 0.5em;
}

/* * Badges */
.badges img {
    display: inline;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
.badges .pixelated {
    image-rendering: pixelated;
}

/* * Small Caps */
.small-caps {
    font-variant: small-caps;
}

/* * Display Inline */
.inline {
    display: inline;
}

/* * RSS/ATOM feed buttons */
.feed {
    font-family: var(--sans-serif-1);
    font-size: 0.8em;
    font-weight: bold;
    transform: scaleX(0.9); /* Make the fonts slightly narrow than the default --sans-serif-1 */

    margin: 0;
    margin-top: 0.5rem;
}
.feed li {
    background: var(--grey-light);
    color: white;

    border: none;
    /* border-radius: 3px; */

    padding: 0.1em 0.4em;       /* top/bottom, left/right */

    margin-left: 0.4rem;
    margin-right: 0;
}
.feed li:hover {
    background: #f26522;        /* Standard RSS color */
}
/* No need to show the Feed icons on small screen, assuming smartphones. */
@media screen and (max-width: 600px) {
    .feed {
        display: none;
    }
}

/* em vs rem: https://j.eremy.net/confused-about-rem-and-em/

> While em is relative to the font-size of its direct or nearest parent,
> rem (root em) is only relative to the html (root) font-size.

The author uses em for nearly everything, rem occasionally for padding or
margins, but only in a pinch, and px some times for borders.
*/

/* Local Variables: */
/* eval: (when (fboundp 'rainbow-mode) (rainbow-mode 1)) */
/* eval: (outline-minor-mode 1) */
/* eval: (auto-complete-mode -1) */
/* End: */