/* ==========================================================================
   Einheitsgrafik Theme for blog.yiningkarlli.com
   Jekyll Version
   by Yining Karl Li

   Lineage:
   The Jekyll version of Einheitsgrafik is an extensively reworked version
   of my blog's older codeandvisuals Jekyll theme, which was ported from a
   previous Ghost version of codeandvisuals, which was a heavily modified
   version of N-Coded, which was a fork of Casper.
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*
   0.   Includes
   1.   General
   2.   Something else
 */

/* ==========================================================================
   0. Includes - Ground zero
   ========================================================================== */

@import url(normalize.css?v=147.0.0);


/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */

/* Import the font file with the icons in it */
@font-face {
    font-family: 'icons';
    src: url('/includes/fonts/icons.eot');
    src: url('/includes/fonts/icons.eot?#iefix') format('embedded-opentype'),
        url('/includes/fonts/icons.woff') format('woff'),
        url('/includes/fonts/icons.ttf') format('truetype'),
        url('/includes/fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'berkeley-mono';
    src: url('https://www.yiningkarlli.com/includes/fonts/BerkeleyMono-Regular.woff2') format('woff2');
}

/* Stuff for the back arrow for footnote backlinks: */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('/includes/fonts/material_return_arrow.woff2') format('woff2'), ;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 0.4;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* transform: scale(-1, 1); */
    vertical-align: middle;
}

/* Apply these base styles to all icons */
.icon-ghost,
.icon-feed,
.icon-twitter,
.icon-google-plus,
.icon-facebook {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}

/* Each icon is created by inserting the corret character into the 
   content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
    content: "\e000";
}

.icon-feed:before {
    content: "\e001";
}

.icon-twitter:before {
    content: "\e002";
    font-size: 1.1em;
}

.icon-google-plus:before {
    content: "\e003";
}

.icon-facebook:before {
    content: "\e004";
}


/* ==========================================================================
   1. General - Setting up some base styles
   ========================================================================== */

html {
    height: 100%;
    max-height: 100%;
    /* font-size: 62.5%; */
}

body {
    height: 100%;
    max-height: 100%;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.35em;
    color: #555555;
    display: flex;
    flex-direction: column;
}

::-moz-selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

::selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-rendering: optimizeLegibility;
    line-height: 1.3;
    margin-top: 0;
}

h1 {
    font-size: 1.875rem;
    /*line-height: 0.75em;*/
    font-weight: 900;
    font-family: 'futura-pt', sans-serif;
}

h2 {
    font-size: 1.35rem;
    /*line-height: 0.75em;*/
    font-weight: 400;
    font-family: 'futura-pt', sans-serif;
}

h3 {
    font-size: 1.15rem;
    font-weight: 400;
}

h4 {
    font-size: 0.875rem;
    font-weight: 400;
}

h5 {
    font-size: 0.75rem;
    font-weight: 400;
}

h6 {
    font-size: 0.6875rem;
    font-weight: 400;
}

a {
    color: red;
    text-decoration: none;
}

a:link {
    color: red;
    text-decoration: none;
}

a:visited {
    color: red;
    text-decoration: none;
}

a:hover {
    color: grey;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

a:active {
    text-decoration: none;
    color: grey;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #4183C4;
    /*color: #FF0000;*/
}


p,
ul,
ol {
    margin: 1.2em 0;
}

ol ol,
ul ul,
ul ol,
ol ul {
    margin: 0.4em 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #efefef;
    margin: 3.2em 0;
    padding: 0;
}

blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    padding: 0 0 0 1.6em;
    border-left: #888 0.2em solid;
    color: #555555;
    font-family: "proxima-nova", sans-serif;
    font-style: italic;
}

blockquote p {
    margin: 0.8em 0;
    font-style: italic;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    ;
    font-size: 0.9em;
    color: #ccc;
}

blockquote small:before {
    content: '\2014 \00A0';
}

blockquote cite {
    font-weight: bold;
}

blockquote cite a {
    font-weight: normal;
}


