/*

Handwritten by Michiel de Graaf.

*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog{
  display: block;
}
*{
  margin: 0;
  padding: 0;
}

/* Basics
 *************************************/

body{
  font-family: -apple-system, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  font-size: 95%;
  line-height: 1.6;
  vertical-align: baseline;
  color: #18191a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.serif {
  font-family: Palatino, Optima, Georgia, serif;
}
a{
  cursor: pointer;
  color: rgb(184,23,35);
  text-decoration: none;
  transition: all .25s;
}
a:hover{
  border-bottom: 1px solid rgba(184,23,35,0.5);
}
h1,h2,h3,h4{
	line-height: 1.2;
}
h1 a, h2 a, h3 a, h4 a{
	color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover{
	border-bottom: none;
}
p.meta{
	color: rgb(164,171,178);
}
p.meta a{
  color: rgb(164,171,178);
}
p.meta a:hover{
  border-bottom: 1px solid rgba(164,171,178,0.5);
}
code{
  font-family: Menlo, Monaco, Consolas, Courier, Courier New, monospace;
}
.container{
  overflow: hidden;
  width: 640px;
  margin: 0 auto;
}
dl{
	margin: 1em 0;
}
dd{
	margin-left: 40px;
}

/* Header
 *************************************/

header[role="banner"]{
  overflow: hidden;
  padding: 40px 0 50px 0;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
a.logo{
  display: inline-block;
  width: 37px;
  height: 34px;
  margin-top: 20px;
  border-bottom: none;
  background: url(/img/e7p.svg) no-repeat center center;
  background-size: 37px;
}
.logo img{
  display: none;
}
.about{
	display: block;
  margin-top: 20px;
  font-size: 1.125em;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px rgba(255,255,255,.4);
}
.about span{
  font-style: italic;
}
.headlinks{
  list-style: none;
  overflow: hidden;
}
.headlinks li{
  display: inline-block;
  margin: 20px 5px 0 5px;
}
.headlinks a{
  display: block;
  color: #000;
  text-shadow: 0 1px rgba(255,255,255,.4);
  border-bottom: none;
  opacity: .5;
}
.headlinks a:hover{
  opacity: 1;
}
.headlinks a img{
  width: 16px;
  height: 16px;
}
.headlinks a span{
  display: none;
}
header[role="banner"]#post-head{
  padding: 10px 0 30px 0;
}
#post-head .logo{
  display: block;
  float: left;
}

/* Nav
 *************************************/
nav.archive.header{
	margin-top: 20px;
}
nav.archive.footer{
	margin-top: -40px;
	margin-bottom: 30px;
}
nav.archive h1{
	font-size: 2.0em;
}
nav.archive .nav-prev{
	float: left;
}
nav.archive .nav-next{
	float: right;
}
nav.archive .archive-title{
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
}

/* Archives
 *************************************/
section.archive{
	margin-top: 80px;
}
section.archive h1{
	font-size: 2.0em;
}
section.archive .archive-title{
	text-align: center;
}

/* Tags
 *************************************/
ul.tags{
	list-style: none;
}
li.tag{
	margin-top: 30px;
	overflow: hidden;
}
li.tag .tag-title{
	float: left;
}
li.tag .tag-size{
	padding-left: 20px;
	padding-top: 3px;
	overflow: hidden;
}
/* Articles
 *************************************/

section[role="main"]{
  overflow: visible;
  padding-top: 20px;
  padding-bottom: 80px;
}
article{
  margin-top: 60px;
}
article header{
  overflow: hidden;
  margin-bottom: 16px;
}
article header h1{
  font-size: 2.0em;
}
article header p.meta{
	font-size: .75em;
	font-weight: 500;
	letter-spacing: .2em;
	margin-bottom: 8px;
}
article header time{
  text-transform: uppercase;
}
article p#tags{
	float: left;
}
article .content{
  font-size: 1.1em;
}
article .content h2{
  font-size: 1.4em;
  margin: 45px 0 30px
}
article .content h3{
  font-size: 1.3em;
  margin: 40px 0 30px;
}
article .content h4{
  font-size: 1.2em;
  margin: 35px 0 20px;
}
article .content h5{
  font-size: 1.1em;
  margin: 30px 0 20px;
}
article .content p{
  margin-top: 20px;
  margin-bottom: 20px;
}
article .content img,
article .content video{
  display: block;
/*  min-width: 50%;*/
  max-width: 100%;
  height: auto;
  margin: auto;
  padding: 10px 0;
}
article .content img.right {
  width: 50%;
}
@media screen and (min-width: 568px) {
  article .content img.right {
    width: 34%;
    float:right;
    margin: 0 auto 20px 10px;
  }
}
article .content img.inline{
	display: inline;
}
article .content ul,
article .content ol{
  margin: 0 0 20px 40px;
}
article .content .intro{
  margin-top: 0;
}
article .content blockquote{
	  padding-left: 10px;
	  border-left: 2px solid #ccc;
}

