@import url("/static/css/syntax-light.css") only screen and (prefers-color-scheme: light);
@import url('/static/css/syntax-dark.css') only screen and (prefers-color-scheme: dark);

@font-face {
  font-family: 'Gentium Plus';
  src: url('/static/fonts/GentiumPlus-Regular.woff2');
}

@font-face {
  font-family: 'Gentium Plus';
  font-style: italic;
  src: url('/static/fonts/GentiumPlus-Italic.woff2');
}

@font-face {
	font-family: 'Gentium Plus';
	font-weight: bold;
	src: url('/static/fonts/GentiumPlus-Bold.woff2');
}

@font-face {
	font-family: 'Gentium Plus';
	font-weight: bold;
	font-style: italic;
	src: url('/static/fonts/GentiumPlus-BoldItalic.woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url('/static/fonts/NunitoSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url('/static/fonts/NunitoSans.woff2') format('woff2');
}

/*
 * pico.css variables overrides
 */

:root {
  --pico-font-family: 'Gentium Plus', serif, var(--pico-font-family-emoji);
  --pico-font-family-sans-serif: 'Nunito Sans', sans-serif, var(--pico-font-family-emoji);
  --pico-card-sectioning-background-color: transparent;
  --pico-typography-spacing-vertical: calc(1.5 * var(--pico-spacing));
}

@media only screen and (prefers-color-scheme: light) {
  :root:not([data-theme=dark]), [data-theme=light] {
    --pico-background-color: rgb(247 249 252 / 100%);
    --pico-card-background-color: rgb(255 255 255 / 100%);
    --pico-card-sectioning-background-color: transparent;
    --pico-code-color: inherit;

    --color-codeblock-meta-background: rgb(255 255 255 / 100%);
    --markup-color: rgb(194 198 207 / 100%);
  }

  .admonition.warning {
    --admonition-background-color: rgb(255 240 219 / 100%);
    --admonition-border-color: rgb(255 208 143 / 100%);
  }

  .admonition.note {
    --admonition-background-color: rgb(219 238 255 / 100%);
    --admonition-border-color: rgb(142 202 255 / 100%);
  }
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-code-color: inherit;

    --color-codeblock-meta-background: rgb(0 0 0 / 30%);
    --markup-color: rgb(89 94 104 / 100%);
  }

  .admonition.warning {
    --admonition-background-color: rgb(52 46 38 / 100%);
    --admonition-border-color: rgb(255 208 143 / 100%);
  }

  .admonition.note {
    --admonition-background-color: rgb(48 59 68 / 100%);
    --admonition-border-color: rgb(142 202 255 / 100%);
  }
}

article {
  --pico-card-box-shadow: none;
}

header nav :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]),:hover,:active,:focus),
header nav [role="link"]:is([aria-current]:not([aria-current="false"]),:hover,:active,:focus) {
  --pico-text-decoration: none;
}

article :where(a:not([role="button"])) {
  --pico-text-decoration: none;
}

body > :is(main, footer) {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;

  @media (width >= 1024px) {
    margin-right: 0;
    margin-left: 18em;
  }
}

/*
 * Layout Styling
 */ 

.mobile-header {
  padding: 0 var(--pico-block-spacing-horizontal);
  position: sticky;
  top: 0;
  left: 0;
  background-color: rgb(from var(--pico-background-color) r g b / 80%);
  backdrop-filter: blur(3px);
  font-family: var(--pico-font-family-sans-serif);
  font-weight: bold;

  @media (width >= 1024px) {
    display: none;
  }

  img {
    height: 2em;
  }
}

#menu-close {
  float: right;
  padding: 0 1.5em;
}

#menu-close, #menu-close:hover, #menu-toggle {
  color: inherit;
  background-color: inherit;
  border: none;
  text-decoration: none;

  @media (width >= 1024px) {
    display: none;
  }
}

body {
  background-color: var(--pico-background-color);

  & > header {
    width: 100dvw;
    text-align: center;
    height: 100dvh;
    position: fixed;
    left: -100vw;
    top: 0;
    background-color: var(--pico-background-color);
    z-index: 100;
    transition: left 0.5s;
    overflow: hidden auto;

    &.active {
        left: 0;
    }

    @media (width >= 1024px) {
      position: sticky;
      top: 0;
      left: 0;
      width: 15em;
      float: left;
    }

    .u-logo {
      width: 5em;
    }

    .title {
      font-size: 1.5rem;
      font-weight: bold;
      font-family: var(--pico-font-family-sans-serif);
      margin-top: 1em;
    }

    a {
      color: var(--pico-color);
      padding: 0;

      .menu-primary & {
        font-weight: bold;
      }
    }

    nav {
      font-size: 1rem;
      font-family: var(--pico-font-family-sans-serif);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      ul {
        flex-direction: column;
      }

      li {
        padding: 0;
        padding: calc( var(--pico-nav-element-spacing-vertical) / 4)
          calc( var(--pico-nav-element-spacing-horizontal) / 4);
      }
    }
  }

  & > footer{
    p {
      font-size: 0.7em;
      text-align: center;
    }
  }
}



