@charset "UTF-8";
#main-grid {
  display: grid;
  grid-template-areas: "navbar" "content" "footer"; }
  @media screen and (min-width: 64em) {
    #main-grid {
      grid-template-columns: 1fr min-content;
      grid-template-areas: "content navbar" "footer footer"; } }
  #main-grid > .navbar {
    grid-area: navbar; }
  #main-grid > .content {
    grid-area: content; }
  #main-grid > .footer {
    grid-area: footer; }
  #main-grid > * {
    min-width: 0; }

/* Color palette */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

a {
  text-decoration: none;
  color: #355A7F; }
  a:hover, a:focus {
    text-decoration: underline; }

.navbar {
  background: white;
  top: auto;
  text-align: center;
  margin: 1em auto 0; }
  @media screen and (min-width: 64em) {
    .navbar {
      text-align: left;
      margin: 2em 0 0 0;
      padding-right: 2em; } }
  .navbar a:active img {
    position: relative;
    top: 5px; }
  .navbar .nav-list {
    padding-left: 0em;
    list-style: none; }
    @media screen and (min-width: 64em) {
      .navbar .nav-list {
        padding-left: 0.5em; } }
  .navbar .nav-item {
    white-space: nowrap;
    margin: 5px;
    font-size: 135%; }
    @media not screen and (min-width: 64em) {
      .navbar .nav-item {
        display: inline-block; } }
    .navbar .nav-item a {
      text-align: left;
      text-decoration: none;
      background-clip: border-box;
      display: inline-block;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      color: #355A7F;
      background-color: inherit;
      padding: 0.5em 1em; }
      @media screen and (min-width: 64em) {
        .navbar .nav-item a {
          width: 100%;
          padding: 0.5em; } }
      .navbar .nav-item a:hover, .navbar .nav-item a:focus, .navbar .nav-item a:active {
        text-decoration: none; }
      .navbar .nav-item a:hover, .navbar .nav-item a:focus {
        color: #282828;
        background-color: #6B83FF;
        background-image: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box; }
      .navbar .nav-item a:active {
        color: #ADADAD;
        background-color: #000880;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box; }
    .navbar .nav-item .fa {
      width: 1.25em;
      text-align: left; }
  .navbar .nav-item-active {
    text-shadow: 0px 0px 20px #355A7F;
    font-weight: bold; }
  .navbar .brand-title {
    margin: 0;
    font-size: 3em;
    text-transform: lowercase; }
  .navbar .brand-tagline {
    margin: 0;
    font-weight: 300;
    color: #355A7F; }

.content {
  padding: 1em 0em 0; }
  @media screen and (min-width: 64em) {
    .content {
      padding: 2em 2em 0 2em; } }
  .content img, .content video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100% !important;
    border: 0;
    padding: 0.2em;
    height: auto;
    object-fit: cover; }
  .content .cover {
    background-image: url("/default-cover.jpg");
    background-position: center center;
    background-size: cover;
    padding: 50px 15px 90px 15px; }
    @media screen and (min-width: 64em) {
      .content .cover {
        padding: 70px 120px 120px 120px; } }
    .content .cover .title-box {
      padding: 20px;
      background: rgba(34, 34, 34, 0.75);
      text-align: center;
      font-weight: normal; }
      .content .cover .title-box h1 {
        font-size: 225%; }
      .content .cover .title-box, .content .cover .title-box a {
        color: #fefefe; }
      .content .cover .title-box h1 {
        margin-bottom: 50px;
        font-weight: bolder;
        font-size: 175%;
        text-align: center; }
      .content .cover .title-box p {
        font-style: italic;
        text-align: center; }
  .content .post-meta {
    background-color: #0000001a;
    padding: 0.1em;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between; }
    .content .post-meta .postdate {
      margin: 0.5em; }
      .content .post-meta .postdate:before {
        content: "📅\a0"; }
    .content .post-meta .readingtime {
      margin: 0.5em; }
      .content .post-meta .readingtime:before {
        font-family: 'Segoe UI Emoji';
        content: "⏱\a0"; }
    .content .post-meta .post-tags {
      text-align: left;
      padding: 0;
      margin: 0.5em;
      flex-basis: 100%; }
      .content .post-meta .post-tags .post-tag {
        display: inline;
        white-space: nowrap;
        padding: 0.1em 0.5em 0.2em;
        margin-right: 0.25em;
        color: #ADADAD;
        background: #355A7F;
        line-height: 1.9em; }
        .content .post-meta .post-tags .post-tag a {
          color: #ADADAD; }
          .content .post-meta .post-tags .post-tag a:hover, .content .post-meta .post-tags .post-tag a:focus, .content .post-meta .post-tags .post-tag a:active {
            text-decoration: none;
            color: #CACACA;
            background: #355A7F; }
        .content .post-meta .post-tags .post-tag .fa {
          width: 1.25em;
          text-align: left; }
  .content .post {
    margin: 1em 0em;
    box-shadow: 5px 5px 5px 2px #00000011; }
    .content .post:first-child {
      margin-top: 0; }
    .content .post a {
      text-decoration: underline; }
  .content .post-contents {
    padding: 0em 1em 0.25em; }
  .content .post, .content .tagcloud {
    color: #333;
    text-align: justify; }
    .content .post h1, .content .post h2, .content .post h3, .content .post h4, .content .post h5, .content .post h6, .content .tagcloud h1, .content .tagcloud h2, .content .tagcloud h3, .content .tagcloud h4, .content .tagcloud h5, .content .tagcloud h6 {
      text-align: left; }
    .content .post h1, .content .tagcloud h1 {
      font-size: 200%; }
    .content .post h2, .content .tagcloud h2 {
      font-size: 175%; }
    .content .post h3, .content .tagcloud h3 {
      font-size: 150%; }
    .content .post h4, .content .tagcloud h4 {
      font-size: 133%; }
    .content .post h5, .content .tagcloud h5 {
      font-size: 120%; }
    .content .post h6, .content .tagcloud h6 {
      font-size: 110%; }
    .content .post .post-title, .content .tagcloud .post-title {
      font-size: 225%;
      color: #222;
      margin-bottom: 0.2em; }
    .content .post .post-read-on-link, .content .tagcloud .post-read-on-link {
      text-align: right; }
  .content .tagcloud li {
    list-style-type: none; }
  .content .tagcloud h2 {
    margin: 1em 0; }
  .content .tagcloud h3 {
    font-size: 150%;
    margin: 0.5em 0; }
  .content .tagcloud .tagcloud-taglist {
    padding-left: 0; }
    .content .tagcloud .tagcloud-taglist .tagcloud-tag-postlist {
      padding-left: 1em;
      margin-bottom: 2em; }

.pagination {
  margin-top: 1em;
  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
  justify-content: space-between;
  font-size: 120%; }
  .pagination .pagination-left {
    text-align: center; }
    .pagination .pagination-left a:before {
      content: "<\a0"; }
  .pagination .pagination-right {
    text-align: center; }
    .pagination .pagination-right a:after {
      content: "\a0>"; }
  .pagination a {
    text-decoration: none;
    background-clip: border-box;
    display: block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #355A7F;
    background-color: inherit;
    padding: 0.5em 1em; }
    .pagination a:hover, .pagination a:focus, .pagination a:active {
      text-decoration: none; }
    .pagination a:hover, .pagination a:focus {
      color: #282828;
      background-color: #6B83FF;
      background-image: none;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box; }
    .pagination a:active {
      color: #ADADAD;
      background-color: #000880;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box; }

.footer {
  text-align: center;
  margin: 1em 0em; }

pre {
  overflow: auto; }

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

.hljs {
  border: 1px solid #222; }

.gallery {
  margin: 0.5em; }
  .gallery img {
    padding: 0.1em; }

iframe, object, embed {
  max-width: 100%;
  height: auto; }

table {
  background-color: white;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb; }
  table thead {
    background-color: #e0e0e0;
    color: black;
    text-align: left;
    vertical-align: bottom; }
  table td, table th {
    border-left: 1px solid #cbcbcb;
    border-left-width: 1px;
    border-width: 0 0 0 1px;
    border-left-width: 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em; }
  table tr:nth-child(2n-1) td {
    background-color: #f2f2f2; }

blockquote {
  display: block;
  overflow: auto;
  margin: 0 0 20px;
  padding: 0.25em 1em 0.25em 1em;
  background: #e3e3e34d;
  /*Font*/
  font-family: Georgia, serif;
  text-align: justify;
  /*Borders - (Optional)*/
  border-left: 0.5ex solid #ccc;
  /*Box Shadow - (Optional)*/
  box-shadow: 2px 2px 5px #a7a7a766; }
  blockquote p:first-child {
    margin-top: 0.5em; }
  blockquote p:last-child {
    margin-bottom: 0.5em; }