/* 1rem = 16px */
html { font-size: 100%; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body {
    padding: 2rem 1rem;
    margin: 0 auto;
    background: #111;
    font-family: "SF Compact Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-kerning: auto;
    font-size: 1rem;
    line-height: 1.4;
    color: #e2e0e5;
    font-weight: 400;
    background-attachment: fixed;
    background-image: url(endless-constellation.svg);
    /* background by SVGBackgrounds.com */
}

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 1rem; }

/** Images */
img { max-width: 100%; height: auto; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

/** Lists */
ul, ol { margin-left: 2rem; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/** Links */
a { color: #adfc03; text-decoration: none; }
/* a:visited { color: #a4dbfb; } */
/* a:visited { color: #d57f07; } */
a:visited { color: #adfc03; }
a:hover { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #e2e0e5; border-left: 2px solid #979698; padding-left: 1rem;  margin: 0 2rem 1rem 2rem; font-style: italic; }

/**
    Code formatting
    https://www.getzola.org/documentation/content/syntax-highlighting/#styling-codeblocks
*/

code {
    font-weight: 500;
    padding: 0.5rem;
}

pre {
    font-weight: 500;
    padding: 1rem;
    overflow: auto;
    border-radius: 8px;
}

pre[data-linenos] {
    padding: 1rem 0;
}

pre table td {
    padding: 0;
}

pre table td:nth-of-type(1) {
    text-align: center;
    user-select: none;
}

pre mark {
    display: block;
    background-color: rgba(254, 252, 232, 0.9);
}

pre table {
    width: 100%;
    border-collapse: collapse;
}

/** Icons */
.chevron-right::after, .chevron-left::before {
    display: inline-block;
    content: "";
    vertical-align: -0.15rem;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    background-color: #cbcacd;
}

.chevron-right::after {
    padding-left: 0.5rem;
    -webkit-mask-image: url(chevron-right.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right;
    mask-image: url(chevron-right.svg);
    mask-repeat: no-repeat;
    mask-position: right;
    /* Icon from FontAwesome */
}

.chevron-left::before {
    padding-right: 0.5rem;
    -webkit-mask-image: url(chevron-left.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-image: url(chevron-left.svg);
    mask-repeat: no-repeat;
    mask-position: left;
    /* Icon from FontAwesome */
}

/** Site Content */

header, main, footer {
    background-color: rgba(17, 17, 17, 0.5);
}

main, footer {
    padding: 0.1rem;
    width: 100%;
    min-width: 300px;
    max-width: 620px;
    margin: 0 auto;
}

.site-header nav .site-title {
    vertical-align: middle;
    border: 1px solid #fff;
    padding: 0.1rem
}

.site-header nav a {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.1rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.site-header nav .site-title a, .site-header nav .site-title a:visited {
    font-size: 1.1rem;
    text-align: left;
    color: #fff;
}

.site-header nav .site-nav {
    margin-top: 0.2rem;
}

.site-nav a.github, .site-nav a.mastodon, .site-nav a.rss {
    content: "";
    width: 1rem;
    height: 1rem;
    color: #cbcacd;
    background-color: #cbcacd;
}

.site-nav a.github {
    -webkit-mask-image: url(github.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(github.svg);
    mask-repeat: no-repeat;
    /* Icon from FontAwesome */
}

.site-nav a.mastodon {
    -webkit-mask-image: url(mastodon.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(mastodon.svg);
    mask-repeat: no-repeat;
    /* Icon from FontAwesome */
}

.site-nav a.rss {
    -webkit-mask-image: url(rss.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(rss.svg);
    mask-repeat: no-repeat;
    /* Icon from FontAwesome */
}

p.site-description {
    padding: 0.1rem;
    color: #979698;
    font-size: 1rem;
    margin: 0;
}

.container { padding: 1rem 0.1rem;}

/** Archive */
.container section:first-of-type { margin-top: 0; }
section h1 { margin-bottom: 1rem; font-weight: bolder; display: inline-block; border-bottom: 2px solid #cbcacd;}

/** Index Page content */
/* .post-summary p:nth-last-of-type(2) { margin-bottom: 0.2rem; } */
.post-list article .post-date a { margin: 0; font-size: 0.875rem; }
.index-footer { width: 100%; text-align: right;}

/** Posts */
article { margin-bottom: 1.5rem; }
article p { margin-bottom: 1rem; }
.post-title {  font-size: 1.5rem; }
.post-content { margin-bottom: 2rem; }
.post-content h1 { font-size: 1.5rem; }
.post-content h2 { font-size: 1.4rem; }
.post-content h3 { font-size: 1.25rem; }
.post-content h4 { font-size: 1.1rem; }
.post-date, .post-date a { font-size: 1rem; margin-bottom: 4px; color: #979698; }

.post-nav { display: flex; margin-bottom: 1rem;}
.post-nav a { width: 100% }
.post-nav a.next { text-align: right; }

article img { display: block; border: 4px solid #cbcacd; border-radius: 4px; margin: 0 auto;}

video { max-width: 100%; }

/** About  */

ul#info {
    margin: 0;
}

ul#info li {
    list-style: none;
    margin-bottom: 0.5rem;
}

ul#info li::before {
    display: inline-block;
    content: "";
    vertical-align: -0.15rem;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    padding-right: 1rem;
    background-color: #cbcacd;
}

ul#info li#location::before {
    -webkit-mask-image: url(geo-alt-fill.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(geo-alt-fill.svg);
    mask-repeat: no-repeat;
    /* Icon from FontAwesome */
}

ul#info li#github::before {
    -webkit-mask-image: url(github.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(github.svg);
    mask-repeat: no-repeat;
    /* Icon from FontAwesome */
}

ul#info li#linkedin::before {
    -webkit-mask-image: url(linkedin.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(linkedin.svg);
    mask-repeat: no-repeat;
}

ul#info li#mastodon::before {
    -webkit-mask-image: url(mastodon.svg);
    -webkit-mask-repeat: no-repeat;
    mask-image: url(mastodon.svg);
    mask-repeat: no-repeat;
}

ul#info li a {
    display: inline-block;
}

/** Footer */
footer { border-bottom: 1px solid #fff; }
footer a.hidden {
    display: none
}