html,
body {
    margin: 0;
    padding: 35px 10px 10px;
    font-size: medium;
    line-height: 1.5;
}

@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: #fff !important;
    color: #000;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.4;
    text-align: left !important;
    padding-top: 20px !important;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
  }

  img,
  .page-header-icon,
  .print-button-container,
  figcaption,
  footer {
    display: none !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, span, strong, blockquote, li {
    font-size: 12px !important;
    margin: 0;
    line-height: 1.4;
    color: #000;
    text-align: left !important;
  }

  h2 {
    margin-top: 12px;
    margin-bottom: 4px;
  }

  p {
    margin-bottom: 4px;
  }

  figure {
    margin: 0;
    padding: 0;
    display: block !important; /* override flex */
    text-align: left !important;
  }

  .block-color-default,
  .block-color-gray_background {
    background: none !important;
    border: none !important;
  }

  .block-color-default > div,
  .block-color-gray_background > div {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  blockquote {
    border: none !important;
    padding: 0 !important;
  }

  ul, ol {
    margin: 4px 0;
    padding-left: 16px;
  }

  .page-break {
    page-break-before: always;
  }

  figure {
    margin: 0 !important;
    padding: 0 !important;
  }

  figure + figure {
    margin-top: 0 !important;
  }

  figure p {
    margin: 0 !important;
    padding: 0 !important;
  }

  figure {
    line-height: 1.25 !important;
  }
}

@media only screen {
    body {
        margin: 1em auto;
        max-width: 650px;
        color: #121212;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #d9d6d6;
    }
}

h1, h2, h3 {
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 0;
}

h1 { font-size: 1.875rem; margin-top: 1.875rem; }
h2 { font-size: 1.5rem; margin-top: 1.5rem; }
h3 { font-size: 1.25rem; margin-top: 1.25rem; }

.page-title {
    font-size: 2.5rem;
    font-weight: normal;
    margin: 0 0 0.75em 0;
}

@media (hover: hover) and (pointer: fine) {
    *, *:hover, a:hover {
        cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Ccircle cx='10' cy='10' r='4' fill='rgba(50,50,50,0.7)'/%3E%3C/svg%3E") 16 16, auto;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
    *, *:hover, a:hover {
        cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' shape-rendering='geometricPrecision'%3E%3Ccircle cx='10' cy='10' r='4' fill='rgba(220,220,220,0.8)'/%3E%3C/svg%3E") 16 16, auto;
    }
}

::selection { background: #ff713f; color: #efede2; }
::-moz-selection { background: #ff713f; color: #efede2; }

.source, .callout {
    border-radius: 3px;
    padding: 1rem;
}

.source {
    border: 1px solid #ddd;
    word-break: break-all;
}

@media (prefers-color-scheme: dark) {
    .source { border-color: #3c3c3c; }
}

figure { margin: 1.25em 0; page-break-inside: avoid; }

p { margin: 0.5em 0; font-size: medium; }

hr {
    background: transparent;
    display: block;
    width: 100%;
    height: 1px;
    border: none;
    border-bottom: 1px solid #00000017;
}

@media (prefers-color-scheme: dark) {
    hr { border-bottom: 1px solid #5a5a5a; }
}

figure.block-color-default,
figure.block-color-default_background {
    border-radius: 5px;
    display: flex;
}

figure.block-color-default { border: 1px solid #00000017; }
figure.block-color-default_background { border: 1px solid #e3e3e3; }

@media (prefers-color-scheme: dark) {
    figure.block-color-default { border-color: #5a5a5a; }
    figure.block-color-default_background { border-color: #575757; }
}

.icon, img.icon, .user-icon, .user-icon-inner, .page-header-icon {
    vertical-align: text-bottom;
}

.icon { display: inline-block; max-width: 2.2em; max-height: 2.2em; margin-right: 0.5em; text-decoration: none; }
img.icon { border-radius: 3px; }

.user-icon { width: 1.5em; height: 1.5em; border-radius: 100%; margin-right: 0.5rem; }
.user-icon-inner { font-size: 0.8em; }

.page-header-icon { font-size: 3rem; margin-bottom: 1rem; }
.page-header-icon img { border-radius: 50px; }

img, .secure-image {
    max-width: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

.secure-image {
    border-radius: 15px; /* adjust as needed */
    padding-bottom: 5px;
}

.image { margin: 1.5em 0; padding: 0; text-align: center; border: none; border-radius: 0; }

.sans {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

blockquote { font-size: 1.25em; margin: 1em 0; padding-left: 1em; border-left: 3px solid rgb(55,53,47); }

ol, ul {
    margin: 0.6em 0;
    padding-inline-start: 1.6em;
}

ul > li { list-style: disc; padding-left: 0.1em; }
ol > li { padding-left: 0.2em; }

.badge {
    display: inline-block;
    background: #eee;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.9rem;
    color: #555;
    margin-right: 5px;
    margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
    .badge { background: #323131; color: #d8d8d8; }
}

.highlight-gray { color: rgba(115,114,110,1); fill: rgba(115,114,110,1); font-size: medium; }
.highlight-blue { color: rgba(51,126,169,1); fill: rgba(51,126,169,1); }

.block-color-default,
.block-color-default_background { color: inherit; fill: inherit; }

.block-color-gray { color: rgba(115,114,110,1); fill: rgba(115,114,110,1); }
.block-color-gray_background { background: rgba(248,248,247,1); border-radius: 5px;}

@media (prefers-color-scheme: dark) {
    .block-color-gray_background { background: #171717; }
}

a, a.visited { color: inherit; text-decoration: none; }

footer {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont;
    text-align: center;
    font-size: 0.9em;
    margin-top: 2em;
    color: #666;
}