dl {
    margin: 1.6em 0;
}

dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 1em
}

dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}

mark {
    background-color: #ffc336;
}

code,
tt {
    padding: 1px 3px;
    font-family: berkeley-mono, monospace, sans-serif;
    font-size: 0.85em;
    /* white-space: pre; */
    border: 1px solid #E3EDF3;
    background: #F7FAFB;
    border-radius: 2px;
}

pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    border: 1px solid #E3EDF3;
    width: 100%;
    padding: 10px;
    font-family: berkeley-mono, monospace, sans-serif;
    font-size: 0.9em;
    white-space: pre;
    overflow: auto;
    background: #F7FAFB;
    border-radius: 3px;
}

pre code,
tt {
    font-size: inherit;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}

span.code-line::before {
    content: counter(code-line);
    display: inline-block;
    color: rgb(150, 150, 150);
    text-align: right;
    width: 2em;
    padding-right: 0.5em;
    border-right: 1px solid rgb(150, 150, 150);
    margin-right: 1em;
}

span.code-line {
    counter-increment: code-line;
}

kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #ccc 1px solid;
    color: #666;
    text-shadow: #fff 0 1px 0;
    font-size: 0.9em;
    font-weight: bold;
    background: #f4f4f4;
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 0 #fff inset;
}

table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #efefef;
}

table th {
    color: #666;
}

table caption+thead tr:first-child th,
table caption+thead tr:first-child td,
table colgroup+thead tr:first-child th,
table colgroup+thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody+tbody {
    border-top: 2px solid #efefef;
}

table table table {
    background-color: #fff;
}

table tbody>tr:nth-child(odd)>td,
table tbody>tr:nth-child(odd)>th {
    background-color: #f6f6f6;
}

table.plain {

    tbody>tr:nth-child(odd)>td,
    tbody>tr:nth-child(odd)>th {
        background: transparent;
    }
}


/* ==========================================================================
   1. Utilities - These things get used a lot
   ========================================================================== */

/* Hides stuff */
.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {

    position: relative;
    width: 80%;
    max-width: 900px;
    min-width: 480px;
    margin: 0 auto;
}

/* Centres vertically yo. (IE8+) */
.vertical {
    display: table-cell;
    vertical-align: middle;
}


/* ==========================================================================
   1. General
   ========================================================================== */

