/**
* Layout
*/

body {
  background: #fbfbfb;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*::selection{
  background: #9c27b0;
  color: #fff;
}*/

#article-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50px;
  overflow-y: scroll;
  overflow-x: hidden;
}


/**
* Text Mode
*/

article.text-mode {
  padding: 40px 15px 100px;
  max-width: 700px;
  margin: 0 auto;
}

article.text-mode header {
  margin: 40px 0 20px;
}

article.text-mode header .title {
  text-align: center;
  margin: 0;
  font-size: 44px;
}

article.text-mode .content {
  font-size: 20px;
  font-family: Georgia, Times, "Times New Roman", serif;
  line-height: 1.6;
  overflow: hidden;
}

article.text-mode h1,
article.text-mode h2,
article.text-mode h3,
article.text-mode h4,
article.text-mode h5,
article.text-mode h6 {
  font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  line-height: 1.1;
  padding: 25px 0 15px;
}

article.text-mode img {
  max-width: 100% !important;
  height: auto; /* prevent image from being distorted */
}

article.text-mode img.full-width {
  width: 100%;
}

article.text-mode img.block-image {
  display: block;
  margin: 0 auto;
}

article.text-mode video {
  width: 100%;
}

article.text-mode iframe.video {
  width: 700px;
  height: 394px; /* 16:9 aspect ratio */;
  border: none;
}

article.text-mode span img {
  vertical-align: middle;
}

article.text-mode blockquote {
  margin: 0;
  padding: 0 15px;
  color: #777;
  border-left: 4px solid #ddd;
}

article.text-mode figure {
  margin: 0;
  font-size: 14px;
  color: #666;
}

article.text-mode hr {
  background-color: #ddd;
  border: 0;
  height: 1px;
  margin: 15px 0;
}

article.text-mode a {
  text-decoration: none;
  color: #c00;
}

article.text-mode a:hover, a:active {
  text-decoration: underline;
}

article.text-mode .float {
  font-size: 15px;
}

article.text-mode .float.right {
  float: right;
  margin-left: 20px;
}

article.text-mode .float.left {
  float: left;
  margin-right: 20px;
}

article.text-mode .float .float {
  margin: 0;
}

article.text-mode .float img {
  margin-top: 10px;
}

article.text-mode pre {
  color: #ddd;
  font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  background: #282a36;
  margin: 0;
  padding: 0.5em 1em;
  border: none;
  border-radius: 5px;
  box-shadow: none;
}

article.text-mode code {
  font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;
  line-height: 1.4;
  margin: 0;
  padding: 0.2em 0;
  font-size: 90%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

article.text-mode pre > code {
  margin: 0;
  padding: 0;
  font-size: 100%;
  word-break: normal;
  background: transparent;
  border: 0;
}

article.text-mode ol {
  list-style-type: decimal;
}

article.text-mode table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-top: 0;
  margin-bottom: 16px;
}

article.text-mode table th {
  font-weight: bold;
}

article.text-mode table th,
article.text-mode table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

article.text-mode table tr {
  border-top: 1px solid #ccc;
}

article.text-mode table th {
  background-color: #efeeed;
}

article.text-mode table img {
  max-width: none !important;
}


/**
* Markdown Mode
*/

article.markdown-mode {
  padding: 100px 20px;
  max-width: 850px;
  margin: 0 auto;
  display: none;
}

.hljs {
  display: block;
  color: #545454;
  font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;
  font-size: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

.hljs-comment,
.hljs-quote {
  color: #696969;
}

.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #d91e18;
}

.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #aa5d00;
}

.hljs-attribute {
  color: #aa5d00;
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #008000;
}

.hljs-title,
.hljs-section {
  color: #007faa;
  font-weight: bold;
}

.hljs-keyword,
.hljs-selector-tag {
  color: #7928a1;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}


/**
* Sidebar
*/

#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  background: #69249a;
}

#sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar ul li {
  height: 50px;
  cursor: pointer;
}

#sidebar ul li.icon-close {
  margin-bottom: 50px;
}

#sidebar ul li:hover {
  background-color: #8512d6; /* #560f88 */
}

.icon-close {
  background: url('images/icon-close.png') center center no-repeat;
  background-size: 22px 22px;
}

.icon-clip {
  background: url('images/icon-clip.png') center center no-repeat;
  background-size: 25px 25px;
}

.icon-print {
  background: url('images/icon-print.png') center center no-repeat;
  background-size: 23px 23px;
}

.icon-markdown.on {
  background: url('images/icon-markdown-on.png') center center no-repeat;
  background-size: 30px 20px;
}

.icon-markdown.off {
  background: url('images/icon-markdown-off.png') center center no-repeat;
  background-size: 30px 20px;
}


/**
* Print
*/

@media print {
  #article-container {
    position: static;
    display: block;
    width: auto;
    height: auto;
  }

  article.text-mode {
    padding: 40px 15px;
  }

  article.markdown-mode {
    padding: 20px;
  }

  #sidebar {
    display: none !important;
  }
}
