@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,900" rel="stylesheet">');

* {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale !important;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

body {
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  line-height: 170%;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: fuchsia;
  text-decoration-style: wavy;
  border: 2px dotted transparent;
  display: inline-block;
}

a:active {
  border-color: black;
}

ol a {
  text-decoration: none;
}

ol a:hover {
  text-decoration: underline;
}

h1 {
  line-height: 140%;
  font-weight: 900;
  font-size: 250%;
}

h2,h3,h4,h5 {
  /*margin-top: 50px;*/
}

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

.wrapper {
  max-width: 750px;
  margin: 0 auto;
}

blockquote {
  margin: 50px 0 50px 50px;
}

.pubdate {
  font-size: 80%;
  color: #666;
}

/********************************************************** CODE HIGHLIGHTING */

pre, code {
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 500;
}

pre {
  font-size: 80%;
  margin: 20px;
  background: #eee;
}

p > code {
  background: rgb(48, 46, 46);
  padding: 1px 0.95rem 2px;
  border-radius: 1em;
  font-size: 70%;
  font-weight: 600;
  color: #fff;
  display: inline;
  -webkit-box-decoration-break: clone;
  cursor:crosshair;
}

p > code:hover {
  background: fuchsia;
}

/***************************************************************** OL COUNTER */

ol {
  list-style: none;
  counter-reset: li;
}

ol li {
  counter-increment: li;
}

ol li::before {
  content: counter(li) ".";
  color: #ccc;
  font-weight: 500;
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.9em;
  text-align: right;
}

ol li a {
  text-decoration: none;
}

/********************************************************************* TABLES */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 90%;
  text-align: left;
  margin-top: 50px;
  margin-bottom: 50px;
}

th,td {
  border-bottom: 2px solid #888;
  padding: 10px;
}

th {
  font-size: 130%;
}

tr:last-child td {
  border-width: 0;
}

/****************************************************************** FOOTNOTES */

.footnotes p {
  padding: 0;
  display: inline-block;
  margin: 0;
}

.footnotes-sep {
  border: 0;
}

/************************************************* BGCOLOR WHEN TEXT SELECTED */

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

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

/********************************************************** CUSTOM SCROLLBARS */

pre::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: transparent;
}

pre::-webkit-scrollbar-thumb {
  background: #ddd;
}

/*************************************************************** HEADER + NAV */

menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 80%;
  padding: 0;
  padding-top: 10px;
  margin-bottom: 40px;
}

menu a.logo {
  background: black;
  color: white;
  font-weight: 800;
  text-decoration: none;
  padding: 3px 15px;
}

menu a.logo:hover {
  background: fuchsia;
  color: white;
}

menu nav {
  text-align: right;
  margin-top: 3px;
}

menu nav a {
  padding-top: 8px;
  margin-left: 25px;
}

menu nav a svg {
  width: 20px;
  height: 20px;
}

/********************************************************************* FOOTER */

footer {
  padding-top: 50px;
  padding-bottom: 50px;
  font-weight: 500;
  font-size: 80%;
}

footer > * {
  text-decoration: none;
  margin-right: 20px;
  color: #333;
}

/*************************************************************** ARTICLE LIST */

.article-list article {
  margin-bottom: 20px;
}

.article-list article h2 {
  margin: 0;
  line-height: 150%;
}

.article-list a {
  text-decoration: none;
}

/***************************************************************** RESPONSIVE */

@media only screen and (max-width:800px) {
  body {
    font-size: 16px;
  }

  .wrapper {
    padding: 10px 20px !important;
  }

  h1 {
    font-size: 200%;
  }

  footer {
    text-align: center;
  }
}

/********************************************************************** PRINT */

@media print {
  nav, footer {
      display: none;
  }
}