style.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

figure {
    background: rgba(255, 255, 255, .015);
    margin-bottom: .5em;
    padding: .25em
}

body {
    line-height: 1.1
}

ol, ul {
    list-style: bullet
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

iframe {
    max-width: 100%
}

body {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 14px;
    line-height: 1.7
}

a, a:active, a:visited {
    text-decoration: none;
    border-bottom: 1px solid #839496;
    padding: 2px 4px
}

a:hover {
    color: #000
}

p {
    margin-bottom: 15px;
    word-wrap: break-word
}

ul {
    padding: 0 0 18px 30px;
    list-style: disc;
}

ol {
    padding: 0 0 0 30px;
    list-style: circle;
}

ol li, ul li {
    margin-top: 10px;
    margin-bottom: 10px
}

em, i {
    font-style: italic
}

strong, b {
    font-weight: 700
}

small {
    font-size: .85em
}

sup {
    vertical-align: super;
    font-size: .85em
}

sub {
    vertical-align: sub;
    font-size: .85em
}

code {
    font: .85em Monaco, Courier, Monospace
}

blockquote {
    margin: 22px;
    padding: 0 20px;
    border-left: 2px solid #000;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.5em
}

acronym, abbr {
    cursor: help;
    border-bottom: 1px dashed
}

hr {
    border: 1px solid #000
}

h1 {
    font-size: 17px;
    margin: 0 0 10px
}

h2 {
    font-size: 15px;
    margin: 0 0 10px
}

h3 {
    font-size: 14px;
    margin: 0 0 10px
}

h3 {
    font-size: 13px;
    margin: 0 0 10px
}

.clear {
    clear: both
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.img-left {
    float: left;
    margin: 4px 10px 4px 0
}

.img-right {
    float: right;
    margin: 4px 0 4px 10px
}

.img-middle {
    vertical-align: middle
}

.nopadding {
    padding: 0
}

.nounderline {
    text-decoration: underline
}

#page {
    width: 750px;
    margin: 0 auto;
    position: relative
}

#header {
    text-align: center;
    width: 650px;
    margin: 40px auto 50px;
    background-size: auto 100%
}

#header h1 {
    font-size: 32px;
    margin-bottom: 4px
}

#header h1 a {
    border: none
}

#blog-logo img {
    max-width: 484px;
    height: auto
}

#coverimg {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    -moz-box-shadow: inset 0 0 10px 1px #000;
    -webkit-box-shadow: inset 0 0 10px 1px #000;
    box-shadow: inset 0 0 10px 1px #000;
    border-bottom: 4px solid #073642
}

#blog-logo, #blog-logo:hover, #blog-logo:active {
    background-color: transparent;
    border: none
}

#footer {
    width: 900px;
    margin: 20px auto;
    padding-top: 10px;
    font-size: .85em;
    border-top: 1px solid #073642
}

#content {
    width: 900px;
    margin: 0 auto
}

#sidebar {
    position: absolute;
    text-align: right;
    width: 250px;
    top: 0;
    left: -270px
}

#sidebar li {
    list-style: none;
    margin: 2px 0
}

#sidebar a {
    border: none;
    display: block;
    font-size: 1.2em;
    padding: 0
}

#sidebar a span {
    padding: 2px 4px
}

#sidebar .bio {
    margin-top: 40px;
    font-size: .8em
}

#sidebar .bio img.avatar {
    width: 95px;
    height: 95px;
    border-radius: 95px
}

article {
    margin-bottom: 40px
}

article h1 {
    font-size: 17px;
    margin: 0 0 10px
}

article h1 a {
    border: none
}

article h1 a.anchor {
    margin-left: 8px
}

article p {
    text-align: justify
}

article img {
    display: block;
    text-align: center;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1em
}

article .meta {
    padding-top: 6px;
    font-size: .85em;
    font-style: italic
}

img.left {
    float: left;
    margin: 0 1em 1em 0
}

img.right {
    float: right;
    margin: 0 0 1em 1em
}

img.center {
    display: block;
    text-align: center;
    margin: 0 auto 1em
}

pre, code {
    background-color: rgba(255, 255, 255, .015);
    color: #93a1a1;
    font-size: 95%
}

code {
    padding: 2px
}

pre code {
    display: block;
    overflow: auto;
    line-height: 150%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 15px
}

code[class*=language-], pre[class*=language-] {
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    white-space: pre;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    font-family: Menlo, Monaco, courier new, monospace;
    font-size: 1em;
    line-height: 1.5;
    text-shadow: 0
}

