@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700&subset=latin-ext";
@import "https://fonts.googleapis.com/css?family=Inconsolata";
* {
  margin: 0;
  padding: 0; }

html {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 300; }

/* General typography */
blockquote {
  margin: 0 1rem 1rem 1rem;
  font-style: italic;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto; }

code, pre {
  font-family: 'Inconsolata', monospace;
  font-weight: 400;
  background-color: #f2f2f2;
  overflow: auto; }

pre {
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem; }

hr {
  clear: both;
  border: 0;
  height: 1px;
  background: #f2f2f2; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300; }

h1 {
  font-size: 2.5em;
  margin-bottom: 0.5em; }

h2 {
  font-size: 1.5em;
  margin-bottom: 0.4em; }

h3 {
  font-size: 1.25em;
  margin-bottom: 0.3em; }

p {
  line-height: 1.5em;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 1em; }

sup {
  line-height: 0; }

ol, ul {
  margin-left: 2rem;
  margin-top: 0.8rem;
  margin-bottom: 1rem; }

ul {
  list-style-type: square; }

li {
  margin-bottom: 0.3em;
  hyphens: auto; }

a:link, a:visited, a:active {
  text-decoration: none;
  color: #70C1B3; }

a:hover {
  text-decoration: underline;
  color: #70C1B3; }

/* Page element sizing and placement */
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #333333;
  margin: 0 auto;
  padding: 0 1rem 0 1rem;
  max-width: 52rem; }

header {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem; }

header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #33658A;
  margin-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; }

header h1 span {
  color: #F7C59F;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; }

header a:hover {
  text-decoration: none; }

header nav ul {
  list-style-type: none;
  flex-grow: 1; }

header nav ul li {
  float: left;
  text-align: right;
  font-size: 1.2rem; }

main {
  flex-grow: 1; }

footer {
  flex-grow: 0;
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 1.5rem; }

footer small {
  color: #aaaaaa; }

/* Article specifics */
article h1 {
  margin-bottom: 0; }

article time:first-of-type {
  font-size: 0.8em;
  color: #aaaaaa;
  margin-bottom: 0.5em; }

article p:first-of-type {
  margin-top: 20px; }

article h2, article h3 {
  margin-top: 1em;
  clear: right; }

div.footnotes {
  border-top: 1px #f2f2f2 solid;
  margin-top: 3rem; }

@media (min-width: 52rem) {
  article figure {
    float: right;
    margin-left: 1.2rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    width: 26rem;
    text-align: right; } }
@media (max-width: 52rem) {
  article figure {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2rem;
    margin-top: 1.2rem;
    width: 100%;
    max-width: 26rem; } }
article figure img {
  margin: 0 auto;
  padding: 0;
  max-width: 100%; }

article figure.full-width {
  width: 100%;
  max-width: 100%; }

figcaption {
  font-style: italic;
  font-size: 1em; }

.highlight .k, .highlight .kd, .highlight .kn, .highlight .ow, .highlight .kr {
  color: #70C1B3; }
.highlight .kt {
  color: #33658A; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .si, .highlight .l, .highlight .sc, .highlight .mi, .highlight .kc {
  color: #EF767A; }
.highlight .n {
  color: #555B6E; }
.highlight .nd {
  color: #F7C59F; }
.highlight .c, .highlight .c1, .highlight .cm {
  color: #aaa; }

.chart-fill-1 {
  fill: #82c9bc; }

.chart-fill-1:hover {
  fill: #70C1B3; }

.chart-point-3 {
  fill: #33658A;
  stroke: none; }

.chart-line-2 {
  stroke: #EF767A;
  stoke-width: 2px;
  fill: none; }

.chart-axis {
  stroke: #999999;
  stroke-width: 1px;
  fill: none; }

.chart-axis-light {
  stroke: #e6e6e6;
  stroke-width: 1px;
  fill: none; }

.chart-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  fill: #333333; }

.chart-label-light {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  fill: #e6e6e6; }

.fixed-ratio-100-50 {
  position: relative;
  width: 100%; }

.fixed-ratio-100-50:before {
  content: "";
  display: block;
  padding-top: 50%; }

.fixed-ratio-100-50 > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

.input-and-action {
  display: flex;
  width: 100%;
  flex-direction: row; }
  .input-and-action input[type="text"] {
    flex: 1;
    height: 1.5rem;
    margin: 0;
    border: 1px solid #ddd;
    padding: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem; }
  .input-and-action input[type="button"] {
    flex: 0;
    margin: 0 0 0 0.7rem;
    background: transparent;
    border: 1px solid #ddd;
    min-width: 5rem;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-block; }
  .input-and-action input[type="button"]:hover {
    background-color: #ddd;
    color: #fff; }

nav.prev-next-posts {
  display: flex;
  justify-content: space-between;
  padding-top: 0.8rem; }
  nav.prev-next-posts p {
    font-size: 1rem;
    margin: 0;
    text-align: inherit; }
  nav.prev-next-posts .prev-post {
    display: inline-block;
    text-align: left; }
  nav.prev-next-posts .next-post {
    display: inline-block;
    text-align: right; }