* {
  box-sizing: border-box;
}

body {
    line-height: 150%;
    margin-bottom: 100px;
}

main {
    max-width: 740px;
    padding: 20px 30px;
}

nav {
    margin-bottom: 50px;
}

nav a {
    display: inline-block;
    margin-right: 20px;
}

h1 {
    font-size: 280%;
    line-height: initial;
}

h2 {
    font-size: 200%;
    line-height: initial;
}

h3 {
    font-size: 160%;
    line-height: initial;
}

img {
    max-width: 100%;
    margin: 30px auto;
    display: block;
}

ul.article-list li {
  margin-bottom: 10px;
}

ul.article-list li div {
  display: flex;
}

ul.article-list time {
  display: inline-block;
  min-width: 130px;
}


article .info {
    font-style: oblique;
}

pre {
    overflow: auto;
}

table {
    width: 100%;
}

table, th, td {
    border: 1px solid black;
    text-align: left;
}

th, td {
    padding: 5px 10px;
}

p.modified {
    font-style: oblique;
    font-size: 90%;
    margin-top: 50px;
}

::selection {
    background: #ff0;
    color: #000;
}

::-moz-selection {
    background: #ff0;
    color: #000;
}


.comments {
  margin-top: 50px;
}
.comments ul {
  margin-top: 30px;
  padding-left: 15px;
}
.comments ul li {
  margin-bottom: 20px;
}
.comments input,
.comments textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid lightgray;
}
.comments textarea {
  resize: vertical;
  height: 100px;
}

@media only screen and (max-width:480px) {
    main {
        padding: 20px;
    }

    nav {
        text-align: center;
        margin-bottom: initial;
    }

    nav a {
        margin-bottom: 10px;
    }

    ul.article-list {
        padding-left: 20px;

    }

    ul.article-list li {
        margin-bottom: 20px;

    }

    ul.article-list a {
        display: block;
    }

    h1 {
        font-size: 220%;
    }

    h2 {
        font-size: 180%;
    }

    h3 {
        font-size: 160%;
    }
}

/* prism theme */

/**
 * GHColors theme by Avi Aryan (http://aviaryan.in)
 * Inspired by Github syntax coloring
 */

 code[class*="language-"],
 pre[class*="language-"] {
     color: #393A34;
     font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
     direction: ltr;
     text-align: left;
     white-space: pre;
     word-spacing: normal;
     word-break: normal;
     font-size: .75em;
     line-height: 1.2em;

     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;

     -webkit-hyphens: none;
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
 }

 pre > code[class*="language-"] {
     font-size: 1em;
 }

 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
     background: #b3d4fc;
 }

 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
     background: #b3d4fc;
 }

 /* Code blocks */
 pre[class*="language-"] {
     padding: 1em;
     margin: .5em 0;
     overflow: auto;
     border: 1px solid #dddddd;
     background-color: white;
 }

 /* Inline code */
 :not(pre) > code[class*="language-"] {
     padding: .2em;
     padding-top: 1px; padding-bottom: 1px;
     background: #f8f8f8;
     border: 1px solid #dddddd;
 }

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
     color: #999988; font-style: italic;
 }

 .token.namespace {
     opacity: .7;
 }

 .token.string,
 .token.attr-value {
     color: #e3116c;
 }
 .token.punctuation,
 .token.operator {
     color: #393A34; /* no highlight */
 }

 .token.entity,
 .token.url,
 .token.symbol,
 .token.number,
 .token.boolean,
 .token.variable,
 .token.constant,
 .token.property,
 .token.regex,
 .token.inserted {
     color: #36acaa;
 }

 .token.atrule,
 .token.keyword,
 .token.attr-name,
 .language-autohotkey .token.selector {
     color: #00a4db;
 }

 .token.function,
 .token.deleted,
 .language-autohotkey .token.tag {
     color: #9a050f;
 }

 .token.tag,
 .token.selector,
 .language-autohotkey .token.keyword {
     color: #00009f;
 }

 .token.important,
 .token.function,
 .token.bold {
     font-weight: bold;
 }

 .token.italic {
     font-style: italic;
 }