@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/Inconsolata-Regular.eot");
  src: local("Inconsolata"), local("Inconsolata-Regular"), url("/fonts/Inconsolata-Regular.woff") format("woff"), url("/fonts/Inconsolata-Regular.ttf") format("truetype"), url("/fonts/Inconsolata-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/Inconsolata-Bold.eot");
  src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url("/fonts/Inconsolata-Bold.woff") format("woff"), url("/fonts/Inconsolata-Bold.ttf") format("truetype"), url("/fonts/Inconsolata-Bold.svg") format("svg");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/SourceSansPro-Regular.eot");
  src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url("/fonts/SourceSansPro-Regular.woff") format("woff"), url("/fonts/SourceSansPro-Regular.ttf") format("truetype"), url("/fonts/SourceSansPro-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/SourceSansPro-Bold.eot");
  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("/fonts/SourceSansPro-Bold.woff") format("woff"), url("/fonts/SourceSansPro-Bold.ttf") format("truetype"), url("/fonts/SourceSansPro-Bold.svg") format("svg");
  font-weight: bold;
  font-style: normal; }
body {
  font-size: 18px;
  line-height: 1.52;
  font-family: 'Inconsolata', monospaced;
  background-color: #f0544c; }
  @media only screen and (max-width: 780px) {
    body {
      font-size: 14px; } }
  @media only screen and (min-width: 781px) and (max-width: 1369px) {
    body {
      font-size: 18px; } }
  @media only screen and (min-width: 1370px) {
    body {
      font-size: 22px; } }

.content-wrap {
  width: 34em;
  margin: 0 auto; }

body, a {
  color: #ffffff;
  text-decoration: none;
  margin: 0;
  padding: 0; }

a {
  padding-bottom: 2px;
  border-bottom: 2px #ffffff solid; }

a:hover {
  color: #2d2d2d;
  text-decoration: none;
  border-bottom: 2px #2d2d2d solid; }

p {
  margin-bottom: 1.52em; }

.index {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0; }

.index-logo {
  position: absolute;
  left: 0;
  right: 3em;
  top: 2em;
  height: 3.68em;
  border: 0; }
  .index-logo:hover {
    border: 0; }
  .index-logo::before {
    content: "";
    position: absolute;
    width: calc(100% + 3.68em/18 - 11.1375em);
    top: 9%;
    bottom: 9%;
    background-image: url(/pic/logo-sin-white.svg);
    background-size: contain;
    background-position-x: 100%;
    opacity: 0.2; }
  .index-logo::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 11.1375em;
    right: 0;
    background-image: url(/pic/logo-text-bgf0544c.svg);
    background-size: contain; }

.index-intro {
  position: absolute;
  top: calc(50% + 3em);
  width: 20em;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  text-transform: lowercase; }
  .index-intro .portfolio {
    width: 100%;
    text-align: center; }
  .index-intro .tags {
    text-align: center;
    opacity: 0.6; }
  .index-intro .icons {
    text-align: center; }
    .index-intro .icons a {
      border: 0; }

.index-posts {
  position: absolute;
  top: 40%;
  max-width: 30em;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-transform: lowercase; }
  .index-posts ul {
    list-style-type: ''; }
  .index-posts .post-title {
    display: block;
    float: left; }
  .index-posts .post-date {
    display: block;
    float: right;
    opacity: 0.6; }

.icon {
  display: inline-block;
  fill: #ffffff;
  width: 64px;
  height: 64px; }

a .icon {
  opacity: 0.6; }
  a .icon:hover {
    opacity: 1; }

article {
  position: absolute;
  top: 40%;
  max-width: 30em;
  left: 0;
  right: 0;
  margin: 0 auto; }
  article h1 {
    font-family: 'Source Sans Pro', sans;
    margin-left: -2em;
    font-size: 3em; }
  article .header {
    font-size: 0.85em;
    opacity: 0.6; }

code {
  font-family: 'Inconsolata', monospaced; }

/*
 * this is mostly generated by pandoc
 */
div.sourceCode {
  overflow-x: auto;
  background-color: black;
  margin: 0 -2em;
  padding: 0 2em;
  border-radius: 6px; }

table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: none; }

table.sourceCode {
  width: 100%;
  line-height: 100%; }

td.lineNumbers {
  text-align: right;
  padding-right: 4px;
  padding-left: 4px;
  color: #aaaaaa;
  border-right: 1px solid #aaaaaa; }

td.sourceCode {
  padding-left: 5px; }

code > span.kw {
  color: #f0dfaf; }

/* Keyword */
code > span.dt {
  color: #dfdfbf; }

/* DataType */
code > span.dv {
  color: #dcdccc; }

/* DecVal */
code > span.bn {
  color: #dca3a3; }

/* BaseN */
code > span.fl {
  color: #c0bed1; }

/* Float */
code > span.ch {
  color: #dca3a3; }

/* Char */
code > span.st {
  color: #cc9393; }

/* String */
code > span.co {
  color: #7f9f7f; }

/* Comment */
code > span.ot {
  color: #efef8f; }

/* Other */
code > span.al {
  color: #ffcfaf; }

/* Alert */
code > span.fu {
  color: #efef8f; }

/* Function */
code > span.er {
  color: #c3bf9f; }

/* Error */
code > span.wa {
  color: #7f9f7f;
  font-weight: bold; }

/* Warning */
code > span.cn {
  color: #dca3a3;
  font-weight: bold; }

/* Constant */
code > span.sc {
  color: #dca3a3; }

/* SpecialChar */
code > span.vs {
  color: #cc9393; }

/* VerbatimString */
code > span.ss {
  color: #cc9393; }

/* SpecialString */
/* Import */
/* Variable */
code > span.cf {
  color: #f0dfaf; }

/* ControlFlow */
code > span.op {
  color: #f0efd0; }

/* Operator */
/* BuiltIn */
/* Extension */
code > span.pp {
  color: #ffcfaf;
  font-weight: bold; }

/* Preprocessor */
/* Attribute */
code > span.do {
  color: #7f9f7f; }

/* Documentation */
code > span.an {
  color: #7f9f7f;
  font-weight: bold; }

/* Annotation */
code > span.cv {
  color: #7f9f7f;
  font-weight: bold; }

/* CommentVar */
code > span.in {
  color: #7f9f7f;
  font-weight: bold; }

/* Information */