:root {
  --sidebar-font-size: 1.5rem;
  --sidebar-font-color: #fff;
  --sidebar-width: 0px; /* overridden by media queries */

  --main-font-family: "Open Sans", sans-serif;
  --main-font-size: 1rem;
  --main-font-color: rgb(95, 95, 95);
  --main-bg-color: #fff;

  --content-header-height: 35px;

  --post-title-font-color: #555;
  --post-timestamp-font-color: #777;
  --post-meta-font-size: calc(var(--main-font-size) * 0.9);
  --post-max-width: 1200px;

  --code-font-family:
    "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo,
    Consolas, Monaco, monospace;
  --code-font-size: 0.9rem;
  --code-background-color: #f8f8f8;

  --border-color: #eef2f8;
  --border-radius: 5px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--main-font-family);
  font-size: var(--main-font-size);
  line-height: 1.9em;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: subpixel-antialiased;

  font-family:
    "Ubuntu", "Myriad Pro", "Trebuchet MS", Helvetica, "Open Sans", sans-serif;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.sidebar,
#content-body,
#content-header,
#content-footer {
  transition: 0.5s cubic-bezier(0.36, -0.01, 0, 0.77);
}

/* SIDEBAR */

.sidebar {
  position: fixed;
  top: 0;
  width: var(--sidebar-width);
  left: 0;
  height: 100%;
  overflow: auto;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  container-type: inline-size; /* for the @container queries */

  font-size: var(--sidebar-font-size);
  color: var(--sidebar-font-color);
  line-height: calc(var(--sidebar-font-size) * 1.8);

  background-image: url("/images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  #sidebar-close-button {
    visibility: hidden;
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 30;

    cursor: pointer;
  }

  .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    margin-bottom: 30px;

    .profile-picture {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-bottom: 10px;
    }

    .profile-bio,
    .profile-name {
      font-weight: 400;
      margin: 0;
      margin-bottom: 10px;
      line-height: 1.5em;
      text-align: center;
    }

    .profile-name {
      font-size: calc(var(--sidebar-font-size) * 0.9);
    }

    .profile-bio {
      font-size: calc(var(--sidebar-font-size) * 0.65);
      font-weight: 300;
    }
  }

  .site-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;

    a {
      color: var(--sidebar-font-color);
    }

    .main-menu {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;

      list-style: none;
      margin: 0;
      padding: 0;
      padding-bottom: 30px;

      font-size: calc(var(--sidebar-font-size) * 0.9);
      font-weight: 500;

      li {
        white-space: nowrap;
        .text {
          font-size: calc(var(--sidebar-font-size) * 0.65);
          margin-left: 10px;
        }
      }
    }
  }
}

.sidebar.open {
  #sidebar-close-button {
    visibility: visible;
  }
}

.sidebar.closed {
  left: calc(-1 * var(--sidebar-width)) !important;
}

@media only screen and (min-width: 1280px) {
  :root {
    --sidebar-width: 450px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --sidebar-width: 200px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --sidebar-width: 75px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --sidebar-width: 0px;
  }
}

@container (width: 450px) {
  .site-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    .main-menu {
      width: 30% !important;
      margin: 0 20px !important;
    }
  }
}

@container (width: 200px) {
  .profile {
    display: none !important;
  }

  .site-nav {
    width: unset !important;
  }
}

@container (width: 75px) {
  .profile {
    display: none !important;
  }

  .site-nav {
    .main-menu {
      align-items: center !important;
      .text {
        display: none !important;
      }
    }
  }
}

/* MAIN CONTENT */

#content-body,
#content-header,
#content-footer {
  float: right;
  width: 100%;
}

.sidebar.init-open:not(.open) ~ #content-body,
.sidebar.init-open:not(.open) ~ #content-header,
.sidebar.init-open:not(.open) ~ #content-footer {
  width: calc(100% - var(--sidebar-width));
}
.sidebar.init-open.closed ~ #content-body,
.sidebar.init-open.closed ~ #content-header,
.sidebar.init-open.closed ~ #content-footer,
.sidebar:not(.init-open) ~ #content-body,
.sidebar:not(.init-open) ~ #content-header,
.sidebar:not(.init-open) ~ #content-footer {
  width: 100%;
}

#content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  height: var(--content-header-height);

  position: sticky;
  top: 0;
  padding: 5px 0;

  background-color: var(--main-bg-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--post-title-font-color);

  #open-sidebar {
    cursor: pointer;
    margin-left: 20px;
  }

  #title {
  }

  .profile-picture {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 20px;
    vertical-align: middle;
  }
}

#content-body {
  /* using flex display makes mobile view not to fit on screen */
  display: block;
  & > * {
    width: 90%;
    max-width: var(--post-max-width);
    margin: 0 auto 1rem auto;
  }

  color: var(--main-font-color);
  background-color: var(--main-bg-color);

  h1 {
    font-size: calc(var(--main-font-size) * 2);
    margin-top: 30px;
    margin-bottom: 25px;
  }
  h2 {
    font-size: calc(var(--main-font-size) * 1.8);
    margin-top: 24px;
    margin-bottom: 18px;
  }
  h3 {
    font-size: calc(var(--main-font-size) * 1.6);
    margin-top: 20px;
    margin-bottom: 12px;
  }
  h4 {
    font-size: calc(var(--main-font-size) * 1.4);
    margin-top: 10px;
    margin-bottom: 6px;
  }
  h5 {
    font-size: calc(var(--main-font-size) * 1.2);
    margin-top: 10px;
    margin-bottom: 6px;
  }
}