/*
 * Better looking horizontal rule
 */
hr {
	border: 0;
	padding: 0;
}
article .content hr{
	margin: 1.6em 0;	
	text-align: center;
}
article .content hr::after{
	content: "✱ ✱ ✱";
	color: #bbb;
	font-size: 0.6em;
	letter-spacing: 0.8em;
}
article .content .footnotes hr{
	border-top: 1px solid #ccc;
	margin: 3em auto 1em 0;
	width: 8em;
	height: 1px;
}
article .content .footnotes hr::after{
	content: none;
}
/* Disqus
 *************************************/
#disqus_thread{
	width: 640px;
	margin: 0 auto;
}

/* Article footer
 *************************************/
.post-foot{
  margin-top: 40px;
  line-height: 1.3;
}
.post-foot-top{
  clear: both;
  overflow: hidden;
  padding: 20px 0;
  text-align: right;
  line-height: 1;
  border-bottom: 1px solid #ddd;
}
.bio{
  margin-top: 60px;
}
.bio h5{
  margin: 0 0 10px 160px;
  font-size: 1.125em;
  font-style: italic;
}
.bio p{
  margin-left: 160px;
  font-size: 1.125em;
}
.bio p span{
  font-style: italic
}
.bio ul{
  height: 25px;
  margin: 10px 0 0 160px;
  font-size: 1.125em;
}
.bio ul li{
  display: block;
  float: left;
  margin-right: 15px;
}
.bio a i{
  display: inline-block;
  margin-right: 5px;
  font-size: 60%;
}
.bio a.author-name{
  color: #000;
  border-bottom: none;
  background: none;
}
.bio a.author-image{
  display: block;
  float: left;  
  border-bottom: none;
  background: none;
}
.bio img{
  width: 100px;
  height: 100px;
  /*border-radius: 50%;*/
}

/* Footer
 *************************************/

footer#footer{
  padding: 50px 0;
  border-top: 1px solid #ddd;
  color: #666;
}
footer#footer p{
  display: block;
  font-size: 1em;
  text-align: center;
}

/* Code
 *************************************/
article .content code {
  font-size: .85em;
 	overflow-wrap: break-word;
 	word-wrap: break-word;;
}
article .content div.code {
	margin-bottom: 20px;
	padding: 10px;
	overflow: auto;
	border-radius: 4px;
	border: 1px solid hsl(0,0%,84%);
	box-shadow: 0 1px 1px hsla(0,0%,0%,.05),;
	/*background-color: hsla(0,0%,0%,.02);*/
 }
