/* This file is taken from https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/
html {
  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  font-family: var(--font, --default-font);
  font-feature-settings: normal; }

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0;
  line-height: inherit; }

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
  border-color: var(--grid, inherit); }

/*
Remove the default font size and weight for headings.
*/
p,
pre,
figure,
dl,
dd,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit; }

.tag,
p code {
  font-size: .8em;
  padding: 0.1em 0.3em;
  border-radius: 1px;
  background-color: #9999993b; }

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0; }

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit; }

a:hover {
  color: var(--prime, inherit); }

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
kbd,
samp,
pre,
code {
  --default-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: var(--font-mono, --default-font-mono); }

pre {
  overflow-x: auto; }

.text-wrap code {
  text-wrap: wrap; }

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */ }

/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none; }

::-webkit-scrollbar {
  width: 4px;
  height: 4px; }

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.7); }

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(128, 128, 128, 0.2); }

::-webkit-scrollbar-thumb:active {
  background-color: gray; }

:root {
  --code-back: #f6f8fa;
  --code-text: #24292f;
  --code-line-number: #999;
  --code-keyword: #cf222e;
  --code-attribute: #0550ae;
  --code-literal-string: #0a3069;
  --code-literal-number: #35ad1c;
  --code-comment: #6e7781;
  --code-builtin-type: #cf222e;
  --code-function: #0550ae;
  --code-meta: #cf222e;
  --code-highlighted-line: #e9e9e9; }

.light {
  --prime: #377dba;
  --grid: #e1e1e1;
  --back: #fff;
  --text: #333; }

.dark {
  --prime: #37c83e;
  --back: #181818;
  --text: silver;
  --grid: #555;
  --code-back: #1d1d1d;
  --code-text: #d4d4d4cc;
  --code-line-number: #999999ca;
  --code-keyword: #569cd6cb;
  --code-attribute: #9cdcfecb;
  --code-literal-string: #ce9178;
  --code-literal-number: #b5cea8;
  --code-comment: #6c9459d5;
  --code-builtin-type: #4ec9b0cb;
  --code-function: #dcdcaaca;
  --code-meta: #c586c0cb;
  --code-highlighted-line: #9494951b; }

.sand {
  --prime: #3170a7;
  --back: #e6dece;
  --text: #434343;
  --grid: #555;
  --code-back: #dbd3c1be;
  --code-text: #24292f;
  --code-highlighted-line: #cec3ac;
  --back-image: url('texture.png'); }

.rock {
  --prime: #3170a7;
  --back: #ccc;
  --text: #434343;
  --grid: #555;
  --code-back: #c1c1c1be;
  --code-text: #24292f;
  --code-highlighted-line: #afaeae;
  --back-image: url('texture.png'); }

/* classes that breakpoints are necessary for */
.flex {
  display: flex; }

.flex-row {
  flex-direction: row; }

.flex-col {
  flex-direction: column; }

.flex-col-reverse {
  flex-direction: column-reverse; }

.justify-between {
  justify-content: space-between; }

.items-center {
  align-items: center; }

.items-start {
  align-items: flex-start; }

.items-end {
  align-items: flex-end; }

.items-baseline {
  align-items: baseline; }

.text-center {
  text-align: center; }

.text-left {
  text-align: left; }

.w-48 {
  width: 12rem; }

.w-40 {
  width: 10rem; }

.w-8 {
  width: 2rem; }

@media (min-width: 640px) {
  .sm\:flex {
    display: flex; }
  .sm\:flex-row {
    flex-direction: row; }
  .sm\:flex-col {
    flex-direction: column; }
  .sm\:flex-col-reverse {
    flex-direction: column-reverse; }
  .sm\:justify-between {
    justify-content: space-between; }
  .sm\:items-center {
    align-items: center; }
  .sm\:items-start {
    align-items: flex-start; }
  .sm\:items-end {
    align-items: flex-end; }
  .sm\:items-baseline {
    align-items: baseline; }
  .sm\:text-center {
    text-align: center; }
  .sm\:text-left {
    text-align: left; }
  .sm\:w-48 {
    width: 12rem; }
  .sm\:w-40 {
    width: 10rem; }
  .sm\:w-8 {
    width: 2rem; } }

/* layout */
.container {
  max-width: var(--max-w); }

.hidden {
  display: none; }

.overflow-x-auto {
  overflow-x: auto; }

.overflow-y-hidden {
  overflow-y: hidden; }

/* spacing */
.pt-0 {
  padding-top: 0rem; }

.pt-1 {
  padding-top: 0.25rem; }

.pt-2 {
  padding-top: 0.5rem; }

.pt-3 {
  padding-top: 0.75rem; }

.pt-4 {
  padding-top: 1rem; }

.pt-5 {
  padding-top: 1.25rem; }

.pt-6 {
  padding-top: 1.5rem; }

.pt-7 {
  padding-top: 1.75rem; }

.pt-8 {
  padding-top: 2rem; }

.pr-0 {
  padding-right: 0rem; }

.pr-1 {
  padding-right: 0.25rem; }

.pr-2 {
  padding-right: 0.5rem; }

.pr-3 {
  padding-right: 0.75rem; }

.pr-4 {
  padding-right: 1rem; }

.pr-5 {
  padding-right: 1.25rem; }

.pr-6 {
  padding-right: 1.5rem; }

.pr-7 {
  padding-right: 1.75rem; }

.pr-8 {
  padding-right: 2rem; }

.pb-0 {
  padding-bottom: 0rem; }

.pb-1 {
  padding-bottom: 0.25rem; }

.pb-2 {
  padding-bottom: 0.5rem; }

.pb-3 {
  padding-bottom: 0.75rem; }

.pb-4 {
  padding-bottom: 1rem; }

.pb-5 {
  padding-bottom: 1.25rem; }

.pb-6 {
  padding-bottom: 1.5rem; }

.pb-7 {
  padding-bottom: 1.75rem; }

.pb-8 {
  padding-bottom: 2rem; }

.pl-0 {
  padding-left: 0rem; }

.pl-1 {
  padding-left: 0.25rem; }

.pl-2 {
  padding-left: 0.5rem; }

.pl-3 {
  padding-left: 0.75rem; }

.pl-4 {
  padding-left: 1rem; }

.pl-5 {
  padding-left: 1.25rem; }

.pl-6 {
  padding-left: 1.5rem; }

.pl-7 {
  padding-left: 1.75rem; }

.pl-8 {
  padding-left: 2rem; }

.mt-0 {
  margin-top: 0rem; }

.mt-1 {
  margin-top: 0.25rem; }

.mt-2 {
  margin-top: 0.5rem; }

.mt-3 {
  margin-top: 0.75rem; }

.mt-4 {
  margin-top: 1rem; }

.mt-5 {
  margin-top: 1.25rem; }

.mt-6 {
  margin-top: 1.5rem; }

.mt-7 {
  margin-top: 1.75rem; }

.mt-8 {
  margin-top: 2rem; }

.mr-0 {
  margin-right: 0rem; }

.mr-1 {
  margin-right: 0.25rem; }

.mr-2 {
  margin-right: 0.5rem; }

.mr-3 {
  margin-right: 0.75rem; }

.mr-4 {
  margin-right: 1rem; }

.mr-5 {
  margin-right: 1.25rem; }

.mr-6 {
  margin-right: 1.5rem; }

.mr-7 {
  margin-right: 1.75rem; }

.mr-8 {
  margin-right: 2rem; }

.mb-0 {
  margin-bottom: 0rem; }

.mb-1 {
  margin-bottom: 0.25rem; }

.mb-2 {
  margin-bottom: 0.5rem; }

.mb-3 {
  margin-bottom: 0.75rem; }

.mb-4 {
  margin-bottom: 1rem; }

.mb-5 {
  margin-bottom: 1.25rem; }

.mb-6 {
  margin-bottom: 1.5rem; }

.mb-7 {
  margin-bottom: 1.75rem; }

.mb-8 {
  margin-bottom: 2rem; }

.ml-0 {
  margin-left: 0rem; }

.ml-1 {
  margin-left: 0.25rem; }

.ml-2 {
  margin-left: 0.5rem; }

.ml-3 {
  margin-left: 0.75rem; }

.ml-4 {
  margin-left: 1rem; }

.ml-5 {
  margin-left: 1.25rem; }

.ml-6 {
  margin-left: 1.5rem; }

.ml-7 {
  margin-left: 1.75rem; }

.ml-8 {
  margin-left: 2rem; }

.mx-auto {
  margin-left: auto;
  margin-right: auto; }

/* typography */
.font-thin {
  font-weight: 100; }

.font-extralight {
  font-weight: 200; }

.font-light {
  font-weight: 300; }

.font-normal {
  font-weight: 400; }

.font-medium {
  font-weight: 500; }

.font-semibold {
  font-weight: 600; }

.font-bold {
  font-weight: 700; }

.font-extrabold {
  font-weight: 800; }

.font-italic {
  font-style: italic; }

.text-xxs {
  font-size: 0.6rem; }

.text-xs {
  font-size: 0.75rem; }

.text-sm {
  font-size: 0.875rem; }

.text-base {
  font-size: 1rem; }

.text-lg {
  font-size: 1.125rem; }

.text-xl {
  font-size: 1.25rem; }

.text-2xl {
  font-size: 1.5rem; }

.text-3xl {
  font-size: 1.875rem; }

.text-4xl {
  font-size: 2.25rem; }

.text-5xl {
  font-size: 3rem; }

.text-6xl {
  font-size: 3.75rem; }

.whitespace-nowrap {
  white-space: nowrap; }

.list-disc {
  list-style-type: disc;
  padding-inline-start: 22px; }

/* interactivity */
.cursor-pointer {
  cursor: pointer; }

.gap-8 {
  gap: 2rem; }

.rounded-lg {
  border-radius: 0.8rem; }

.avatar-svg-wrapper {
  width: 200px;
  margin-bottom: 10px; }

.md h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md h5 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md h6 {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 1rem;
  margin-bottom: .75rem; }

.md p {
  margin: 0.75rem 0 1.5rem; }

.md p:has(+ ol) {
  margin: 0.75rem 0; }

p:has(+ .highlight) {
  margin: 0.75rem 0; }

.md pre {
  font-size: 13px;
  line-height: 1.3;
  padding-bottom: 2px; }

.md blockquote {
  background-color: #94949514;
  padding: 1px .85em;
  border-left: 4px solid var(--prime);
  font-style: italic; }

.md table {
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 1em 0;
  overflow: auto; }

.md table thead {
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--text); }

.md table tbody {
  border-bottom: 2px solid var(--text); }

.md table th,
.md table td {
  padding: .25rem 1rem; }

.md img {
  max-width: 100%; }

.md .katex {
  overflow: auto hidden; }

.md ul {
  list-style: disc;
  padding-inline-start: 30px; }

.md ol {
  list-style: decimal;
  padding-inline-start: 30px; }

.md ol:has(+ p) {
  margin-bottom: 1.5rem; }

.md ul input[type="checkbox"] {
  margin: 0;
  margin-right: 5px; }

.md ul:has(input) {
  list-style: none;
  padding-inline-start: 8px; }

.md li {
  margin-bottom: .5rem;
  line-height: 1.5; }

.md li > p {
  margin-bottom: 0.75rem; }

.md ol,
.md ul,
.md img,
.md blockquote,
.md .highlight {
  margin: .75rem 0; }

.md blockquote p {
  margin: .45rem 0;
  line-height: 1.5;
  font-size: .95rem; }

.md hr {
  margin: 1.5rem 0; }

.md .footnotes {
  word-break: break-all;
  font-size: .9rem; }

.md p sup {
  margin-left: 4px; }

.md a {
  color: var(--prime); }

.md a:hover {
  text-decoration: underline; }

.chroma {
  margin: .5em 0;
  background-image: var(--back-image);
  background-color: var(--code-back);
  border-radius: 2px; }

.chroma code {
  color: var(--code-text); }

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

/* for making the line numbers stay hovering, but only works if the line numbers are at most 2 digits */
.chroma .lntd:nth-of-type(1) pre {
  position: absolute;
  max-width: 2.5rem; }

.chroma .lntd:nth-of-type(2) pre {
  margin-left: 2.5rem; }

.chroma .lntable tbody {
  border: 0; }

.chroma .lntable td:nth-child(2) {
  width: 100%; }

.chroma .lnt,
.chroma .line {
  display: block;
  line-height: 1.3; }

/* LineNumbersTable */
.chroma .lnt {
  color: var(--code-line-number);
  padding-left: .9em;
  padding-right: 1em;
  text-align: right;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none; }

.chroma .hl .lnt {
  display: inline; }

/* Keyword */
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .k,
.chroma .si {
  color: var(--code-keyword); }

.chroma .na {
  color: var(--code-attribute); }

.chroma .nb,
.chroma .bp,
.chroma .no,
.chroma .nd,
.chroma .ni,
.chroma .ne,
.chroma .fm,
.chroma .nl,
.chroma .nn {
  color: var(--code-keyword); }

/* NameProperty */
.chroma .py,
.chroma .nt,
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm {
  color: var(--code-keyword); }

/* LiteralString */
.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss,
.chroma .cpf {
  color: var(--code-literal-string); }

/* LiteralNumber */
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  color: var(--code-literal-number); }

/* Comment */
.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs {
  color: var(--code-comment); }

.chroma .nb,
.chroma .kt {
  color: var(--code-builtin-type); }

.chroma .fm,
.chroma .nf {
  color: var(--code-function); }

.chroma .cp {
  color: var(--code-meta); }

.chroma .hl {
  display: block;
  background-color: var(--code-highlighted-line); }

:root {
  --max-w: 640px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  box-sizing: border-box;
  border-collapse: collapse; }

body {
  margin: 0 16px;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  background-image: var(--back-image);
  background-color: var(--back);
  color: var(--text);
  transition-property: background-color, border-color, color;
  transition-duration: 0.5s; }

main {
  animation: showup 0.7s; }

main p a {
  color: var(--prime); }

main p a:hover {
  text-decoration: underline; }

main .search > input {
  width: 100%;
  padding: .5em;
  font-size: large;
  border: 2px solid var(--grid);
  border-radius: 2px;
  color: var(--text);
  background-color: transparent;
  outline: none; }

@keyframes showup {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: none; } }

@media (min-width: 640px) {
  body {
    margin-top: calc(1rem + 2vh); } }