@import "pygments.css";

:root {
  --gray-000: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --red: #fa5252;
  --pink: #e64980;
  --grape: #be4bdb;
  --purple: #7950f2;
  --indigo: #4c6ef5;
  --blue: #228be6;
  --cyan: #15aabf;
  --teal: #12b886;
  --green: #40c057;
  --yellow: #fab005;
  --orange: #fd7e14;


  --body-font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --body-font-size: 20px;
  --body-line-height: 1.5;
  --body-color: hsl(0, 0%, 85%);
  --body-bg: hsl(200, 3%, 12%);

  --link-color: rgba(255, 255, 255, 0.75);
  --link-hover-color: #fff;

  --heading-color: var(--body-color);

  --border-color: rgba(255, 255, 255, 0.15);
  --border-radius: 0.5rem;

  --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --code-color: var(--grape);
  --code-bg: var(--gray-900);
  --code-filename-bg: var(--gray-800);
  --code-inline-bg: var(--gray-800);
}

* {
  box-sizing: border-box;
}

input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

img {
  display: block;
  max-width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

body {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background-color: var(--body-bg);
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-align: justify;
}

a {
  color: var(--link-color);
}

a:hover, a:focus {
  color: var(--link-hover-color);
}

body {
  width: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;

  > .container {
    max-width: 45rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;

    > header {
      padding-top: 2.5rem;
      padding-bottom: 1rem;
      margin-bottom: 3rem;
      overflow: hidden;

      a {
        color: inherit;
        text-decoration: none;
      }
      nav {
        float: right;
        line-height: 1.25rem;
        word-spacing: 1rem;
      }
    }
  } 
}

section {
  margin-bottom: 3rem;
}

.badges {
  display: flex;
  gap: 0.5rem;

  a.badge {
    display: inline-block;
    img {
      display: block;
      margin-bottom: 0;
    }
  }
}

.blog-year-section {
  margin-bottom: 3rem;
  ul {
    list-style-type: none;
  }
}


code,
pre {
  font-family: var(--code-font);
}

code {
  font-size: 85%;
}

/* Styles for single-backtick */
code {
  background-color: var(--code-inline-bg);
  border-radius: 0.3rem;
  padding: 0.1rem 0.3rem;
  overflow-wrap: break-word;
}

/* Styles for triple-backtick */
figure.codeblock {
  margin: 0;
  overflow: hidden;

  figcaption {
    background: var(--code-filename-bg);
    color: #bbb;
    font-family: var(--code-font);
    font-size: 80%;
    padding: 0.7rem 1rem;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    margin-bottom: 0;
  }

  .highlight {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

figure.img-figure {
  figcaption {
    font-size: 90%;
    text-align: center;
    margin-top: 0.4rem;
    font-style: italic;
  }
}

.highlight {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--code-bg);
  border-radius: var(--border-radius);

  pre {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    overflow: auto;
  }

  code {
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
    border-radius: 0;
  }
}