{{{coding_font.styles}}}
{{{body_font.styles}}}
{{{syntax_highlighter.styles}}}

/* This template tag is replaced by CSS when this file is rendered */
{{{appCSS}}}

/* Fixes bug with image zoom plugin and archives page 
   which had previously rendered archives page links 
   unclickable with the image zoom plugin enabled */
.cf {clear: both;}

{{> css-tachyons}}
{{> css-bigfoot}}
{{> css-katex}}
{{> css-video-container}}
{{> css-layout}}

html {
  margin: 0;
  padding: 0;
  font-size: {{body_font.font_size}}px;
  width: 100%;
  height: 100%;
}

.bg-background {background:{{background_color}}}
.bg-sidebar {background:{{background_color}}}

html,body {
  font-family: {{{body_font.stack}}}
}

body {
  padding: 0 2rem;
  max-width: 66rem;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing:antialiased;
  background:{{background_color}};
  color: {{text_color}};
}

.black {
    color: {{text_color}};
}

.bg-black-05 {
    background-color: rgba({{#rgb}}{{text_color}}{{/rgb}},.05);
}

.black-90 {
    color: rgba({{#rgb}}{{text_color}}{{/rgb}},.9);
}

.black-80 {
    color: rgba({{#rgb}}{{text_color}}{{/rgb}},.8);
}

.black-50 {
    color: rgba({{#rgb}}{{text_color}}{{/rgb}},.5);
}

.black-30 {
    color: rgba({{#rgb}}{{text_color}}{{/rgb}},.3);
}

.b--black-10 {border-color:rgba({{#rgb}}{{text_color}}{{/rgb}},.10);}
.b--black-05 {
    border-color:rgba({{#rgb}}{{text_color}}{{/rgb}},.05)
}

.bigfoot-footnote__content, 
.bigfoot-footnote,
.bigfoot-footnote__tooltip  { 
    background-color: {{background_color}};
  }

.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before {
    background-image: -webkit-gradient(linear, left top, left bottom, from({{background_color}}), to(rgba(250, 250, 250, 0)));
    background-image: -webkit-linear-gradient(top, {{background_color}} 50%, rgba(250, 250, 250, 0) 100%);
    background-image: linear-gradient(to bottom, {{background_color}} 50%, rgba(250, 250, 250, 0) 100%);
}

.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after {
    background-image: -webkit-gradient(linear, left bottom, left top, from({{background_color}}), to(rgba(250, 250, 250, 0)));
    background-image: -webkit-linear-gradient(bottom, {{background_color}}  50%, rgba(250, 250, 250, 0) 100%);
    background-image: linear-gradient(to top, {{background_color}}  50%, rgba(250, 250, 250, 0) 100%);
}

.bigfoot-footnote { 
    border: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}},.2);
    border-bottom-color: rgba({{#rgb}}{{text_color}}{{/rgb}},.25);
    border-top-color: rgba({{#rgb}}{{text_color}}{{/rgb}},.15);
    -webkit-box-shadow: 0 0 15px 0 rgba({{#rgb}}{{text_color}}{{/rgb}},.15);
    -moz-box-shadow: 0 0 15px 0 rgba({{#rgb}}{{text_color}}{{/rgb}},.15);
    box-shadow: 0 0 15px 0 rgba({{#rgb}}{{text_color}}{{/rgb}},.15);
}

.bigfoot-footnote__button {
  background-color: rgba({{#rgb}}{{text_color}}{{/rgb}},.1);

}
.bigfoot-footnote__button:after {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}},.5);
}

.bigfoot-footnote__button:hover, .bigfoot-footnote__button:focus {
    outline: none;
  background-color: rgba({{#rgb}}{{text_color}}{{/rgb}},.9);
  color: {{background_color}};
}

.page-container {
  margin: 0 0 0 15rem;
}

.entry {
  padding-right: 3rem
}

#close-nav {
  display: none
}

#open-nav, #open-nav-container {
  display: none
}


.lh2 {line-height:2rem}
.w2 {width:2.5rem}
.h2 {height:2.5rem}

#top_button {opacity:0;transition: opacity 0.2s ease-in;}
#top_button.show {opacity:1}

ul.task-list { list-style-type: none; }
input {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);
  background-color: {{background_color}};
  background-image: none;
  border: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.2);
  border-radius: 4px;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input[type="text"] {
  box-shadow: inset 0 1px 1px rgba({{#rgb}}{{text_color}}{{/rgb}},.075);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="submit"] {
  font-weight: 500;
  border-left:none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;color: rgba({{#rgb}}{{text_color}}{{/rgb}},.8);
  background-color: {{background_color}};
  cursor:pointer;
}

input:focus {outline:none}
  
table {
  border-collapse: collapse;
  line-height:1.5;
}
th {text-align:left}
tr {border-bottom: 1px solid #eee}
thead tr {border-color: #444}
td, th {padding-right: 2rem;padding-left:2rem} 
td:first-child, th:first-child  {padding-left:0}
td:last-child, th:last-child {padding-right:0}  
th, td {padding-top:0.5rem;padding-bottom:0.5rem}
b, strong, h1, h2, h3, h4, h5, h6, th {font-weight:500}
  
.entry b, .entry strong {font-weight: 600}
  
code {
  font-family: {{{coding_font.stack}}};
  padding: .2rem .4rem;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,.04);
  border-radius: 3px;
  font-weight: 400;
}
  
pre, code {font-size:.92rem}
  
pre {margin:2rem 0}
  
.bw2 {border-width:2px}

a {
  color:inherit;
  transition: color, border-color .2s linear;
  text-decoration:none
}

a:not(.no-underline) {color:{{accent_color}};border-bottom:1px solid rgba({{#rgb}}{{accent_color}}{{/rgb}},0.25)}
a:not(.no-underline):hover {border-color: rgba({{#rgb}}{{accent_color}}{{/rgb}},1)}
a:hover {color:rgba({{accent_color}}, 1)}

a.dim {transition: opacity .2s linear;opacity:1}
a.dim:hover {opacity:0.8}
a.dim:active {opacity:0.5}
a.dim:visited {opacity:0.3}
  
hr {
  margin: 3em auto;
  height: 2px;
  background-color: #e7e7e5;
  border: none;
}
  
.avatar {max-width:5rem;}

.nav {overflow:hidden;}
.nav a.no-wrap {width:1000%;text-decoration:none;}

/* 

   TODO enable once we support color manipulation functions 
   We get an ugly gradient in safari when we don't use a fully 
   transparent version of the {{background_color}}. See this:

   https://css-tricks.com/thing-know-gradients-transparent-black/

.nav:after {
  width:2rem;
  position:absolute;
  top:0;
  content:"";
  right:0;
  z-index:1;
  bottom:0;
  background: -webkit-gradient(linear,left top, right top,from(transparent),to({{background_color}}));
  background: -webkit-linear-gradient(left,transparent,{{background_color}});
  background: -o-linear-gradient(left,transparent,{{background_color}});
  background: linear-gradient(to right,transparent,{{background_color}});
}

*/
  
.no-border-5 a:nth-child(n+5) .bb {display:none}
.no-border-4 a:nth-child(n+4) .bb {display:none}
.no-border-3 a:nth-child(n+3) .bb {display:none}

.no-border-first a:first-child {border:none}
  
/* Hide all but X or show all but X */
.clip-tags a:nth-child(n+6){display:none}
.clip-10 a:nth-child(n+11){display:none}
.clip-6 a:nth-child(n+7){display:none}
.clip-5 a:nth-child(n+6){display:none}
.clip-4 a:nth-child(n+5){display:none}
.clip-3 a:nth-child(n+4){display:none}
.clip-2 a:nth-child(n+3){display:none}
.clip-1 a:nth-child(n+2){display:none}
.skip-6 a:nth-child(-n+4) {display:none}
.skip-1 a:nth-child(-n+1) {display:none}
.skip-3 a:nth-child(-n+3) {display:none}

/* Fix bug in tachyon which sets width to 100% 
  should consider doing img:not([width]):not([height])
  to prevent overriding attribute values?
*/

img {height:auto;}
.f7 {font-size:11px}
/* Didn't know you could do this */ 
li p {margin:0}
.measure-wide {max-width:38em}

blockquote, ol, ul {
  padding-left:4rem;
}
blockquote {
  color:#676767;
}
  
.tracked-tight {letter-spacing:-0.01em}
ol li {padding-left:0.75rem}
  
/* Prevent spacing from blowing up in nested lists */ 
h2 + ul, h2 + ol, 
h3 + ul, h3 + ol, 
h4 + ul, h4 + ol, 
h5 + ul, h5 + ol,
h6 + ul, h6 + ol {
  margin-top: -1.5rem
}

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

h1, h2, h3 {margin: 3rem 0 2rem}

h4, h5, h6, p, blockquote, ul, ol, table {margin:2rem 0}
  
h1 {font-weight:900;margin:0;padding:0;font-size:2.25rem;}

/* Italic style sucks in font-weight: 900 */ 
h1 em {font-style:normal}
  
  /*Prevent long words breaking the layout
  
  should this be?
  
  .hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

 */
.lh-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}


/*Compress title size */ 
.lh-title.f2, .lh-title.f1 {line-height:1}

figure {margin:3rem 0;}
figcaption, .caption {font-size:0.9rem;color:#666;margin:0rem 0 0;}
figure cite, figure cite a {font-size:0.8rem;color:#999;font-style:normal;border:none!important;}

.caption {display: block;margin-bottom: 3rem}
  

/* Tachyons customizations */
.lh-title.tracked-tight {line-height:1.15}

.pv2-5 {padding-top:0.75rem;padding-bottom:0.75rem}
.w-15 {width:15%}
.w-85 {width:85%}

.nav {width:12rem}

/* Month baseline fix on Archives page */
h3.f6 {line-height:1.25;}

@media (max-width:950px) {
  .entry-line .w-third,
  .featured-entry .w-two-thirds,
  .featured-entry .w-third {width:50%}
  .entry-line .title-block {width:100%}
  .entry.w-80 {width:100%}
  /* Date and tags on entry page */
  .w-20.bl.fr {margin-top:0;padding-top:0;border:none;width:100%;float:none;padding-left:0;padding-bottom:2rem}
}


@media (max-width:800px) {
  .page-container > .mt5:first-child {margin-top:0}
  .page-container > .mt5:first-child .ml4 {margin-left:1rem}

  .entry {padding-right:0}
  body {padding:0 1rem} 
  figure {margin-left:-1rem;margin-right:-1rem}
  figcaption {margin-left:1rem;margin-right:1rem}
  .page-container {margin:0 0 0 0}
  .nav {width:100%;padding-left:4rem}
  #open-nav, #open-nav-container {display:block}
  .nav {display:none} 
  .nav-is-open #close-nav {display:block;right:1rem}
  .nav-is-open .nav {display:block;z-index:668;left:0}
}

@media (max-width:500px) {
  .w-80.pr4 {padding-right:0;width:100%}
  .featured-entry .w-two-thirds,
  .entry-line .w-third,    
  .featured-entry .w-third {width:100%}
  .entry-line .ml3,
  .entry-line .mr4 {
    margin-left:0;
    margin-right:0;
    margin-bottom:0.5rem;
    margin-top:0.5rem;
  }
  .featured-entry .lh-title {margin-top:1rem}
  .featured-entry a {padding-top:0}
  
  h3.f6 {font-size: 0.7rem;line-height: 1.8}

  .w-50.fl.pr4,
  .w-50.fr.pl2 {
    width:100%;
    padding-right:0;
    padding-left:0
  }
  
  .right.margin,
  .left.margin {
    float:none;
    position:relative;
    left:auto;
    right:auto;
    margin-left:0;
    margin-right:0;
    width:100%;
    padding:0
  }
}