@import "output.css";
@import "font.css";
@import "https://www.nerdfonts.com/assets/css/webfont.css";

:root {
  --hover-glow: 120%;
  --default-padding: 0.8rem;
  --margin-top: 1rem;
  --border-radius: 0.5rem;

  /*   Catpuccin */
  --mocha-base: #1e1e2e;
  --mocha-text: #cdd6f4;
  --mocha-pink: #f5c2e7;
  --mocha-mauve: #cba6f7;
  --mocha-red: #f38ba8;
  --mocha-maroon: #eba0ac;
  --mocha-peach: #fab387;
  --mocha-yellow: #f9e2af;
  --mocha-green: #a6e3a1;
  --mocha-teal: #94e2d5;
  --mocha-sky: #89dceb;
  --mocha-sapphire: #74c7ec;
  --mocha-blue: #89b4fa;
  --mocha-lavender: #b4befe;
  --mocha-text: #cdd6f4;
  --mocha-subtext1: #bac2de;
  --mocha-subtext0: #a6adc8;
  --mocha-overlay2: #9399b2;
  --mocha-overlay1: #7f849c;
  --mocha-overlay0: #6c7086;
  --mocha-surface2: #585b70;
  --mocha-surface1: #45475a;
  --mocha-surface0: #313244;
  --mocha-base: #1e1e2e;
  --mocha-mantle: #181825;
  --mocha-crust: #11111b;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation: none;
}

.post-content {

  code {
    font-size: 1rem;
    font-family: maple-mono;
    background-color: var(--mocha-mantle);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    text-align: start;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.875rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  a:not(:has(sup)) {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--mocha-lavender);
  }

  hr {
    color: var(--mocha-surface0);
    border: 1px solid;
  }

  section[role="doc-endnotes"] {

    hr {
      margin-bottom: var(--default-padding);
    }

    li {
      list-style: numbered inside;

      &::marker {
        color: var(--mocha-surface0)
      }

      p {
        display: inline;
      }
    }

    a[role="doc-backlink"] {
      display: none;
    }

  }

  blockquote {
    &.note {
      border-color: var(--mocha-blue);
    }

    &.tip {
      border-color: var(--mocha-green);
    }

    &.important {
      border-color: var(--mocha-mauve);
    }

    &.warning {
      border-color: var(--mocha-yellow);
    }

    &.caution {
      border-color: var(--mocha-red);
    }

    padding: var(--default-padding);
    background-color: var(--mocha-mantle);
    border-left: solid 0.8rem;
    border-color: var(--mocha-lavender);
    border-radius: var(--border-radius);
  }


  /* CODE HIGHLIGHTS */

  pre:has(code) {
    padding: var(--default-padding);
    background-color: var(--mocha-mantle);
    overflow-x: scroll;
    border-radius: var(--border-radius);
  }

  pre code {

    .hl-comment {
      color: #5f5f87;
      font-style: italic;
    }

    .hl-function {
      color: #89b4fa;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }

    .hl-keyword {
      color: #cba6f7;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }

    .hl-module {
      color: #cdd6f4;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }

    .hl-number {
      color: #fab387;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }


    .hl-operator {
      color: #89dceb;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }


    .hl-string {
      color: #a6e3a1;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }

    .hl-variant {
      color: #f9e2af;

      &:hover {
        filter: brightness(var(--hover-glow));
      }
    }
  }

  /* END OF CODE HIGHLIGHTS */

}