html, body {
  width: 100vw;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Share Tech Mono', monospace;
}

p {
  font-family: 'Oxygen Mono', monospace;
}

code {
  background-color: #e3e3e3;
  font-size: 130%;
  border-radius: 5px;
}

.heading {
  height: 200px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#articleTitle, #createdOn {
  width: calc(90% - 50px);
  margin: 0 auto 0 50px;
}

#articleText p {
  font-family: 'Playfair Display', serif;
  font-size: 110%;
  line-height: 30px;
  width: 80%;
  margin: 50px auto;
}

#articleText ul {
  list-style-type: none;
}

#articleText {
 margin-bottom: 100px;
}

#articleText .subtitle {
  text-align: center;
  width: 70%;
  margin: 0 auto 70px auto;
  line-height: 30px;
  font-size: 120%;
}

.articleList  {
  width: 80%;
  margin: 0 auto;
  font-family: 'Oxygen Mono', monospace;
}

.articleList li {
  margin: 40px 0;
  /* text-indent: -35px; */
}

.indented {
  margin: 10px 0 0 10px !important;
  text-indent: -35px;
}

.articleList li svg {
  margin: 0 10px;
}

.textNumbers {
  margin: 15px auto !important;
  width: 60% !important;
  text-indent: -18px;
}

.contentHeading {
  width: 80%;
  margin: 40px auto 30px auto;
  color: #7EAFA5;
  font-size: 200%;
  text-align: center;
}

.contentImg {
  display: block;
  margin: 0 auto;
  max-width: 100%
}

.screenshot {
  display: block;
  width: 80%;
  margin: 0 auto;
  border: thin solid #e3e3e3;
}

.divider {
  height: 1px;
  width: 80%;
  margin: 30px auto 100px auto;
  background-color: #d3d3d3;
}

.menuIcon {
  text-align: center;
  width: 100% !important;
  padding-top: 20%;
  color: #ffffff;
}

#articleContent, #footer {
  position: relative;
  left: 200px;
  width: calc(100vw - 200px);
}

.codeTitle {
  width: 80%;
  margin: 0 auto;
}

.codeComment {
  margin: 0 auto !important;
  font-size: 90% !important;
  line-height: 20px !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.codeComment.larger {
  font-size: 100% !important;
  line-height: 25px !important;
}

.codeBlock {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  overflow: scroll;
  white-space: nowrap;
}

#footer {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 750px) {
  #articleContent {
    left: 0;
    width: 100vw !important;
  }

  .screenshot {
    width: 95%;
  }
}

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal !important;}
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #858585; }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}