.postnavigation {
    padding-top: 10px;
    text-align: center;
    font-size: .85em
}

.postnavigation .left {
    float: left
}

.postnavigation .right {
    float: right
}

@media all and (prefers-color-scheme: dark) and (max-width: 870px), all and (prefers-color-scheme: no-preference) and (max-width: 870px) {
    article img {
        max-width: 100%
    }

    #page, #header, #content, #footer {
        width: inherit;
        padding-left: 10px;
        padding-right: 10px
    }

    #header {
        background-position: right 20px center
    }

    #header h1, #header p {
        padding-left: 10px;
        padding-right: 10px
    }

    #sidebar {
        position: relative;
        text-align: left;
        width: 100%;
        left: 0;
        margin: 10px 10px 20px
    }

    #sidebar nav ul {
        padding-left: 0
    }

    #sidebar nav ul li {
        display: inline
    }

    #sidebar a {
        display: inline
    }

    #sidebar nav select.mnav {
        display: block;
        margin-bottom: 15px
    }

    #sidebar .bio {
        display: none
    }
}

@media (prefers-color-scheme: dark),(prefers-color-scheme: no-preference) {
    @font-face {
        font-family: solarthemeicons;
        src: url(../fonts/solarthemeicons.eot);
        src: url(../fonts/solarthemeicons.eot#iefix) format("embedded-opentype"), url(../fonts/solarthemeicons.woff) format("woff"), url(../fonts/solarthemeicons.ttf) format("truetype"), url(../fonts/solarthemeicons.svg#solarthemeicons) format("svg");
        font-weight: 400;
        font-style: normal
    }[class^=icon-]:before, [class*=' icon-']:before {
    font-family: solarthemeicons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1.7
}

    .icon-sun:before {
        content: '\e801'
    }

    .icon-anchor:before {
        content: '\e800'
    }

    .icon-anchor {
        font-size: 65%
    }

    .token.comment, .token.prolog, .token.doctype, .token.cdata {
        color: #93a1a1
    }

    .token.punctuation {
        color: #586e75
    }

    .namespace {
        opacity: .7
    }

    .token.null, .token.operator, .token.boolean, .token.number {
        color: #CCCCCC
    }

    .token.property {
        color: #b58900
    }

    .token.tag {
        color: #268bd2
    }

    .token.string {
        color: #2aa198
    }

    .token.selector {
        color: #6c71c4
    }

    .token.attr-name {
        color: #CCCCCC
    }

    .token.entity, .token.url, .language-css .token.string, .style .token.string {
        color: #2aa198
    }

    .token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit {
        color: #859900
    }

    .token.statement, .token.regex, .token.atrule {
        color: #2aa198
    }

    .token.placeholder, .token.variable {
        color: #268bd2
    }

    .token.important {
        color: #dc322f;
        font-weight: 700
    }

    .token.entity {
        cursor: help
    }

    html, body {
        background-color: #202124;
        color: #839496
    }

    ::selection {
        background: rgba(255, 255, 255, .05)
    }

    a, a:visited, a:active, a code {
        color: #2aa198;
        border-color: #073642
    }

    a:hover {
        background-color: #073642;
        border-color: #073642;
        color: #2aa198
    }

    hr {
        border-color: #073642
    }

    h1, h2, h3 {
        color: #CCCCCC
    }

    h1 a, h1 a:visited, h1 a:active {
        color: #CCCCCC
    }

    h1 a:hover {
        background-color: #073642;
        border-color: #073642;
        color: #CCCCCC
    }

    article h1 a.anchor {
        color: #2aa198
    }

    blockquote {
        border-color: #CCCCCC
    }

    #sidebar a:hover {
        background-color: transparent
    }

    #sidebar a:hover span {
        color: #2aa198;
        background-color: #073642
    }

    #footer {
        border-color: #073642
    }

    .hljs {
        background: 0 0
    }
}

.social-link-group {
    margin-bottom: 12px;
}

.social-icon-link {
    width: 20px;
    margin-right: 9px;
    opacity: 0.36;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
}

.social-icon-link:hover {
    opacity: 0.9;
}

.w-inline-block {
    max-width: 100%;
    display: inline-block !important;
}

#sidebar .image {
    text-align: center;
}

#sidebar .image img {
    max-width: 250px;
    border-radius: 4%;
}

.copyright {
    float: left;
}


.tables {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}