html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

figcaption,
figure,
main {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:active,
a:hover {
  outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: inherit; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

audio,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html [type="button"]
[type="reset"]
[type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

/**
 * Set up here the general appearance of the theme.
 */
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

h1, h2, h3, h4 {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal; }

pre {
  background: #282a36;
  width: 100%;
  padding: 1.25rem 0;
  color: #ffffff;
  margin: 1.875rem 0;
  font-size: 0.875rem; }
  @media (min-width: 37.5rem) {
    pre {
      font-size: 1rem;
      padding: 2.5rem 0;
      margin: 3.125rem 0; } }
  pre code {
    width: auto;
    max-width: 50rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    padding: 0 1.25rem; }
    pre code::after {
      content: '';
      display: table;
      clear: both; }
    @media (max-width: 37.4rem) {
      pre code {
        overflow-x: scroll; } }
  pre span {
    line-height: 1.5rem;
    font-family: "Monaco", "Consolas", "Menlo", monospace; }

.highlight {
  margin: 1.25rem 0; }
  @media (min-width: 37.5rem) {
    .highlight {
      word-wrap: break-word;
      margin: 1.8125rem 0; } }
  .highlight .hll {
    background-color: #282a36; }
  .highlight .c,
  .highlight .cm,
  .highlight .cp,
  .highlight .c1,
  .highlight .cs {
    color: #6272a4; }
  .highlight .err {
    color: #ff5555;
    background-color: #282a36; }
  .highlight .kc,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt,
  .highlight .no {
    color: #66d9ef; }
  .highlight .l,
  .highlight .mf,
  .highlight .mh,
  .highlight .mi,
  .highlight .mo,
  .highlight .se,
  .highlight .il {
    color: #ae81ff; }
  .highlight .p,
  .highlight .nx {
    color: #f7f7f2; }
  .highlight .ni,
  .highlight .nn,
  .highlight .py,
  .highlight .nv,
  .highlight .w,
  .highlight .bp,
  .highlight .vc,
  .highlight .vg,
  .highlight .vi {
    color: #50fa7b; }
  .highlight .nl {
    color: #8be9fd; }
  .highlight .n,
  .highlight .nb,
  .highlight .m {
    color: #bd93f9; }
  .highlight .nt,
  .highlight .k,
  .highlight .kn,
  .highlight .kd,
  .highlight .o,
  .highlight .ow {
    color: #ff79c6; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .ld,
  .highlight .s,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .s2,
  .highlight .sh,
  .highlight .si,
  .highlight .sx,
  .highlight .sr,
  .highlight .s1,
  .highlight .ss,
  .highlight .vglnk {
    color: #f1fa8c; }
  .highlight .na,
  .highlight .nc,
  .highlight .nd,
  .highlight .ne,
  .highlight .nf {
    color: #50fa7b; }

body {
  overflow-x: auto; }
  @media (min-width: 37.5rem) {
    body {
      padding: 3.125rem 1.875rem; } }
  body img {
    max-width: 100%;
    margin: 0 auto 1.25rem;
    display: block;
    padding: 10px 0; }
    @media (min-width: 37.5rem) {
      body img {
        margin: 0 auto 1.8125rem; } }
  body figure {
    margin: 0; }
  body figcaption,
  body img + em {
    display: block;
    color: #a6a6a6;
    text-align: center;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal; }
  body p,
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6,
  body ul,
  body ol,
  body iframe,
  body div[class^="css"] {
    width: auto;
    max-width: 50rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    letter-spacing: 0.05rem;
    padding: 0 1.25rem;
    margin: 0 auto 1.25rem; }
    body p::after,
    body h1::after,
    body h2::after,
    body h3::after,
    body h4::after,
    body h5::after,
    body h6::after,
    body ul::after,
    body ol::after,
    body iframe::after,
    body div[class^="css"]::after {
      content: '';
      display: table;
      clear: both; }
    @media (min-width: 37.5rem) {
      body p,
      body h1,
      body h2,
      body h3,
      body h4,
      body h5,
      body h6,
      body ul,
      body ol,
      body iframe,
      body div[class^="css"] {
        font-size: 1.25rem;
        line-height: 2.5rem;
        margin: 0 auto 1.8125rem;
        padding: 0; } }
  body h1.post-title {
    margin: 0 auto;
    line-height: 2.5rem; }
    @media (min-width: 37.5rem) {
      body h1.post-title {
        line-height: 3.75rem;
        margin: 0 auto 0.625rem; } }
  body p.post-subtitle {
    color: #a6a6a6;
    font-size: 1.0625rem;
    margin: 0 auto 0.625rem;
    line-height: 1.875rem; }
    @media (min-width: 37.5rem) {
      body p.post-subtitle {
        font-size: 1.25rem;
        line-height: 2.5rem; } }
  body img.post-cover {
    margin-bottom: 1.25rem; }
    @media (min-width: 37.5rem) {
      body img.post-cover {
        margin-bottom: 1.8125rem; } }
  body p.post-info {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: #a6a6a6;
    margin: 0 auto; }
    @media (min-width: 37.5rem) {
      body p.post-info {
        font-size: 1rem; } }
    body p.post-info span,
    body p.post-info time {
      vertical-align: middle; }
    body p.post-info time {
      margin-right: 0.625rem; }
      @media (min-width: 37.5rem) {
        body p.post-info time {
          margin-right: 1.875rem; } }
    body p.post-info svg {
      width: 0.9375rem;
      height: 0.9375rem;
      fill: #a6a6a6;
      vertical-align: middle;
      margin-right: 0.3125rem; }
  body li {
    padding: 0.625rem 0; }
    body li ul {
      margin-bottom: 0; }
  body p,
  body li {
    color: #333333; }
    body p code,
    body li code {
      font-size: 0.9375rem;
      color: #bf616a;
      word-wrap: break-word;
      background: #f2f2f2;
      padding: 0.1875rem 0.3125rem;
      border-radius: 3px; }
      @media (min-width: 37.5rem) {
        body p code,
        body li code {
          font-size: 1.0625rem; } }
  body a {
    color: #0000ee;
    text-decoration: none; }
  body iframe {
    margin-top: 1.875rem;
    width: 100%; }
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal; }
  body h1 {
    font-size: 2rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      body h1 {
        font-size: 2.9375rem; } }
  body h2 {
    font-size: 1.5rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      body h2 {
        font-size: 2.3125rem; } }
  body h3 {
    font-size: 1.25rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      body h3 {
        font-size: 1.6875rem; } }
  body ul,
  body ol {
    padding-left: 2.5rem; }
  body ul.post-list {
    padding: 0; }
    @media (max-width: 37.4rem) {
      body ul.post-list {
        padding: 0 1.25rem; } }
  body blockquote {
    width: auto;
    max-width: 45.625rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    border-left: 0.3125rem solid #333333;
    padding: 0 0.625rem;
    margin: 1.875rem auto;
    width: 90%; }
    body blockquote::after {
      content: '';
      display: table;
      clear: both; }
    @media (min-width: 37.5rem) {
      body blockquote {
        width: 100%;
        margin: 3.125rem auto;
        padding: 0 1.875rem; } }
    body blockquote p {
      font-size: 1.0625rem;
      color: rgba(0, 0, 0, 0.6);
      margin: 0; }
      @media (min-width: 37.5rem) {
        body blockquote p {
          font-size: 1.25rem; } }
  body hr {
    width: auto;
    max-width: 47.5rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #f2f2f2;
    margin: 50px auto; }
    body hr::after {
      content: '';
      display: table;
      clear: both; }
  body hr.page-divider {
    width: auto;
    max-width: 47.5rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    margin: 50px auto;
    position: relative;
    height: 3.375rem; }
    body hr.page-divider::after {
      content: '';
      display: table;
      clear: both; }
    body hr.page-divider:after {
      display: block;
      content: "Page divider";
      padding: 0.3125rem 0.625rem;
      border: 2px solid #ff0a16;
      border-radius: 0.3125rem;
      font-size: 0.875rem;
      font-weight: bold;
      color: #ff0a16;
      text-align: center;
      text-transform: uppercase; }
  body pre {
    overflow-x: auto;
    position: relative; }
    body pre:before {
      display: inline-block;
      content: "In the website, the code will be highlighted.";
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 0.9375rem;
      font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 0.875rem;
      background-color: #ff0a16;
      color: #fff; }
  body table {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 2.1875rem;
    letter-spacing: 0.05rem;
    margin: 3.125rem auto; }
    @media (min-width: 37.5rem) {
      body table {
        font-size: 1.25rem; } }
    body table th,
    body table td {
      border: 0.0625rem solid #ccc;
      padding: 0.3125rem 0.625rem; }
      @media (min-width: 37.5rem) {
        body table th,
        body table td {
          border: 0.125rem solid #ccc;
          padding: 0.625rem 1.25rem; } }
  body td > pre {
    padding: 0;
    margin: 0; }

.img-rounded {
  border-radius: 50%; }