body {
      font-family: Recursive, sans-serif;
      font-feature-settings: "liga" 1, "dlig" 1;
      font-size: 1.2em;
      margin: 0;
      padding: 20px;
      background-color: #181825;
      color: #cdd6f4;
    }
    article {
      max-width: 800px;
      margin: 0 auto;
      background: #1e1e2e;
            /*background-color: #181825;*/
      padding: 20px;
    }

    /* Flexbox for p and its annotation */
    .paragraph-container {
      display: block;
      align-items: flex-start; /* Align annotation to the top of the paragraph */
      margin-bottom: 20px; /* Add spacing between paragraph blocks */
    }

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    /* Main paragraph */
    .paragraph-container p {
      flex: 1; /* Allow the paragraph to take up as much space as possible */
      margin: 0;
      padding: 10px 0;
    }

    /* Annotation next to the paragraph */
    .annotation {
      flex-shrink: 0; /* Prevent the annotation from shrinking */
      margin-left: 20px; /* Add spacing between the paragraph and annotation */
      padding: 5px 10px;
      font-size: 0.9em;
      color: #555;
      background: #f3f3f3;
      border-left: 3px solid #ddd;
      max-width: 250px; /* Limit the width of annotations */
    }

    /* Hide annotations if empty */
    .annotation:empty {
      display: none;
    }


    footer {
        text-align: center;
        padding: 1rem;
        background: #333;
        color: white;
        font-size: 0.9rem;
    }

    @media (max-width: 600px) {
        .paragraph-container {
            flex-direction: column; /* Stack items vertically */
        }

        .annotation {
            margin-left: 0;
            margin-top: 10px; /* Add space above the annotation */
        }
    }

  header {
            background: #11111b;
            /*background-color: #181825;*/
            color: #fab387;
            padding: 1rem 2rem;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 2rem;
        }

        nav.categories {
            margin-top: 1rem;
        }

        nav.categories a {
            color: white;
            text-decoration: none;
            margin: 0 0.5rem;
            font-weight: bold;
        }

        header a {
            color: white;
            text-decoration: none;
            /*margin: 0 0.5rem;*/
            font-weight: bold;
        }

        nav.categories a:hover {
            text-decoration: underline;
        }


@font-face {
  font-family: 'Recursive';
  src: url('../static/fonts/recursive.woff2') format('woff2'),
       url('../static/fonts/recursive.woff') format('woff'),
       url('../static/fonts/recursive.ttf') format('truetype');
  font-display: swap;
  font-weight: 300 1000;
}

:root {
  --note-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
  --abstract-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
  --question-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
  --warning-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
  --details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z'/></svg>")

  --red: #ff0000;
}


:root .admonition.note {
  border-color:var(--text-color);
  background-color:rgba(0,0,0,0);
  color:var(--text-color);
  color:var(--mauve);
  border-color:var(--mauve)
}
:root .admonition.note.title {
  position:relative;
  padding:.3rem 2.9rem;
  color:var(--mauve)
}
:root .admonition.note.title::before {
  mask-image:var(--note-icon);
  -webkit-mask-image:var(--note-icon);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  content:"";
  top:.3rem;
  left:.6em;
  width:1.8rem;
  height:1.8rem;
  position:absolute;
  background-color:var(--mauve)
}
:root .admonition.hint {
  border-color:var(--text-color);
  background-color:rgba(0,0,0,0);
  color:var(--text-color);
  color:var(--sky);
  border-color:var(--sky)
}
:root .admonition.hint.title {
  position:relative;
  padding:.3rem 2.9rem;
  color:var(--sky)
}
:root .admonition.hint.title::before {
  mask-image:var(--details-icon);
  -webkit-mask-image:var(--details-icon);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  content:"";
  top:.3rem;
  left:.6em;
  width:1.8rem;
  height:1.8rem;
  position:absolute;
  background-color:var(--sky)
}
:root .admonition.warning {
  border-color: #ff0000;
  background-color:rgba(0,0,0,0);
  color:var(--text-color);
  border-color: #ff0000;
}
:root .admonition.warning.title {
  position:relative;
  padding:.3rem 2.9rem;
  color:var(--red)
}
:root .admonition.warning.title::before {
  mask-image:var(--warning-icon);
  -webkit-mask-image:var(--warning-icon);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  content:"";
  top:.3rem;
  left:.6em;
  width:1.8rem;
  height:1.8rem;
  position:absolute;
  background-color:var(--red)
}
:root .admonition.example {
  border-color:var(--text-color);
  background-color:rgba(0,0,0,0);
  color:var(--text-color);
  color:var(--teal);
  border-color:var(--teal)
}
:root .admonition.example.title {
  position:relative;
  padding:.3rem 2.9rem;
  color:var(--teal)
}
:root .admonition.example.title::before {
  mask-image:var(--abstract-icon);
  -webkit-mask-image:var(--abstract-icon);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  content:"";
  top:.3rem;
  left:.6em;
  width:1.8rem;
  height:1.8rem;
  position:absolute;
  background-color:var(--teal)
}
:root .admonition.question {
  border-color:var(--text-color);
  background-color:rgba(0,0,0,0);
  color:var(--text-color);
  color:var(--green);
  border-color:var(--green)
}
:root .admonition.question.title {
  position:relative;
  padding:.3rem 2.9rem;
  color:var(--green)
}
:root .admonition.question.title::before {
  mask-image:var(--question-icon);
  -webkit-mask-image:var(--question-icon);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  content:"";
  top:.3rem;
  left:.6em;
  width:1.8rem;
  height:1.8rem;
  position:absolute;
  background-color:var(--green)
}
.admonition {
  margin-left:0;
  padding:.5rem 1.5rem 0rem 1.5rem;
  border:.25rem solid;
  border-top:0px;
  display:flow-root;
  border-radius:0px 0px 25px 25px;
  border-top:0px;
  background-color:var(--background);
  margin:0 0;
  page-break-inside:avoid
}
@media print {
  .admonition {
    box-shadow:none
  }
}
.admonition>* {
  box-sizing:border-box
}
.admonition.title {
  position:relative;
  margin-block:0;
  padding-block:0;
  font-weight:700;
  border-bottom:.2rem dashed;
  border-top:.25rem solid;
  border-radius:25px 25px 0px 0px
}
.admonition p {
  margin-left:0;
  font-family:inherit
}


pre {
 font-family: Recursive, monospace;
 background-color: #191724;
 color: #e0def4;
.Operator {color: #908caa}
.Type {color: #9ccfd8}
.Keyword {color: #31748f}
.Conceal {}
.Delimiter {color: #908caa}
.Comment {color: #908caa; font-style: italic}
.Float {color: #f6c177}
.mkdSnippetRUST {}
.Include {color: #31748f}
.Function {color: #ebbcba}
.mkdCodeStart {color: #9ccfd8}
}