@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  src: url("/?originalUrl=https%3A%2F%2Fankargren.github.io%2Ffonts%2Fst.ttf") format('truetype');
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url("/?originalUrl=https%3A%2F%2Fankargren.github.io%2Ffonts%2FMerriweather-Regular.otf");
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("/?originalUrl=https%3A%2F%2Fankargren.github.io%2Ffonts%2FOpenSans-Light.ttf");
}

body{
    font-family: 'Open Sans', serif;
    font-size: 15.5px;
    font-weight: lighter;
}
h1{ font-size: 42px; }
h2{ font-size: 32px; }
h3{ font-size: 28px; }
h4{ font-size: 24px; }
h5{ font-size: 20px; }
h6{ font-size: 18px; }
h1, h2{
    margin: 20px 0px 0px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
}
h3, h4, h5, h6{
    margin: 20px 0px 0px;
    font-weight: 400;
}
small{
    font-family: 'Open Sans', serif;
    font-size: 13px;
}
a{
    text-decoration: none;
    color: #db4646;
    cursor: pointer;
}
a:hover{
    color: #b21c1c;
}
a:active{
    color: #910b0b;
}
.titlelink{
    text-decoration: none;
    color: #000000;
    cursor: pointer;
}
.titlelink:hover{
    color: #000000;
}
.titlelink:active{
    color: #000000;
}
img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li{
    display: list-item;
    text-align: -webkit-match-parent;
    list-style-type: square;
    margin: 0;
}
.fa-icon:hover, .fa-icon:focus, .fa-icon:active{
    color: #db4646;
}

.btn{
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 3em;
    line-height: 36px;
    padding: 0 0.0rem;
    cursor: pointer;
    transition: background-color .2s;
    vertical-align: middle;
    color: #343434;
    background-color: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.btn:focus, .btn:hover {
    background-color: rgba(0,0,0,0.1);
}
.btn:active {
  background-color: rgba(0, 0, 0, 0.2);
}
.btn.disabled, btn:disabled {
  background-color: transparent !important;
  color: #b3b3b3 !important;
  cursor: default;
}

.post{ margin-top: 30px; }
.post-content h1{ font-size: 28px; }
.post-content h2{ font-size: 24px; }
.post-content h3{ font-size: 22px; }
.post-content h4{ font-size: 20px; }
.post-content h5{ font-size: 18px; }
.post-content h6{ font-size: 16px; }
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6{
    font-family: 'Playfair Display', serif;
    padding-left: 8px;
    border-left: 5px solid #db4646;
}
.chip{
    display: inline-block;
    height: 30px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    background-color: #fff;
    margin-bottom: 5px;
    margin-right: 5px;
}

pre.highlight{padding:1em}
.bio-photo{
  border-radius:10em;}
.highlight{
  background-color:#efefef;
  font-family: 'Share Tech Mono', monospace;
  font-size:12px;
  font-size:0.9rem;
  line-height:1.5;
  color:#333332;
  margin-bottom:1.5em;
  border-radius:4px;
  list-style:none;
  padding-left:0;
  overflow-x:scroll;
  -webkit-overflow-scrolling:touch}

.highlight pre{
    position:relative;
    margin:0;
    padding:1em;}

.highlight .lineno{
  padding-right:24px;
  color:#b3b3b1;}
.highlight .hll{background-color:#ffc}
.highlight .c{color:#999988;font-style:italic}
.highlight .err{color:#a61717;background-color:#e3d2d2}
.highlight .k{color:#000000;font-weight:bold}
.highlight .o{color:#000000;font-weight:bold}
.highlight .cm{color:#999988;font-style:italic}
.highlight .cp{color:#999999;font-weight:bold;font-style:italic}
.highlight .c1{color:#999988;font-style:italic}
.highlight .cs{color:#999999;font-weight:bold;font-style:italic}
.highlight .gd{color:#000000;background-color:#fdd}
.highlight .ge{color:#000000;font-style:italic}
.highlight .gr{color:#a00}
.highlight .gh{color:#999}
.highlight .gi{color:#000000;background-color:#dfd}
.highlight .go{color:#888}
.highlight .gp{color:#555}
.highlight .gs{font-weight:bold}
.highlight .gu{color:#aaa}
.highlight .gt{color:#a00}
.highlight .kc{color:#000000;font-weight:bold}
.highlight .kd{color:#000000;font-weight:bold}
.highlight .kn{color:#000000;font-weight:bold}
.highlight .kp{color:#000000;font-weight:bold}
.highlight .kr{color:#000000;font-weight:bold}
.highlight .kt{color:#445588;font-weight:bold}
.highlight .m{color:#099}
.highlight .s{color:#d01040}
.highlight .na{color:teal}
.highlight .nb{color:#0086B3}
.highlight .nc{color:#445588;font-weight:bold}
.highlight .no{color:teal}
.highlight .nd{color:#3c5d5d;font-weight:bold}
.highlight .ni{color:purple}
.highlight .ne{color:#990000;font-weight:bold}
.highlight .nf{color:#990000;font-weight:bold}
.highlight .nl{color:#990000;font-weight:bold}
.highlight .nn{color:#555}
.highlight .nt{color:navy}
.highlight .nv{color:teal}
.highlight .ow{color:#000000;font-weight:bold}
.highlight .w{color:#bbb}
.highlight .mf{color:#099}
.highlight .mh{color:#099}
.highlight .mi{color:#099}
.highlight .mo{color:#099}
.highlight .sb{color:#d01040}
.highlight .sc{color:#d01040}
.highlight .sd{color:#d01040}
.highlight .s2{color:#d01040}
.highlight .se{color:#d01040}
.highlight .sh{color:#d01040}
.highlight .si{color:#d01040}
.highlight .sx{color:#d01040}
.highlight .sr{color:#009926}
.highlight .s1{color:#d01040}
.highlight .ss{color:#990073}
.highlight .bp{color:#999}
.highlight .vc{color:teal}
.highlight .vg{color:teal}
.highlight .vi{color:teal}
.highlight .il{color:#099}
.blog-column{
    border-top: 0px solid #db4646;
    border-bottom: 0px solid #db4646;
    border-radius: 4px;
}

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

.p-foot {
  font-size: 12px;
  text-align: center;
}

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}