code  { color: #333 }
code .code-c { color: rgba(0, 131, 18, 1) }
code .code-err {}
code .code-k { color: rgba(170, 13, 145, 1) }
code .code-o { color: #000 }
code .code-cm { color: rgba(0, 116, 0, 1) }
code .code-cp { color: rgba(100, 56, 32, 1) }
code .code-c1 { color: rgba(0, 116, 0, 1) }
code .code-cs { color: rgba(0, 116, 0, 1) }
code .code-gd { color: #A00000 }
code .code-ge { font-style: italic }
code .code-gr { color: #F00 }
code .code-gh { color: navy; font-weight: bold }
code .code-gi { color: #00A000 }
code .code-go { color: gray }
code .code-gp { color: navy; font-weight: bold }
code .code-gs { font-weight: bold }
code .code-gu { color: purple; font-weight: bold }
code .code-gt { color: #0040D0 }
code .code-kc { color: rgba(170, 13, 145, 1) }
code .code-kd { color: rgba(170, 13, 145, 1) }
code .code-kp { color: rgba(170, 13, 145, 1) }
code .code-kr { color: rgba(170, 13, 145, 1) }
code .code-kt { color: rgba(170, 51, 145, 1) }
code .code-m { color: rgba(28, 0, 207, 1) }
code .code-s { color: rgba(196, 26, 22, 1) }
code .code-n { color: rgba(92, 38, 153, 1) }
code .code-na { color: rgba(131, 48, 30, 1) }
code .code-nb { color: rgba(170, 13, 145, 1) }
code .code-nc { color: rgba(63, 110, 116, 1) }
code .code-no { color: rgba(38, 71, 75, 1) }
code .code-nd { color: #A2F }
code .code-ni { color: #999; font-weight: bold }
code .code-ne { color: #D2413A; font-weight: bold }
code .code-nf { color: rgba(0, 0, 0, 1) }
code .code-nl { color: rgba(0, 0, 0, 1) }
code .code-nn { color: #00F; font-weight: bold }
code .code-nt { color: green; font-weight: bold }
code .code-nv { color: #19177C }
code .code-ow { color: #A2F; font-weight: bold }
code .code-w { color: #bbb }
code .code-mf { color: rgba(28, 0, 207, 1) }
code .code-mh { color: rgba(28, 0, 207, 1) }
code .code-mi { color: rgba(28, 0, 207, 1) }
code .code-mo { color: rgba(28, 0, 207, 1) }
code .code-sb { color: rgba(196, 26, 22, 1) }
code .code-sc { color: rgba(196, 26, 22, 1) }
code .code-sd { color: rgba(196, 26, 22, 1) }
code .code-s2 { color: rgba(196, 26, 22, 1) }
code .code-se { color: rgba(196, 26, 22, 1) }
code .code-sh { color: rgba(196, 26, 22, 1) }
code .code-si { color: rgba(196, 26, 22, 1) }
code .code-sx { color: rgba(196, 26, 22, 1) }
code .code-sr { color: rgba(196, 26, 22, 1) }
code .code-s1 { color: rgba(196, 26, 22, 1) }
code .code-ss { color: rgba(196, 26, 22, 1) }
code .code-bp { color: green }
code .code-vc { color: rgba(63, 110, 116, 1) }
code .code-vg { color: #19177C }
code .code-vi { color: #19177C }
code .code-il { color: rgba(28, 0, 207, 1) }

/* Responsiveness
 *************************************/

@media screen and (max-width: 720px){
	body{
	  font-size: 90%;
	}
  .container{
    width: 85%;
  }
  #disqus_thread{
    width: 85%;
  }
}
@media screen and (max-width: 568px){
  body{
    font-size: 80%;
	  -webkit-text-size-adjust: none;
  }
  header[role="banner"]{
    padding: 10px 0 20px 0;
  }
  header[role="banner"]#post-head{
    padding: 0 0 20px 0;
  }
  .about{
    margin-top: 15px;
  }
  nav.archive.header{
  	margin-top: 15px;
  }
  nav.archive.footer{
  	margin-top: -40px;
  	margin-bottom: 20px;
  }
  nav.archive h1{
  	font-size: 1.8em;
  }
  section[role="main"]{
    padding-bottom: 50px;
  }
	section.archive{
		margin-top: 30px;
	}
	section.archive h1{
		font-size: 1.8em;
	}
	article{
    margin-top: 20px;
  }
  article header h1{
    font-size: 1.9em;
  }
	article .content h2{
	  margin: 35px 0 25px
	}
	article .content h3{
	  margin: 30px 0 25px;
	}
	article .content h4{
	  margin: 25px 0 15px;
	}
	article .content h5{
	  margin: 20px 0 15px;
	}
  .post-foot{
    margin-top: 30px;
  }
  .post-foot-top{
    padding: 15px 0;
  }
  .bio{
    margin-top: 30px;
  }
  .bio h5,
  .bio p{
    margin-left: 80px;
  }
  .bio ul{
    margin: 10px 0 0 80px;
    overflow: hidden;
  }
  .bio img{
    width: 60px;
    height: 60px;
  }
  footer#footer{
    padding: 30px 0;
  }
}