/* LISTS & POSTS & ARTICLES */

.post-snippet,
.post,
.article,
.taxonomy {
  display: flex;

  .post-content,
  .post-summary,
  .article-content {
    text-rendering: optimizeLegibility;
    text-align: justify;

    img {
      display: block;
      max-width: 100%;
      width: auto;
      height: auto;
      margin: 20px 0;

      &.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      &.alignleft {
        float: left;
        margin-right: 20px;
      }
      &.alignright {
        float: right;
        margin-left: 20px;
      }
    }

    pre,
    .highlight {
      margin-left: auto;
      margin-right: auto;

      background-color: var(--code-background-color);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: 5px 10px;
      overflow-x: auto;

      font-family: var(--code-font-family);
      font-size: var(--code-font-size) !important;

      pre {
        background-color: var(--code-background-color) !important;
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
        letter-spacing: 0;
        line-height: 1.5;
      }
    }

    blockquote {
      margin: 1.5em 0;
      padding: 0 20px;

      border-left: 3px solid var(--border-color);
      color: var(--main-font-color);

      p {
        margin: 0;
        font-style: italic;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      text-align: left;

      thead {
        display: table-header-group;
        vertical-align: middle;
      }
      tr {
        display: table-row;

        &:nth-child(2n) {
          background: #f7f8f8;
        }
      }
      th {
        padding: 5px 10px;
        font-weight: 700;
        border-bottom: 2px solid #909ba2;
      }
      td {
        padding: 5px 10px;
      }
    }

    .alert {
      position: relative;
      min-height: 30px;

      margin: 1em;
      padding: 15px;
      padding-left: 55px;

      border: none;
      border-left: 3px solid;

      text-align: left;
      word-break: break-word;

      p {
        margin: 0;
      }

      &:before {
        position: absolute;
        top: 15px;
        left: 15px;

        font-family: "Font Awesome 6 Free";
        font-weight: 600;
        font-size: calc(var(--main-font-size) * 1.5);
      }

      &.info {
        border-color: #349ef3;
        background-color: #e6f3fe;

        &:before {
          content: "";
          color: #349ef3;
        }
      }

      &.success {
        border-color: #4dc657;
        background-color: #effaf0;

        &:before {
          content: "";
          color: #4dc657;
        }
      }

      &.warning {
        border-color: #f5aa0a;
        background-color: #fdf1d8

        &:before {
          content: "";
          color: #f5aa0a;
        }
      }

      &.danger {
        border-color: #f5311d;
        background-color: #feecea

        &:before {
          content: "";
          color: #f5311d;
        }
      }
    }
  }

  .post-meta {
    margin-top: -15px;
    margin-bottom: 10px;

    font-size: var(--post-meta-font-size);
    color: var(--post-timestamp-font-color);

    .category {
      &:after {
        content: ", ";
      }
      &:last-child {
        &:after {
          content: "";
        }
      }
    }
  }
}

.post-snippet {
  border-bottom: 1px solid var(--border-color);

  &:last-of-type {
    border-bottom: none;
  }

  .post-thumbnail {
    img {
      width: 140px;
      padding: 30px 30px;
    }
  }

  .post-snippet-content {
    margin-bottom: 30px;

    h2 {
      padding-bottom: 0px;
    }
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .post-snippet {
    .post-thumbnail {
      img {
        padding: 30px 15px;
      }
    }
  }
}

@media only screen and (max-width: 1023px) {
  .post-snippet {
    .post-thumbnail {
      display: none;
    }
  }
}

.post,
.article,
.taxonomy {
  flex-direction: column;

  header {
  }

  footer {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;

    .tags {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .label {
        font-size: calc(var(--main-font-size) * 1.2);
      }
      .tag {
        display: inline-block;
        margin: 0px 5px 10px 10px;
        padding: 0px 20px;

        color: var(--main-font-color);
        background-color: var(--border-color);
        border-radius: var(--border-radius);

        font-size: 0.9rem;
      }
    }
  }

  mastodon-comments {
    --font-size: var(--main-font-size);
  }
}

@media only screen and (max-width: 1023px) {
  .post,
  .article,
  .taxonomy {
    mastodon-comments {
      --comment-indent: 20px;
    }
  }
}

@media only screen and (max-width: 767px) {
  .post,
  .article,
  .taxonomy {
    mastodon-comments {
      --comment-indent: 0px;
    }
  }
}

/* PAGINATION */

#pagination {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;

  margin-top: 20px;
  margin-bottom: 20px;

  color: var(--main-font-color);
  font-size: calc(var(--main-font-size) * 1.1);

  .pager {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 5px 10px;
    background-color: #eee;

    &.disabled {
      color: var(--post-timestamp-font-color);
      cursor: not-allowed;
    }
  }
  .pagination-number {
  }
}

#content-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  height: var(--content-header-height);
  margin-top: 20px;

  color: var(--main-font-color);
  background-color: var(--main-bg-color);

  border-top: 1px solid var(--border-color);
}

/* TAXONOMY */

.taxonomy {
  section {
    margin-bottom: 20px;
  }

  ul {
    margin: 0;
    li {
      margin-left: 30px;
    }
  }

  .tag {
    display: inline-block;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1px 8px;
    margin: 3px;
  }

  .taxonomy-block {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;

    &:last-of-type {
      border-bottom: none;
    }
  }
}