body[a=dark] {
  filter: invert(1);
}
body[a=dark] img {
  filter: invert(1);
}
body[a=dark] img.ioda {
  filter: invert(0);
}

@media (prefers-color-scheme: dark) {
  body[a=auto] {
    filter: invert(1);
  }
  body[a=auto] img {
    filter: invert(1);
  }
  body[a=auto] img.ioda {
    filter: invert(0);
  }
}
html, body {
  background: white;
}

html {
  height: 100%;
}

body {
  color: black;
  font-family: monospace;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  min-height: 100%;
  overflow-wrap: break-word;
}

.post-meta {
  text-align: right;
}

h2, h3, h4, h5, h6 {
  margin-top: 3rem;
}

hr {
  margin: 2rem 0;
}

p {
  margin: 1rem 0;
}

li {
  margin: 0.4rem 0;
}

*:target {
  background: yellow;
}

.w {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

@media (max-width: 768px) {
  .w {
    padding: 2rem 1rem;
  }
  body {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .w {
    padding: 1.5rem 0.75rem;
  }
}
hr {
  text-align: center;
  border: 0;
}
hr:before {
  content: "/////";
}
hr:after {
  content: attr(data-content) "/////";
}

table {
  width: 100%;
  display: block;
  overflow-x: auto;
}

table, th, td {
  border: thin solid black;
  border-collapse: collapse;
  padding: 0.4rem;
}

code {
  color: #f8f8f2;
  background: #282a36;
  word-wrap: break-word;
  max-width: 100%;
}

div.highlighter-rouge {
  position: relative;
  max-width: 100%;
  margin: 1.5rem 0;
}

div.highlighter-rouge code {
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 1rem;
  font-size: 0.9em;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background-color: #2d2d2d;
  color: #f8f8f2;
}

@media (max-width: 768px) {
  div.highlighter-rouge code {
    padding: 0.75rem;
    font-size: 0.85em;
  }
}
/* Add horizontal scrolling for code blocks that are too wide */
div.highlighter-rouge pre {
  margin: 0;
  max-width: 100%;
}

/* Syntax highlighting with red and yellow theme */
.highlight .c, .highlight .c1, .highlight .cm {
  color: #75715e;
} /* Comment */
.highlight .err {
  color: #ff5555;
} /* Error */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr {
  color: #ff5555;
} /* Keyword - RED */
.highlight .o, .highlight .ow {
  color: #ff5555;
} /* Operator - RED */
.highlight .p {
  color: #f8f8f2;
} /* Punctuation */
.highlight .n, .highlight .nb, .highlight .bp, .highlight .ni, .highlight .nl, .highlight .nn, .highlight .py, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi {
  color: #f8f8f2;
} /* Name */
.highlight .na {
  color: #ffb86c;
} /* Name.Attribute - YELLOW-ORANGE */
.highlight .nc {
  color: #f1fa8c;
} /* Name.Class - YELLOW */
.highlight .no {
  color: #ffb86c;
} /* Name.Constant - YELLOW-ORANGE */
.highlight .nd {
  color: #f1fa8c;
} /* Name.Decorator - YELLOW */
.highlight .nf {
  color: #f1fa8c;
} /* Name.Function - YELLOW */
.highlight .nx {
  color: #ffb86c;
} /* Name.Other - YELLOW-ORANGE */
.highlight .nt {
  color: #ff5555;
} /* Name.Tag - RED */
.highlight .l {
  color: #bd93f9;
} /* Literal */
.highlight .ld {
  color: #f1fa8c;
} /* Literal.Date - YELLOW */
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo {
  color: #bd93f9;
} /* Literal.Number */
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s1, .highlight .s2, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss {
  color: #f1fa8c;
} /* String - YELLOW */
.highlight .gd {
  color: #ff5555;
} /* Generic.Deleted - RED */
.highlight .gi {
  color: #f1fa8c;
} /* Generic.Inserted - YELLOW */
.highlight .w {
  color: #f8f8f2;
} /* Text.Whitespace */
/* For dark mode syntax highlighting */
body[a=dark] .highlight { /* Comment */
  /* Keyword - RED */
  /* Name attributes - YELLOW-ORANGE */
  /* Functions, classes - YELLOW */
  /* Tags - RED */
  /* String - YELLOW */
}
body[a=dark] .highlight .c, body[a=dark] .highlight .c1, body[a=dark] .highlight .cm {
  color: #6272a4;
}
body[a=dark] .highlight .k, body[a=dark] .highlight .kd, body[a=dark] .highlight .kn, body[a=dark] .highlight .kp, body[a=dark] .highlight .kr {
  color: #ff5555;
}
body[a=dark] .highlight .na, body[a=dark] .highlight .no {
  color: #ffb86c;
}
body[a=dark] .highlight .nf, body[a=dark] .highlight .nc, body[a=dark] .highlight .nd {
  color: #f1fa8c;
}
body[a=dark] .highlight .nt {
  color: #ff5555;
}
body[a=dark] .highlight .s, body[a=dark] .highlight .sb, body[a=dark] .highlight .sc, body[a=dark] .highlight .sd, body[a=dark] .highlight .s1, body[a=dark] .highlight .s2, body[a=dark] .highlight .sh, body[a=dark] .highlight .si, body[a=dark] .highlight .sx, body[a=dark] .highlight .sr, body[a=dark] .highlight .ss {
  color: #f1fa8c;
}

@media (prefers-color-scheme: dark) {
  body[a=auto] .highlight { /* Comment */
    /* Keyword - RED */
    /* Name attributes - YELLOW-ORANGE */
    /* Functions, classes - YELLOW */
    /* Tags - RED */
    /* String - YELLOW */
  }
  body[a=auto] .highlight .c, body[a=auto] .highlight .c1, body[a=auto] .highlight .cm {
    color: #6272a4;
  }
  body[a=auto] .highlight .k, body[a=auto] .highlight .kd, body[a=auto] .highlight .kn, body[a=auto] .highlight .kp, body[a=auto] .highlight .kr {
    color: #ff5555;
  }
  body[a=auto] .highlight .na, body[a=auto] .highlight .no {
    color: #ffb86c;
  }
  body[a=auto] .highlight .nf, body[a=auto] .highlight .nc, body[a=auto] .highlight .nd {
    color: #f1fa8c;
  }
  body[a=auto] .highlight .nt {
    color: #ff5555;
  }
  body[a=auto] .highlight .s, body[a=auto] .highlight .sb, body[a=auto] .highlight .sc, body[a=auto] .highlight .sd, body[a=auto] .highlight .s1, body[a=auto] .highlight .s2, body[a=auto] .highlight .sh, body[a=auto] .highlight .si, body[a=auto] .highlight .sx, body[a=auto] .highlight .sr, body[a=auto] .highlight .ss {
    color: #f1fa8c;
  }
}
/* Adjust highlight colors for languages */
.language-css .highlight .k {
  color: #ff5555;
}

.language-css .highlight .nt {
  color: #f1fa8c;
}

.language-css .highlight .nb {
  color: #ffb86c;
}

.language-javascript .highlight .nx {
  color: #f8f8f2;
}

.language-javascript .highlight .kd {
  color: #ff5555;
}

.language-html .highlight .nt {
  color: #ff5555;
}

.language-html .highlight .na {
  color: #ffb86c;
}

.language-html .highlight .s, .language-html .highlight .s1, .language-html .highlight .s2 {
  color: #f1fa8c;
}

/* Optional code language badge */
div.highlighter-rouge::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  color: #f8f8f2;
  background: #ff5555;
  padding: 0 0.5rem;
  font-size: 0.7em;
  border-radius: 0 4px 0 4px;
  opacity: 0.9;
}

blockquote {
  font-style: italic;
  border: thin solid black;
  padding: 1rem;
  margin: 1rem 0;
  max-width: 100%;
  box-sizing: border-box;
}

blockquote p {
  margin: 0;
}

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

/*# sourceMappingURL=main.css.map */