video {
    position: relative;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

video::-webkit-media-controls {
    opacity: 0;
}

.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-square {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container-square iframe,
.embed-container-square object,
.embed-container-square embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-cinema {
    position: relative;
    padding-bottom: 41.875%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container-cinema iframe,
.embed-container-cinema object,
.embed-container-cinema embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-tall {
    position: relative;
    padding-bottom: 75.6%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container-tall iframe,
.embed-container-tall object,
.embed-container-tall embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.navbar-padding {
    height: 0;
}

/* Big cover image on the home page */
#site-head {
    position: relative;
    display: table;
    width: 100%;
    /*height: 60%;*/
    margin-bottom: 6rem;
    /*text-align: center;*/
    color: #333;
    z-index: 800;
    /*background: #303538 no-repeat center center;
    background-size: cover;*/
}

a.nav {
    color: white;
}

a.nav:link {
    color: white;
}

a.nav:visited {
    color: white;
}

a.nav:hover {
    color: red;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

a.nav:active {
    color: red;
}

/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
#blog-logo img {
    display: inline;
    max-height: 2.2rem;
    width: auto;
    margin-right: 1rem;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#back {
    color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 8px;
    left: 8px;
    padding: 6px;
    font-size: 16px;
}

/* For handling custom image captions generated from figures.js*/
.figcaption {
    color: #555555;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    display: block;
    margin: 5px auto;
    font-size: 0.9rem;
}

.figcaption span {
    display: inline-block;
    /* Set this element to inline-block */
    text-align: left;
    /* Set text align to left */
}

.figcaption a:link {
    color: red;
}

.figcaption a:hover {
    color: grey;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.figcaption a:visited {
    color: red;
}

.figcaption a:active {
    color: grey;
}

.codecaption {
    color: #555555;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    display: block;
    margin: 5px auto;
    font-size: 0.9rem;
    margin-top: -1em;
}

.codecaption span {
    display: inline-block;
    /* Set this element to inline-block */
    text-align: left;
    /* Set text align to left */
}

.codecaption a:link {
    color: red;
}

.codecaption a:hover {
    color: grey;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.codecaption a:visited {
    color: red;
}

.codecaption a:active {
    color: grey;
}

main.content {
    margin-top: -8.75em;
    flex: 1;
    margin-bottom: 4em;
}

/* The details of your blog. Defined in ghost/settings/ */
.blog-title {
    font: 60px "futura-pt";
    position: absolute;
    top: 1px;
    display: inline;
    font-weight: 500;
    text-transform: uppercase;
    z-index: 1100;
}

.blog-author {
    font: 30px "futura-pt";
    position: absolute;
    top: 60px;
    left: 95px;
    font-size: 30px;
    display: inline;
    font-weight: 500;
    text-transform: uppercase;
    z-index: 1100;
}

.blog-nav {
    font: 20px "futura-pt";
    font-weight: 300;
    text-align: right;
    right: 0px;
    top: 69px;
    position: absolute;
}

.blog-title-wrap {
    margin-left: -4px;
    color: white;
    background-color: #3d3d3d;
    height: 110px;
    opacity: .9;
    /*border-bottom: 1px solid #E5E5E5;*/
}

.blog-title-inner {
    position: relative;
    width: 80%;
    max-width: 900px;
    min-width: 480px;
    margin: 0 auto;
}

.blog-description {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.5em;
    letter-spacing: 0;
}

.blog-description-wrap {
    padding: 0em 0;
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
    position: relative;
    width: 80%;
    max-width: 900px;
    margin: 4rem auto;
    padding-bottom: 2rem;
    word-break: break-word;
    hyphens: auto;
}

.nav-rss {
    font-family: 'icons';
    font-size: 18px;
    padding-left: 5px;
    vertical-align: 1px;
}

.nav-rss:before {
    content: "\e001";
}

.nav-rss-footer {
    font-family: 'icons';
    font-size: 14px;
    padding-left: 3px;
}

.nav-rss-footer:before {
    content: "\e001";
}

.post-title {
    color: #4b4b4b;
    font: 28px "futura-pt";
    margin: 0 0 0rem 0;
    min-width: 300px;
}

.post-excerpt p {
    margin: 0rem 0 0 0;
    font-size: 0.9em;
    line-height: 1.6em;
}

.post-meta {
    display: inline-block;
    margin: 0 0 0px 0;
    font-size: 0.8rem;
    color: #999999;
    line-height: 1.0rem;
}

.post-meta a {
    color: #999999;
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}

.user-image {
    position: absolute;
    top: 0;
    left: 0;
}

.user-name {
    display: block;
    font-weight: bold;
}

.user-bio {
    display: block;
    max-width: 440px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}

.publish-heading {
    display: block;
    font-weight: bold;
}

.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}

div.projecttextrow {
    margin-top: 15px;
    float: left;
}

div.projecttextleftbar {
    float: left;
    text-align: left;
    width: 48%;
    margin-top: -15px;
}

div.projecttextrightbar {
    float: right;
    width: 48%;
    text-align: left;
    margin-top: -15px;
}

.tableofcontents {
    padding-top: 5px;
    float: left;
    padding-bottom: 5px;
    margin-bottom: 25px;
    width: 100%;
}

.tableofcontents-column3 {
    float: left;
    width: 33.33%;
}

.tableofcontents-column2 {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.tableofcontents-row:after {
    content: "";
    display: table;
    clear: both;
}

.tableofcontents-content {

    max-width: fit-content;
    text-align: left;
    float: center;
    margin-right: auto;
    margin-left: auto;
}

/* Sidebar Table of Contents - only on wide screens */
.sidebar-toc {
    display: none;
    /* Hidden by default and on narrow screens */
    font-family: 'futura-pt', sans-serif;
}

@media only screen and (min-width: 1400px) {

    /* Hide inline TOC when sidebar is visible */
    .has-sidebar-toc .tableofcontents {
        display: none;
    }

    /* Hide the "Table of Contents" heading that precedes the inline TOC */
    .has-sidebar-toc h2:has(+ .tableofcontents) {
        display: none;
    }

    /* Show sidebar only when manual TOC exists */
    .has-sidebar-toc .sidebar-toc {
        display: block;
        position: fixed;
        right: calc((100vw - 900px) / 2 - 255px);
        /* Position to right of content */
        top: 50%;
        /* Vertically center */
        transform: translateY(-50%);
        /* Offset by half height to center */
        width: 200px;
        max-width: 200px;
        max-height: calc(100vh - 260px);
        /* Viewport minus 2x banner height (130px * 2) */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 15px 15px 5px 15px;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Scroll indicator - gradient fade at top */
    .has-sidebar-toc .sidebar-toc::before {
        content: '';
        position: sticky;
        top: -20px;
        left: -15px;
        right: -15px;
        height: 70px;
        background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
        pointer-events: none;
        display: block;
        margin-bottom: -70px;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .has-sidebar-toc .sidebar-toc.show-top-fade::before {
        opacity: 1;
    }

    /* Scroll indicator - gradient fade at bottom */
    .has-sidebar-toc .sidebar-toc::after {
        content: '';
        position: sticky;
        bottom: -5px;
        left: 0;
        right: 0;
        height: 50px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        pointer-events: none;
        display: block;
        margin-top: -50px;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .has-sidebar-toc .sidebar-toc.show-bottom-fade::after {
        opacity: 1;
    }

    .sidebar-toc h3 {
        margin-top: 0;
        margin-bottom: 1em;
        font-size: 1.15rem;
        font-weight: 400;
        color: #888;
    }

    .sidebar-toc ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidebar-toc li {
        margin: 8px 0;
    }

    .sidebar-toc a {
        color: #888;
        text-decoration: none;
        display: block;
        transition: color 0.2s ease;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding-left: 1.5em;
        text-indent: -1.2em;
    }

    .sidebar-toc a:hover {
        color: #000;
    }

    .sidebar-toc a.active {
        color: red;
        font-weight: normal;
    }

    /* Indent nested sections */
    .sidebar-toc ul ul {
        padding-left: 10px;
        margin-top: 5px;
    }

    /* Visual separator */
    .sidebar-toc {
        border-left: 3px solid rgba(128, 128, 128, 0.2);
        padding-left: 17px;
    }

    /* Homepage TOC specific styles */
    .homepage-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .homepage-toc-post {
        margin: 15px 0;
        overflow: hidden;
    }

    .post-title-link {
        color: #999;
        text-decoration: none;
        font-weight: 400;
        font-family: 'futura-pt', sans-serif;
        transition: color 0.2s ease;
        /* Truncate to 2 lines with ellipsis */
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        max-width: 100%;
    }

    .sidebar-toc .post-title-link:hover {
        color: red;
    }

    .post-title-link.active-post {
        color: red;
        font-weight: normal;
        /* Show full title for active post */
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
    }

    .post-toc-list {
        list-style: none;
        margin: 8px 0 0 0;
        padding: 0;
    }

    .post-toc-list li {
        margin: 6px 0;
    }

    .post-toc-list a {
        color: #999;
        text-decoration: none;
        display: block;
        transition: color 0.2s ease;
        padding-left: 1.5em;
        text-indent: -1.2em;
        font-size: 0.95em;
    }

    .post-toc-list a:hover {
        color: #000;
    }

    .post-toc-list a.active {
        color: red;
        font-weight: normal;
    }

    .sidebar-pagination {
        margin-top: 5px;
        padding-top: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .sidebar-pagination-link {
        color: #999;
        text-decoration: none;
        font-size: 0.9em;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .sidebar-pagination-link:hover {
        color: #000;
    }
}

/* ==========================================================================
   1. Single Post - When you click on an individual post
   ========================================================================== */

/* Tweak the .post wrapper style */
.post-template .post {
    /*margin-top: 0;*/
    border-bottom: none;
    padding-bottom: 0;
}

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
    display: none;
}

/* Insert some mad padding up in the header for better spacing */
.post-template .post-header {
    padding: 60px 0;
}

.post-content {
    padding-top: 0.4em;
}

/* Keep large images within the bounds of the post-width */
.post-content img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 2rem 0 0 0;
    padding: 4rem 0 0 0;
    border-top: #EEEEEE 1px solid;
}

.post-footer h4 {
    font-size: 1.8rem;
    margin: 0;
}

.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.6em;
}

/* Create some space to the right for the share links */
.post-footer .author {
    margin-right: 180px;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 4rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1.4rem 1.6rem 1.6rem 0;
    color: #DDDDDD;
}

.post-footer .share a:hover {
    color: #50585D;
    text-decoration: none;
}

.archive {
    /*    max-width: 450px;
    margin-left: 25%;*/
}

.archive li {
    list-style-type: none;
}

.archive time {
    display: inline-block;
    margin: 0 0 5px 0;
    font-size: 0.815rem;
    color: #999999;
}

.archive time:before {
    content: "|";
    margin-left: .5em;
    margin-right: .5em;
}

/* ==========================================================================
   1. Pagination
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 4rem auto;
    font-size: 1rem;
    color: #888888;
    text-align: center;
}

.pagination a {
    color: #888888;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    text-decoration: none;
    transition: border ease 0.3s;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    color: #ff0000;
}


/* ==========================================================================
   1. Footer - The bottom of every page
   ========================================================================== */

.site-footer {
    font-family: 'futura-pt', sans-serif;
    position: relative;
    margin: -2.5em auto 0 auto;
    padding: 30px 0;
    font-size: 17px;
    line-height: 20px;
    color: #888888;
    display: flex;
    justify-content: space-between;
    width: 80%;
    max-width: 900px;
}

.site-footer a {
    color: #888888;
}

.site-footer a:hover {
    color: #FF0000;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

.copyright {
    text-transform: uppercase;
}

/* The subscribe icon on the footer */
.subscribe {
    width: 28px;
    height: 28px;
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -15px;
    border: #EEEEEE 1px solid;
    text-align: center;
    line-height: 2.4rem;
    border-radius: 50px;
    background: #fff;
    transition: box-shadow 0.5s;
}

/* The RSS icon, inserted via icon font */
.subscribe:before {
    color: #DDDDDD;
    font-size: 10px;
    position: absolute;
    top: 2px;
    left: 9px;
    font-weight: bold;
    transition: color 0.5s ease;
}

/* Add a box shadow to on hover */
.subscribe:hover {
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 3px;
    transition: box-shadow 0.25s;
}

.subscribe:hover:before {
    color: #50585D;
}

/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip {
    opacity: 0;
    display: inline-block;
    padding: 4px 8px 5px 8px;
    position: absolute;
    top: -23px;
    left: -23px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    background: #50585D;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, top 0.3s ease;
}

/* The little chiclet arrow under the tooltip, pointing down */
.tooltip:after {
    content: "";
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #50585D transparent;
    display: block;
    position: absolute;
    bottom: -4px;
    left: 50%;
    margin-left: -5px;
    z-index: 220;
    width: 0;
}

/* On hover, show the tooltip! */
.subscribe:hover .tooltip {
    opacity: 1;
    top: -33px;
}

/* ==========================================================================
   1. Gist embed styling
   ========================================================================== */

.gist {
    margin: 2rem auto;
}

.gist table {
    font-size: 1.4rem;
    margin: 0;
}

.gist .line-number {
    font-size: 1rem;
    width: 10px;
}

/* ==========================================================================
   1. Media Queries - Smaller than 800px
   ========================================================================== */

@media only screen and (max-width: 800px) {

    div.projecttextleftbar {
        float:left;
        text-align: left ;
        width:100%;
    }

    div.projecttextrightbar {
        float:left;
        width:100%;
        text-align: left ;
        margin-top:-15px;
    }
    .navbar-padding {
        height: 0;
    }

    /* Big cover image on the home page */
    #site-head {
        position: relative;
        display: table;
        width: 100%;
        /*height: 60%;*/
        margin-bottom: 6rem;
        color: #333;
        z-index: 800;
    }

    .blog-title-wrap {
        margin-left: -4px;
        color: white;
        background-color: #3d3d3d;
        height: 87px;
        opacity: .9;
    }

    .blog-title {
        position: absolute;
        top: 1px;
        font-size: 50px;
        display: inline;
        font-weight: 500;
        text-transform: uppercase;
        z-index: 1100;
    }

    .blog-author {
        position: absolute;
        top: 48px;
        left: 78px;
        font-size: 25px;
        display: inline;
        font-weight: 500;
        text-transform: uppercase;
        z-index: 1100;
    }

    .blog-nav {
        font-size: 16px;
        font-weight: 300;
        text-align: right;
        right: 0px;
        top: 57px;
        position: absolute;
    }

    .tableofcontents-column2 {
        float: left;
        width: 100%;
    }

    .tableofcontents-column3 {
        float: left;
        width: 100%;
    }

    .tableofcontents-content {
        text-align: left;
        float: center;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    div.projecttextleftbar {
        float: left;
        text-align: left;
        width: 100%;
    }

    div.projecttextrightbar {
        float: left;
        width: 100%;
        text-align: left;
        margin-top: -15px;
    }
}

/* ==========================================================================
   1. Media Queries - Smaller than 600px
   ========================================================================== */

@media only screen and (max-width: 600px) {

    .navbar-padding {
        height: 0;
    }

    /* Big cover image on the home page */
    #site-head {
        position: relative;
        display: table;
        width: 100%;
        margin-bottom: 6rem;
        color: #333;
        z-index: 800;
    }

    .blog-title-inner {

        position: relative;
        width: 50%;
        max-width: 900px;
        min-width: 300px;
        margin: auto;
        left: 1.1%;
    }

    .blog-title-wrap {
        width: auto;
        color: white;
        background-color: #3d3d3d;
        height: 110px;
        /* opacity: .9; */
    }

    .blog-title {
        margin: auto;
        position: relative;
        font-size: 40px;
        display: table;
        font-weight: 500;
        top: 1px;
        text-transform: uppercase;
        z-index: 1100;
        right: 1.2%
    }

    .blog-author {
        margin: auto;
        top: 43px;
        font-size: 26px;
        font-weight: 500;
        text-transform: uppercase;
        z-index: 1100;
        left: 15%
    }

    .blog-nav {
        margin: auto;
        position: relative;
        font-size: 15px;
        font-weight: 300;
        text-align: center;
        display: table;
        top: 28px;
        right: 2px;
    }

    .tableofcontents-content {
        margin-left: 0%;
        margin-right: 0%;
    }
}

/* ==========================================================================
   1. Media Queries - Smaller than 500px
   ========================================================================== */


@media only screen and (max-width: 500px) {

    /*#blog-logo img {
        max-height: 80px;
    }*/

    .inner,
    .pagination {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .post {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .post-template .post {
        padding-bottom: 0;
    }

    .post-template .post-header {
        padding: 30px 0;
    }

    .post-footer {
        padding: 2rem 0;
        text-align: center;
    }

    .post-footer .author {
        margin: 0 0 2rem 0;
        padding: 0 0 1.6rem 0;
        /* border-bottom: #EEEEEE 1px dashed; */
    }

    .post-footer .share {
        position: static;
        width: auto;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }

    .older-posts,
    .newer-posts {
        position: static;
        margin: 10px 0;
    }

    .page-number {
        display: block;
    }

    .site-footer {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* ==========================================================================
   End of file. Media queries should be the last thing here. Do not add stuff
   below this point, or it will probably mess everything up.
   ========================================================================== */