
  
  * {
	  box-sizing: border-box;
  }
  html, body {
	  margin: 0;
	  padding: 0;
	  font-size: 23px;
  }
  body {
	  background: #f6f6f6;
	  font-family: "EB Garamond", "Helvetica Neue", "Segoe UI", sans-serif;
	  color: #333;
	  line-height: 1.5rem;
	  font-weight: 400;
	  min-width: 325px;
  }
  
  a {
	  color: #ff3300;
	  text-decoration: none;
  }
	  a:hover {
		  color: #000;
	  }
  
  
  code {
	  display: inline-block;
	  background: #f4f4f4;
	  color: #6262fb;
	  padding: 0px 3px;
	  font-size: 0.775em;
	  line-height: 1.2em;
	  border-radius: 5px;
  }
  pre code {
	  display: block;
  }
	  .post .highlight {
		  background: #f4f4f4;
		  padding: 5px;
	  }
	  .post img {
		  display: block;
		  margin: 1.0rem auto;
		  max-width: 100%;
		  height: auto;
	  }
  
	  .content a {
		  word-break: break-word;
		  text-decoration: underline;
		  text-decoration-color: #ff3300;
		  text-decoration-thickness: 2px;
	  }
		  .content a:hover {
			  color: #000;
			  text-decoration-color: #000;
		  }
	  .content sup {
		  font-size: 0.775em;
		  position: relative;
		  top: -7px;
		  vertical-align: top;
	  }
	  .content sup a {
		  text-decoration: none;
	  }
	  .post .footnote {
		  border: 1px solid #ff3300;
		  border-width: 1px 3px 3px 1px;
		  padding: 20px;
		  margin: 45px auto;
		  font-size: 0.875rem;
		  line-height: 1.4;
		  max-width: 75%;
	  }
		  .post .footnote .title {
			  text-transform: uppercase;
			  margin: 0 0 10px 0;
			  font-size: 1rem;
			  font-weight: bold;
		  }
		  .post p {
			  margin: 0 0 10px 0;
		  }
		  .post p:last-child {
			  margin-bottom: 0;
		  }
	  .cc-disclaimer {
		  font-size: 0.775rem;
		  color: #aaa;
		  line-height: 1.4;
	  }
		  .cc-disclaimer a {
			  color: inherit;
			  text-decoration: underline;
		  }
  
  html,button,input,select,textarea {
	  color: #333;
  }
  
  ::-moz-selection {
	  background: #000;
	  text-shadow: none;
	  color: #fff;
  }
  
  ::selection {
	  background: #000;
	  text-shadow: none;
	  color: #fff;
  }
  
  hr {
	  display: block;
	  height: 1px;
	  border: 0;
	  border-top: 1px solid #ddd;
	  margin: 30px 0;
	  padding: 0;
  }
  
  img {
	  max-width: 100%;
  }
  
  a img {
	  border:none;
  }
  
  figure {
	  margin: 0;
	  text-align: center;
  }
  
  figcaption {
	  font-size: 0.875rem;
	  color: #999;
  }
  
  fieldset {
	  border: 0;
	  margin: 0;
	  padding: 0;
  }
  
  textarea {
	  resize: vertical;
  }
  
  blockquote {
	  background: #f6f6f6;
	  font-style: italic;
	  border-left: 5px solid;
	  border-color: #000;
	  padding: 10px 15px;
  }
	  blockquote p {
		  margin: 0 0 10px 0;
	  }
	  blockquote sup {
		  color: #aaa;
	  }
	  blockquote p:last-child {
		  margin-bottom: 0;
	  }
  
  blockquote cite {
	  opacity: .8;
  }
  
  blockquote em {
	  font-weight: 600;
  }
  
  
  h1, h2, h3, h4, h5, h6 {
	  font-weight: 500;
	  line-height: 1.3em;
	  margin: 45px 0 20px 0;
	  color: #111;
  }
  
  h1 {
	  font-size: 2rem;
  }
  h2 {
	  font-size: 1.5rem;
  }
  
  h3 {
	  font-size: 1.3rem;
  }
  
  h4 {
	  font-size: 1.1rem;
  }
  
  .half {
	  max-width: 70%;
  }
  .align-center {
	  text-align: center;
  }
  
  .align-left {
	  text-align: left;
  }
  
  .align-right {
	  text-align: right;
  }
  
  .float-right {
	  float: right;
  }
	  figure.float-right {
		  margin: 0 15px 0 15px;
	  }
  
  .text-small {
	  font-size: .875em;
  }
  
  ul.flat {
	  margin: 0;
	  padding: 0;
  }
  
  ul.flat li {
	  display: inline-block;
	  list-style: none;
	  margin-left: 0;
  }
  li {
	  margin-bottom: 15px;
  }
  
  .prevent-collapse {
	  min-height: .1rem
  }
  
  .highlight pre {
	  margin-bottom: 0;
	  margin-top: 0;
	  padding: 20px;
	  background-color: transparent !important;
  }
  
  .wrap {
	  background: #fff;
	  margin: 0 auto;
	  padding: 90px 120px;
  }
  
  .container {
	  max-width: 1100px;
	  min-width: 320px;
  }
  
  .header {
	  margin-bottom: 90px;
	  display: flex;
	  flex-wrap: wrap;
  }
	  .header .logo, .header .nav {
		  flex-grow: 1;
	  }
	  .header .nav {
		  text-align: right;
	  }
	  .header .nav a {
		  display: inline-block;
		  margin-left: 30px;
	  }
	  .header .nav a.active {
		  color: inherit;
	  }
  
  .slogan {
	  margin: 0 0 60px 0;
	  font-style: italic;
  }
  
  .photo {
	  float: right;
	  text-align: right;
  }
	  .photo img {
		  border-radius: 100%;
		  display: inline-block;
		  max-width: 234px;
	  }
  
  .slideshow {
	  margin: 20px -120px 0 -120px;
  }
	  .slideshow figure {
		  position: relative;
		  overflow: hidden;
		  height: 0;
		  opacity: 0;
		  transition: height 0ms 3000ms, opacity 3000ms 0ms;
	  }
	  .slideshow figure.visible {
		  height: auto;
		  opacity: 1;
		  transition: height 0ms 0ms, opacity 3100ms 0ms;
	  }
	  .slideshow figure figcaption {
		  position: absolute;
		  bottom: 20px;
		  right: 20px;
		  font-size: 0.775em;
		  color: #999;
	  }
  
  .github {
	  line-height: 1.3em;
	  font-size: 0.875rem;
	  margin-bottom: 60px;
	  padding: 0;
  }
	  .github li {
		  margin-bottom: 20px;
		  display: flex;
	  }
	  .github .date {
		  flex: 15%;
		  color: #888;
	  }
	  .github .name {
		  flex: 20%;
	  }
	  .github .desc {
		  flex: 65%;
	  }
  
  
  .projects {
	  margin-top: 60px;
  }
	  .projects .status,
	  .projects .tags {
		  color: #888;
	  }
	  .projects h3 {
		  margin: 0 0 0 0;
	  }
	  .projects h3 a {
		  padding-bottom: 5px;
		  display: inline-block;
		  border-bottom: 1px solid #ddd;
		  text-decoration: none;
	  }
	  .projects h3 a span {
		  color: #888;
		  margin-right: 15px;
	  }
	  .projects li p {
		  margin: 15px 0 .5em 0;
	  }
	  .projects li {
		  margin-bottom: 2em;
		  display: flex;
	  }
	  .projects .desc {
		  flex: 70%;
	  }
	  .projects .thumb {
		  flex: 30%;
		  text-align: right;
	  }
  
  
  .footer {
	  text-align: center;
	  color: #999;
	  margin: 30px 0;
  }
	  .footer a {
		  color: #666;
	  }
	  .footer a:hover {
		  color: #ff3300;
	  }
  
  .big {
	  margin-bottom: 45px;
  }
  .rss {
	  float: right;
	  font-size: 0.875rem;
  }
  .posts .title {
	  margin: 0 0 15px 0;
  }
	  .date {
		  color: #666;
	  }
	  .posts .post {
		  margin-bottom: 45px;
	  }
  
  .recent-posts li {
	  margin-bottom: 25px;
	  line-height: 1.2rem;   
  }
	  .recent-posts .date {
		  display: block;
		  font-size: 0.875rem;
	  }
  
  .tag-cloud {
	  margin-top: 20px;
  }
  
  .tag-cloud a {
	  margin-right: 15px;
  }
  
  .tags a {
	  display: inline-block;
	  border: 1px solid #333;
	  border-radius: 3px;
	  padding: 0px 6px;
	  color: #333;
	  line-height: 20px;
	  font-size: 0.85em;
	  text-decoration: none;
	  margin: 0 10px 0 0;
  }
  
  .pagination {
	  margin: 0;
	  padding: 0;
	  text-align: left;
	  display: flex;
	  justify-content: space-between;
  }
  
  .pagination li {
	  list-style: none;
	  display: inline-block;
	  margin: 0;
	  padding: 0;
  }
  
  .pagination .page-prev {
	  margin-right: 20px;
	  padding-right: 20px;
  }
  
  .pagination .page-item.page-prev {
	  text-align: left;
  }
  
  .pagination .page-item.page-next {
	  text-align: right;
  }
  
  @media screen and (min-width: 1800px) {
	  body {
		  font-size: 26px;
		  line-height: 1.4;
	  }
	  .container {
		  max-width: 1300px;
	  }
  }
  
  @media (max-width: 925px) {
	  body {
		  font-size: 20px;
		  line-height: 1.4em;
	  }
  
	  .wrap {
		  padding: 30px 15px;
	  }
  
	  .header {
		  display: block;
		  text-align: center;
		  margin-bottom: 45px;
	  }
		  .header .logo {
			  margin-bottom: 20px;
		  }
  
	  .header .nav {
		  display: flex;
		  justify-content: center;
	  }
	  .header .nav a {
		  margin: 0 15px;
		  display: inline-block;
	  }
	  .slogan {
		  text-align: center;
	  }
	  .photo {
		  float: none;
		  text-align: center;
	  }
	  .slideshow {
		  margin: 0 -30px;
	  }
	  .float-right {
		  float: none;
	  }
		  figure.float-right {
			  margin: 15px 0;
		  }
  
	  ul {
		  padding: 0;
	  }
	  .github li {
		  display: block;
	  }
  
	  .projects li {
		  display: block;
		  margin-bottom: 3em;
	  }
	  .projects .thumb {
		  text-align: left;
	  }
	  .projects .desc p {
		  margin: 0;
	  }
	  .projects .status {
		  display: block;
		  margin-bottom: 15px;
	  }
	  .projects .tags {
		  margin: 0;
	  }
  
	  .half {
		  max-width: none;
	  }
  
	  .post .footnote {
		  padding: 15px;
		  max-width: none;
	  }
  }


  