/* Inserts the CSS required by various settings on the services page of the dashboard */
{{{appCSS}}}

/* Inserts the @font-face rules required to load whichever fonts are selected. */
{{{font.styles}}}
{{{syntax_highlighter_font.styles}}}
{{{syntax_highlighter.styles}}}

:root {
  --sidebar-width: 0px;
  {{#is.navigation_location.left}}
  --sidebar-width: 300px;
  {{/is.navigation_location.left}}
  {{#is.navigation_location.right}}
  --sidebar-width: 300px;
  {{/is.navigation_location.right}}
}

html {
  {{#font}}
  font-family: {{{stack}}};
  font-size: {{{font_size}}}px;
  line-height: {{{line_height}}};
  {{/font}}
  text-rendering: optimizeLegibility;
}

body {
  color: {{text_color}};
  background: {{background_color}};
  word-wrap: break-word;
  margin: 0;
  position: relative;
  min-height: 100vh;
  padding: 0
}


/* :: Navigation */

.navigation {
  padding: 2em 0;
  {{#navigation_background_color}}
  background: {{navigation_background_color}};
  {{/navigation_background_color}}
  {{^navigation_background_color}}
  background: {{background_color}};
  {{/navigation_background_color}}
  box-sizing: border-box;
  z-index: 100;
}

.navigation .container {
  display: flex;
  flex-wrap: wrap;
  align-items:baseline;
  justify-content: space-between;
}

.navigation.alignment-center .container {justify-content: center;}
.navigation.alignment-left  .container {justify-content: flex-start;}
.navigation.alignment-right .container {justify-content: flex-end;}

.navigation-location-left {
  padding-left: var(--sidebar-width);
}

.naviation-location-right {
  padding-right: var(--sidebar-width);
}
.navigation-location-left .container,
.navigation-location-right .container {
  padding-top: 2em}


.navigation-location-left .navigation,
.navigation-location-right .navigation {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  padding: 2em;
}

.navigation-location-left .navigation {
  left: 0;
}

.navigation-location-right .navigation {
  right: 0;
}

.navigation-location-left .navigation .container,
.navigation-location-right .navigation .container {
  flex-direction: column;
  align-items: flex-start;
}

.navigation-location-left .navigation #logo,
.navigation-location-right .navigation #logo {
  margin-bottom: 1.4em;
}

.navigation-location-left .navigation .links,
.navigation-location-right .navigation .links {
  flex-direction: column;
  display: flex;
}
  
.navigation a {margin-right: 1em;color: {{text_color}};text-decoration: none}
.navigation .links a {color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);}
.navigation a:last-child {margin-right: 0}
.navigation a {opacity: 0.6666;transition: opacity,color 0.2s ease}
.navigation:hover a {opacity: 1}
.navigation a:hover {color: {{text_color}};}

.navigation .links {
  display: flex;
  margin: 0;
  align-content: baseline;
  flex-shrink: 0;
}

.links a {
  order: 1;
}

#logo {
  color: {{text_color}};
  flex-shrink: 0;
  margin-right: 2em;
}


#logo:hover {opacity: 0.8}


/*  :: General layout */

.main {max-width: {{max_width}}px;margin: 0 auto;margin-top: 2em}

.container {
  box-sizing:border-box;
  max-width: {{max_width}}px;  
  padding-left: 1em;
  padding-right: 1em;
  {{#is.site_alignment.center}}
  margin:0 auto;
  {{/is.site_alignment.center}}
  {{#is.site_alignment.left}}
  margin:0 auto 0 2em;
  {{/is.site_alignment.left}}
  {{#is.site_alignment.right}}
  margin:0 2em 0 auto;
  {{/is.site_alignment.right}}
}

.entry {margin: 0 0 192px}

/* :: Post and page layout */


/* Used underneath the entry */
.left-label {padding-left: 140px;padding-top: 1rem;font-size:0.875em;position: relative}
.left-label .tag {margin:0 1rem 0 0 }.footnotes > ol:before,
.left-label h5 {font-size: 0.875em;font-weight: 600;color:rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);margin-bottom: 24px;}
.left-label h5 {margin-top: 1em;position: absolute;top: 0;left: 0}

/* Used for backlinks and next/previou links */
.rounded-link {
  border:1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.1);
  text-decoration: none;color:inherit;display: block;padding-bottom: 1rem;
border-radius: 4px;padding:0.75em 1.25em;font-size:0.9em}
.rounded-link + .rounded-link {margin-top: 1em}
.rounded-link .title {display: block;color:{{accent_color}};text-decoration:underline}
.rounded-link .summary {opacity: 0.8;max-height: 2.8em;overflow: hidden;display: block;margin-top: 0.5em;}
.rounded-link .summary:empty {display: none}
.rounded-link:hover {border-color: {{accent_color}};opacity: 1}


.clear {width: 100%;clear: both;float: none;display: block;height: 0}

.margin {
  position: absolute;
  box-sizing: border-box;
  width: 33%;
  left: 100%;
  padding-left: 2em;
}

.margin blockquote {margin: 3px 0;padding: 3px 6px;font-size: .875em;line-height:18px;}
.margin blockquote p {margin: 0}

.margin p,
.column p {margin-top: 0}

.margin img,
.column img {margin-top: 6px}

.margin p {font-size: 0.8em;color:rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);}



.wide {
    width: calc(100vw - var(--scrollbar-width) - var(--sidebar-width) - 2em);
    margin-left: calc((100vw - var(--scrollbar-width) - var(--sidebar-width) - {{max_width}}px) * -0.5);
    margin-right: 0;
}

.wide img {display: block;margin-left: auto;margin-right: auto;}

@media screen and (max-width: 1146px) {
  .wide {
    margin-left: -2em;
  }
}

.wide.left, .wide.right {
  width: calc(100vw - var(--scrollbar-width) - var(--sidebar-width) - 2em);
  margin-left: calc((100vw - var(--scrollbar-width) - var(--sidebar-width) - {{max_width}}px) * -0.5);
  margin-right: -25%;
  float: none;
  overflow: auto; /* collapse internal margins */
}

.column {
  box-sizing: border-box;
  float: left;
}

.column .caption {margin-bottom: 6px}

.column.two {
  width: 50%;
  padding-right: 12px;
}


.column.two + .column.two {
  padding: 0 0 0 12px;
}

.column.three {width: 33.333333%;padding: 0 16px 0 0;}
.column.three + .column.three {padding: 0 8px}
.column.three + .column.three + .column.three {padding: 0 0 0 16px}

.column.four {width: 25%;padding-right: 18px;}
.column.four + .column.four {padding: 0 12px 0 6px;}
.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}


.column h1,
.column h2 {margin-bottom: -12px}

.right {float: right;}
.left {float: left;}

/* :: Typography */

p, li {
  position: relative;
  margin: 1.666em 0;
}

h1 {font-size: 1.5625em;line-height: 36px;font-weight: bold;margin-bottom: 24px;text-wrap:balance}

h2, h3, h4, h5, h6 {font-size: 1.0625em;font-weight: bold;line-height: 24px;margin: 48px 0 24px;text-wrap:balance}

blockquote {
  padding: 0 0 0 12px;
  color: {{text_color}};
  opacity: 0.666;
}

.small, .caption {font-size: .8125rem;color: {{text_color}};font-weight: 500;opacity:0.5}

.caption {
  display: block;
  margin: 1rem auto 1.6666rem;
  max-width: {{max_width}}px;
  font-style: normal;
}

big {color: {{text_color}};font-size: 2em;line-height: 48px;display: block;}

/* LINKS */

a {
  color: {{accent_color}}; /* 02569B */
  text-decoration: underline;
}

a:hover {
  opacity: 0.75
}

a::selection {
  background: #b3d4fd;
}

a::-moz-selection {
  background: #b3d4fd;
}

a:active {
  opacity: 0.5
}

a:focus {
  background: rgba({{#rgb}}{{accent_color}}{{/rgb}}, 0.1);
  text-decoration: none
}

a.tag {
  margin-left: 1.33em;
  text-decoration: none;
}

/* RULE */

hr {width: 100%;opacity:0.1;margin: 24px auto -1px;border: none;border-bottom: 3px double {{text_color}}; padding-bottom: 1.4em;text-shadow: none;box-shadow: none;}

/* CODE */

code {
  font-family: {{{syntax_highlighter_font.stack}}};
  margin: 0;
  font-size: 0.85em;
  background: rgba(0,0,0,.03);
  border-radius: 3px;
  line-height: 24px;
}

p code {
  line-height: 1em;
  padding: 2px;
  margin-left: -2px;
  display: inline-block;
}

pre code {
  display: block;
   white-space: pre-wrap;
}

pre code {
  display: block;padding: 12px 18px;
  margin: 0 0 0 0;
  background-color: rgba(0,0,0,.02);
}

/* TABLES */

table {
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 90%;
  border-top: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.1);
}

tr {border-bottom: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.1)}

th {
  text-align: left;
  font-weight: 600;
  padding: 0.5em 1em 0.5em 0;
}

td {
  padding: 0.5em 1em 0.5em 0;
  line-height: 1.3;
}

/* LISTS */

ul, ol {
  margin-left: 0;
  padding-left: 1.25em;
  list-style-position: outside;
  margin-bottom: 1.6667em;
}

li {padding-left: 0.75em}

ul {list-style: circle;}

ul.task-list { list-style-type: none; }

ul ul, ol ul, ol ol, ul ol {margin-bottom: 0}

li {margin: 0}

/* IMAGES */

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

.image {
  position: relative;
  height: 0;
  padding: 0 0 35.504201681%;
  max-width: 100%;margin: 0 auto;display: block;
}

.image img {width: 100%}

.image_container {display: block}

.wide .image_container {margin: 0 auto}
.wide p {margin-top: 0}

/* VIDEOS & tweets */

iframe {width: 100%;}

/* Only apply vertical margin to direct
   descendants, prevents multi margins */
.entry > iframe {margin: 24px 0!important;}

/* MATH */
.has-katex {text-align: center;}
.katex  {font-size: 1.05em;}


.date {margin-top: 10px;text-decoration: none;}
.date:empty {display: none;}

/* Pagination */
.pagination {
  text-align: center;
  margin: 72px 0 144px;
  font-size: .875em;color: {{text_color}};opacity:0.5
}

.pagination a {margin: 0 1em;background: none}

/* Hide the footnotes on the homepage */
.entry.on-index-page {margin: 0}
.entry.on-index-page .footnotes {display: none;}

.footnotes > ol:before {
     content: "Footnotes";
     position: absolute;
     top: 0;
     left: 0 
}

.footnotes {
    margin-top: 4rem
}

.footnotes > ol {
    position:relative;
    padding: 0;
    font-size: 0.875em;
    opacity: 0.8;
    padding-left: 110px
}
.footnotes > ol li {
    margin-left: 20px;
    padding-left: 10px
}
.footnotes > ol li::marker {
     color: {{text_color}};
}
 .footnote-back {text-decoration: none;margin-left: 0.5em}
 .footnote-back:before {
    content: "["
}
 .footnote-back:after {
    content: "]"
}
 .footnote-ref {
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
 .footnote-ref sup {
    line-height: 0
}
 .footnote-ref sup:before {
     content: "[" 
}

 .footnote-ref sup:after {
     content: "]" 
}


/* The fixed header interferes with the correct scroll offset for footnotes*/
.entry [id] {
 scroll-margin-top: 8rem;
}

hr.minimal, .footnotes hr {border-bottom:1px solid;margin-top: 0;}

/* :: Search */

form[action="/search"] input {
  {{#navigation_font}}
  font-size: {{{font_size}}}px;
  font-family: {{{stack}}};
  {{/navigation_font}}
  padding: .5em 1em;
  border-radius: 0.5em;
  width: {{max_width}}px;
  color: {{accent_color}};
  box-sizing: border-box;
  background: {{background_color}};
  margin: 0;
  border: 0.12em solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.25);
}

form[action="/search"] input:focus {
  outline: none;
  border-color: {{accent_color}};  
}

::-webkit-input-placeholder {
   color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);
}

:-moz-placeholder { /* Firefox 18- */
  color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);
}

::-moz-placeholder {  /* Firefox 19+ */
  color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);
}

:-ms-input-placeholder {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);
}

/* search results */

a.full-line {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.full-line em {
  color: {{accent_color}};
  font-style: normal;
  text-decoration: underline;
}