/*
 * Content Styling
 */

main {
  .translations {
    text-align: end;
    margin-block-end: 0.3em;
    padding-inline-end: 2em;
    font-size: 0.9em;

    a {
      text-decoration: none;
    }
  }

  & > article {
    text-align: justify;

    & > header {
      margin-bottom: calc(2 * var(--pico-block-spacing-vertical));

      h1, p {
        margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical));
        margin-top: 0.3em;
      }

      @media (width >= 1024px) {
        .metadata p {
          display: inline;
        }
      }

      .tags i {
        margin-inline-start: 0.5em;
      }

      .category a {
        font-family: var(--pico-font-family-sans-serif);
        font-weight: 700;
        line-height: var(--pico-line-height);
        color: var(--pico-muted-color);
        text-decoration: none;
        font-size: 1rem;
        margin-bottom: 0.5em;
      }
    }

    section.table-of-contents {
      font-size: 0.9em;
      margin-block-end: 2em;


      p {
        margin-bottom: 0; /* reset pico styles */
        margin-block-end: 0.2em;
        margin-inline-start: 0.5em;
        font-weight: bold;

        &::before {
          font-family: "remixicon";
          font-weight: normal;
          margin-inline-end: 0.5em;
          content: "\eebb";
        }
      }

      nav {
        margin-inline-start: 1em;
        padding-inline-start: 1em;
        border-inline-start: 1px solid var(--pico-muted-color);

        ol {
          &:last-of-type {
            margin-right: initial; /* reset pico styles */
          }

          &:first-of-type {
            margin-left: initial; /* reset pico styles */
          }
          
          li {
            display: list-item; /* reset pico styles */
            padding: initial; /* reset pico styles */
            list-style-type: none;

            ol {
              margin-inline-start: 1em !important;
            }
          }
        }
      }
    }

    :where(ol,ul) li {
      margin-bottom: 0;;
    }

    ul li {
      list-style-type: disc;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--pico-font-family-sans-serif);
      text-align: left;

      a {
        color: var(--pico-muted-color);
        text-decoration: none;
        margin-left: 0.4rem;
        font-size: 1rem;
      }
    }

    h1 {
      font-size: 1.7rem;
    }

    h2 {
      font-size: 1.3rem;

      &::before {
        content: "## ";
        color: var(--markup-color);
      }
    }

    h3 {
      font-size: 1.2rem;

      &::before {
        content: "### ";
        color: var(--markup-color);
      }
    }

    h4 {
      font-size: 1.1rem;

      &::before {
        content: "#### ";
        color: var(--markup-color);
      }
    }

    h5 {
      font-size: 1rem;

      &::before {
        content: "##### ";
        color: var(--markup-color);
      }
    }

    h6 {
      font-size: 1rem;

      &::before {
        content: "###### ";
        color: var(--markup-color);
      }
    }

    pre {
      margin-bottom: calc(1.5 * var(--pico-spacing));
    }

    code, kbd, pre {
      font-size: 0.8em;
    }

    a[rel="external"]::after {
      content: "\ecae";
      font-size: 0.7em;
      margin-left: 0.2em;
      font-family: 'remixicon' !important;
      font-style: normal;
      color: var(--pico-muted-color);
      text-decoration: none;
    }

    figure {
      max-width: 50%;
      text-align: center;
      margin: var(--pico-block-spacing-vertical) auto;
    }
  }
}


/*
 * Admonitions
 */

.admonition {
  font-size: 0.9em;
  padding: 1em;
  border-left: solid 4px var(--admonition-border-color);
  background-color: var(--admonition-background-color);
  margin-bottom: var(--pico-typography-spacing-vertical);
  border-radius: var(--pico-border-radius);
}

/*
 * Post lists
 */

.h-feed {
  article{
    &:not(:last-child) {
      border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
      margin-bottom: 0;
    }

    p {
      margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical));
    }

    .p-summary {
      font-size: 0.9em;
      font-style: italic;
    }
  }
}

/*
 * Code blocks
 */

.highlight {
  position: relative;

  > div {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5em 1.2em;
    color: var(--pico-muted-color);
    background-color: var(--color-codeblock-meta-background);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.7em;
    line-height: 1em;
    border-end-start-radius: var(--pico-border-radius);

    span {
      border-inline-start: inset 1px var(--pico-muted-color);
      padding-inline-start: 1em;
      margin-inline-start: 1em;
      cursor: pointer;

      &::before {
        content: "\ecd5";
        font-family: "remixicon";
        font-weight: normal;
        margin-inline-end: 0.5em;
      }

      &.copied::before {
        content: "\eb7b";
      }

      &.not-copied::before {
        content: "\eca1";
      }
    }
  }
}