@charset "UTF-8";
body, html {
  height: 100%;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 16px; }

a {
  color: #00626e; }

body {
  background: #ffffff; }

.wrapper {
  min-height: 100%;
  max-width: 100%;
  overflow: hidden; }
  .wrapper .top {
    background: #a1c8cc;
    color: #00353b;
    box-shadow: inset 0 -0.5rem 0.5rem -0.25rem rgba(0, 0, 0, 0.1); }
    .wrapper .top .top-content {
      max-width: 40em;
      margin: 0 auto;
      padding: 0 2em; }
      .wrapper .top .top-content a {
        color: #00353b; }
      .wrapper .top .top-content .arrow-up {
        display: block;
        width: 0;
        height: 0;
        margin-left: 1.1rem;
        border-left: 0.6rem solid transparent;
        border-right: 0.6rem solid transparent;
        border-bottom: 0.6rem solid #ffffff;
        box-shadow: inset 0 -10px 10px -5px rgba(0, 0, 0, 0.1); }
      .wrapper .top .top-content header {
        white-space: nowrap;
        display: inline-block; }
        .wrapper .top .top-content header .name-box {
          display: inline-block;
          color: inherit;
          text-decoration: none;
          vertical-align: middle;
          margin: 0 1rem 0 0;
          text-align: right;
          font-size: 1.5em;
          padding: 1rem 0; }
          .wrapper .top .top-content header .name-box .profile-pic {
            width: 3.2rem;
            margin: 0.2rem 0.6rem 0.2rem 0;
            border: 0.1rem solid #ffffff;
            border-radius: 8rem;
            display: inline-block;
            vertical-align: inherit; }
      .wrapper .top .top-content .sections, .wrapper .top .top-content .social-links {
        display: inline-block; }
        .wrapper .top .top-content .sections .section-link, .wrapper .top .top-content .sections .social-button, .wrapper .top .top-content .social-links .section-link, .wrapper .top .top-content .social-links .social-button {
          padding: 0.25rem 0.5rem;
          margin: 0 0.25rem 1rem;
          color: #00353b;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 90%; }
          .wrapper .top .top-content .sections .section-link:hover, .wrapper .top .top-content .sections .social-button:hover, .wrapper .top .top-content .social-links .section-link:hover, .wrapper .top .top-content .social-links .social-button:hover {
            text-decoration: underline; }
          .wrapper .top .top-content .sections .section-link.social-button, .wrapper .top .top-content .sections .social-button.social-button, .wrapper .top .top-content .social-links .section-link.social-button, .wrapper .top .top-content .social-links .social-button.social-button {
            font-size: 1.2rem; }
  .wrapper .main {
    background: #ffffff;
    color: #2e3440;
    min-height: 100%; }
    .wrapper .main .main-content {
      padding: 2em;
      line-height: 1.5;
      max-width: 40em;
      margin: 0 auto; }
      .wrapper .main .main-content a.title-link {
        color: #12505c;
        text-decoration: none;
        display: block; }
        .wrapper .main .main-content a.title-link:hover {
          color: #095965; }
      .wrapper .main .main-content .breadcrumbs {
        color: #abb3c2;
        font-weight: bold;
        text-transform: uppercase; }
        .wrapper .main .main-content .breadcrumbs + h1, .wrapper .main .main-content .breadcrumbs + a > h1, .wrapper .main .main-content .breadcrumbs + h2, .wrapper .main .main-content .breadcrumbs + a > h2 {
          margin-top: 0; }
        .wrapper .main .main-content .breadcrumbs a {
          color: inherit; }
        .wrapper .main .main-content .breadcrumbs .separator:before {
          content: "/"; }
      .wrapper .main .main-content h1 {
        line-height: 1.1em;
        letter-spacing: -0.03rem; }
      .wrapper .main .main-content h2 {
        font-weight: normal;
        opacity: 0.9; }
      .wrapper .main .main-content h3 {
        text-transform: uppercase;
        color: #979aa0; }
      .wrapper .main .main-content .featured {
        margin: 1em 0; }
        .wrapper .main .main-content .featured h3 {
          display: inline-block; }
        .wrapper .main .main-content .featured a {
          margin-left: 0.6rem;
          text-decoration: none; }
          .wrapper .main .main-content .featured a:before {
            content: "";
            font-family: "ForkAwesome";
            margin-right: 0.3rem; }
      .wrapper .main .main-content .post-link {
        background: #12505c;
        color: #ffffff;
        font-size: 1rem;
        display: inline-block;
        padding: 0 0.6rem 0 0.6rem;
        vertical-align: middle;
        margin-left: 0.6rem;
        text-decoration: none; }
        .wrapper .main .main-content .post-link .icon {
          margin-right: 0.6rem; }
      .wrapper .main .main-content img {
        max-width: 100%; }
      .wrapper .main .main-content ul.with-icons {
        list-style-type: none;
        padding-left: 0.6rem; }
        .wrapper .main .main-content ul.with-icons li > .icon {
          display: inline-block;
          width: 1.2rem;
          text-align: center;
          margin-right: 0.6rem; }
      .wrapper .main .main-content article {
        margin-bottom: 4rem; }
        .wrapper .main .main-content article .date {
          color: #abb3c2;
          font-weight: bold;
          text-transform: uppercase; }
          .wrapper .main .main-content article .date + h1, .wrapper .main .main-content article .date + a > h1, .wrapper .main .main-content article .date + h2, .wrapper .main .main-content article .date + a > h2 {
            margin-top: 0; }
        .wrapper .main .main-content article code {
          font-family: Inconsolata, monospace, monospace;
          background: #f2f2f2; }
        .wrapper .main .main-content article pre {
          background: #f2f2f2;
          max-width: 100%;
          overflow-x: auto;
          padding: 0.2rem 0.6rem; }
        .wrapper .main .main-content article kbd {
          background: white;
          padding: 0.1rem 0.3rem;
          border: 1px solid #e6e6e6;
          font-size: 0.8rem;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
          border-radius: 0.2rem; }
        .wrapper .main .main-content article .note {
          border: 1px solid #e6e6e6;
          padding: 0.2rem 0.6rem;
          color: #6f7d98; }
          .wrapper .main .main-content article .note:before {
            content: "Nota";
            font-weight: bold;
            margin-right: 0.6rem; }
        .wrapper .main .main-content article.lang-en .note:before {
          content: "Note"; }
        .wrapper .main .main-content article .fig {
          border: 1px solid #e6e6e6;
          padding: 0.2rem 0.6rem;
          text-align: center;
          font-style: italic; }
          .wrapper .main .main-content article .fig img {
            display: block;
            margin: 0 auto 0.2rem; }
          .wrapper .main .main-content article .fig.medium img {
            max-height: 24rem; }
          .wrapper .main .main-content article .fig.small img {
            max-height: 12rem; }
        .wrapper .main .main-content article .tags:before {
          content: "";
          font-family: "ForkAwesome";
          font-size: 1rem;
          color: #979aa0; }
        .wrapper .main .main-content article .tags a {
          display: inline-block;
          margin-left: 0.6rem; }
      .wrapper .main .main-content .pagination {
        width: 100%;
        text-align: right; }
        .wrapper .main .main-content .pagination .note {
          color: #979aa0;
          display: inline-block;
          padding: 0.2rem 0.6rem; }
        .wrapper .main .main-content .pagination a {
          display: inline-block;
          text-decoration: none;
          padding: 0.2rem 0.6rem;
          margin: 0 0 0.2rem;
          border: 0.1rem solid #e6e8ed; }
      .wrapper .main .main-content article.home {
        font-size: 1.4em; }
      .wrapper .main .main-content .archive-post {
        margin: 0 0 0.2rem;
        color: #abb3c2;
        font-weight: bold; }
        .wrapper .main .main-content .archive-post a {
          font-weight: normal; }
  .wrapper footer {
    border-top: 1px solid #d5d6d9;
    padding: 1em;
    margin: 1em -1em;
    color: #979aa0; }
    .wrapper footer a {
      color: inherit;
      text-decoration: none;
      font-size: small; }

.big-text {
  font-size: 300%;
  letter-spacing: -0.05em;
  line-height: normal; }

@media (min-width: 64em) {
  body {
    font-size: 18px; } }
@media (min-width: 654em) {
  body {
    font-size: 18px; }

  .wrapper .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 24rem; }
    .wrapper .sidebar .side-content {
      padding: 6rem 2rem 2rem;
      text-align: right; }
      .wrapper .sidebar .side-content header .profile-pic {
        margin-right: -5.25rem; }
      .wrapper .sidebar .side-content .sections .section-link {
        border: 0px solid;
        display: block;
        padding: 0.7rem 0;
        margin: 0; }
  .wrapper .main {
    margin-left: 24rem; }
    .wrapper .main .main-content {
      padding: 8.6rem 5rem 2rem;
      margin: 0; }
      .wrapper .main .main-content h1 {
        font-size: 220%;
        margin-top: 0; }
      .wrapper .main .main-content article.home {
        margin-top: 7rem; } }