ol,
ul {
  margin-top:.25rem;
  margin-bottom:.25rem
}
details,
td,
th {
  padding:.5rem
}
aside:not(.body-with-sidebar > aside),
details,
pre,
progress,
th,
tr:nth-child(2n) {
  background-color:var(--bg-light)
}
summary,
table caption,
th {
  font-weight:700
}
body,
input,
select,
textarea {
  color:var(--text);
  background-color:var(--bg)
}
figure,
table {
  overflow-x:auto
}
::backdrop,
:root {
  --sans-font:-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,"Noto Sans","Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;
  --mono-font:Consolas,Menlo,Monaco,"Andale Mono","Ubuntu Mono",monospace;
  --standard-border-radius:5px;
  --bg:#EEEEEE;
  --bg-light:#CBCDCD;
  --text:#41474E;
  --text-light:#646868;
  --accent:#D26878;
  --accent-light:#e08f67;
  --accent-text:var(--bg);
  --border:#646868;
  --link:#5690AF
}
@media (prefers-color-scheme:dark) {
  ::backdrop,
  :root {
    color-scheme:dark;
    --bg:#222529;
    --bg-light:#464949;
    --text:#D6D6D6;
    --text-light:#DBD5BC;
    --accent:#78B6AD;
    --accent-light:#87C9E5;
    --accent-text:var(--bg);
    --border:#DBD5BC;
    --link:#E2AEA2
  }
  img,
  video {
    opacity:.8
  }
}
@media (prefers-color-scheme:light) {
  ::backdrop,
  :root {
    color-scheme:light;
    --bg:#EEEEEE;
    --bg-light:#CBCDCD;
    --text:#41474E;
    --text-light:#646868;
    --accent:#D26878;
    --accent-light:#e08f67;
    --accent-text:var(--bg);
    --border:#646868;
    --link:#5690AF
  }
}
[data-theme=light] {
  color-scheme:light;
  --bg:#EEEEEE;
  --bg-light:#CBCDCD;
  --text:#41474E;
  --text-light:#646868;
  --accent:#D26878;
  --accent-light:#e08f67;
  --accent-text:var(--bg);
  --border:#646868;
  --link:#5690AF
}
[data-theme=dark] {
  color-scheme:dark;
  --bg:#222529;
  --bg-light:#464949;
  --text:#D6D6D6;
  --text-light:#DBD5BC;
  --accent:#78B6AD;
  --accent-light:#87C9E5;
  --accent-text:var(--bg);
  --border:#DBD5BC;
  --link:#E2AEA2
}
::-moz-selection,
::selection {
  color:var(--bg);
  background:var(--accent)
}
::-webkit-scrollbar {
  width:8px;
  height:8px;
  overflow:visible
}
::-webkit-scrollbar-thumb {
  background:var(--accent);
  width:12px
}
::-webkit-scrollbar-track {
  background:var(--bg-light)
}
* {
  scrollbar-color:var(--accent) var(--bg-light);
  scrollbar-width:thin;
  scrollbar-height:thin
}
html {
  color-scheme:light dark;
  font-family:var(--mono-font);
  scroll-behavior:smooth
}
body {
  min-height:100svh;
  font-size:1rem;
  display:grid;
  grid-template-columns:1fr min(47rem,90%) 1fr;
  grid-template-rows:auto 1fr auto;
  grid-row-gap:.625rem
}
body>* {
  grid-column:2
}
body>footer {
  color:var(--text-light);
  font-size:.875
}
h1 {
  font-size:2rem
}
h2 {
  font-size:1.75rem
}
h3 {
  font-size:1.5rem
}
h4 {
  font-size:1.25rem
}
h5 {
  font-size:1rem
}
h6 {
  font-size:.75rem
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin:.5em 0
}
h1,
h2,
h3 {
  line-height:1.1
}
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  color:var(--accent);
  content:'# '
}
p {
  margin:1rem 0
}
figcaption,
li,
p {
  text-wrap:pretty
}
a,
a:visited {
  text-decoration:none;
  border-radius:.125rem;
  color:var(--link)
}
a:hover {
  background-color:var(--link);
  color:var(--bg)
}
ul {
  list-style:square
}
ol {
  list-style-type:decimal
}
li {
  margin-bottom:.125rem
}
ul li::marker {
  content:'» ';
  color:var(--accent)
}
ul li:hover::marker {
  content:'# ';
  font-weight:700;
  color:var(--link)
}
ol li::marker {
  color:var(--accent)
}
ol li:hover::marker {
  font-weight:700;
  color:var(--link)
}
header>nav ol,
header>nav ul {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:space-around;
  justify-content:right;
  list-style-type:none;
  margin:.5rem 0 0;
  padding:0;
  gap:1rem
}
header>nav ol li,
header>nav ul li,
input[type=checkbox]+label,
input[type=radio]+label {
  display:inline-block
}
aside:not(.body-with-sidebar > aside),
details,
pre,
progress {
  border-radius:var(--standard-border-radius)
}
aside:not(.body-with-sidebar > aside) {
  font-size:1rem;
  width:35%;
  padding:0 10px;
  margin-inline-start:10px;
  float:right
}
[dir=rtl] aside:not(.body-with-sidebar > aside) {
  float:left
}
summary {
  cursor:pointer;
  word-break:break-all
}
details[open]>summary+* {
  margin-top:0
}
details[open]>summary {
  margin-bottom:.5rem
}
details[open]>:last-child {
  margin-bottom:0
}
table {
  border-collapse:collapse;
  margin:1.5rem 0;
  display:block;
  white-space:nowrap
}
td,
th {
  border:1px solid var(--border);
  text-align:start
}
table caption {
  text-align:left;
  margin:0 0 .4rem 1rem
}
fieldset {
  border:1px dashed var(--accent);
  border-radius:var(--standard-border-radius)
}
fieldset>legend {
  color:var(--accent)
}
.button,
button,
input,
select,
textarea {
  font-size:inherit;
  font-family:inherit;
  padding:.25rem;
  border-radius:var(--standard-border-radius);
  box-shadow:none;
  max-width:100%;
  display:inline-block
}
cite,
figcaption {
  font-size:.875rem
}
iframe,
img,
video {
  max-width:90%
}
figure,
label {
  display:block
}
input,
select,
textarea {
  border:1px dashed var(--border)
}
fieldset label {
  margin:0 0 .3rem
}
textarea {
  max-width:43.5rem;
  resize:both
}
progress,
textarea:not([cols]) {
  width:100%
}
.button,
a.button,
button,
input[type=button],
input[type=reset],
input[type=submit],
label[type=button] {
  border:1px solid var(--accent);
  background-color:var(--accent);
  color:var(--accent-text);
  padding:.5rem .9rem;
  text-decoration:none;
  line-height:normal
}
blockquote,
cite,
dt,
figcaption {
  color:var(--text-light)
}
.button[aria-disabled=true],
button[disabled],
input:disabled,
select:disabled,
textarea:disabled {
  cursor:not-allowed;
  background-color:var(--bg-light);
  border-color:var(--bg-light);
  color:var(--text-light)
}
input[type=range] {
  padding:0;
  color:var(--accent)
}
abbr[title] {
  cursor:help;
  text-decoration-line:underline;
  text-decoration-style:dotted
}
.button:not([aria-disabled=true]):hover,
button:enabled:hover,
input[type=button]:enabled:hover,
input[type=reset]:enabled:hover,
input[type=submit]:enabled:hover,
label[type=button]:hover {
  background-color:var(--accent-light);
  border-color:var(--accent-light);
  cursor:pointer
}
input[type=checkbox]:checked,
input[type=radio]:checked,
mark {
  background-color:var(--accent)
}
.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where(
[type=submit],
[type=reset],
[type=button]
) {
  outline:2px solid var(--accent);
  outline-offset:1px
}
input[type=checkbox],
input[type=radio] {
  vertical-align:middle;
  position:relative;
  width:14px;
  height:14px
}
input[type=radio] {
  border-radius:100%
}
input[type=color] {
  height:2.5rem;
  padding:.2rem
}
input[type=file] {
  border:0
}
hr {
  border:1px dashed var(--accent);
  margin:.5rem 0
}
mark {
  padding:0 .25em;
  border-radius:var(--standard-border-radius);
  color:var(--bg)
}
mark a {
  color:var(--link)
}
img,
video {
  height:auto;
  padding:.125rem;
  border:dashed 2px var(--accent);
  border-radius:15px
}
figure {
  margin:0
}
figcaption {
  text-align:left;
  margin:0 0 1rem 1rem
}
blockquote {
  margin:0 0 0 1.25rem;
  padding:.5rem 0 0 .5rem;
  border-inline-start:.375rem solid var(--accent);
  font-style:italic
}
cite {
  font-style:normal
}
code,
kbd,
pre,
pre span,
samp {
  font-family:var(--mono-font)
}
pre {
  border:1px solid var(--accent);
  max-height:30rem;
  padding:.625rem;
  overflow:auto;
  font-style:monospace;
  white-space:pre
}
div code,
li code,
p code {
  padding:0 .125rem;
  border-radius:3px;
  color:var(--bg);
  background-color:var(--text)
}
pre code {
  padding:0;
  border-radius:0;
  color:inherit;
  background-color:inherit
}
progress:indeterminate {
  background-color:var(--bg-light)
}
progress::-webkit-progress-bar {
  border-radius:var(--standard-border-radius);
  background-color:var(--bg-light)
}
progress::-webkit-progress-value {
  border-radius:var(--standard-border-radius);
  background-color:var(--accent)
}
progress::-moz-progress-bar {
  border-radius:var(--standard-border-radius);
  background-color:var(--accent);
  transition-property:width;
  transition-duration:.3s
}
progress:indeterminate::-moz-progress-bar {
  background-color:var(--bg-light)
}
dialog {
  max-width:40rem;
  margin:auto
}
dialog::backdrop {
  background-color:var(--bg);
  opacity:.8
}
@media only screen and (max-width:720px) {
  h1 {
    font-size:1.5rem
  }
  h2 {
    font-size:1.25rem
  }
  h3 {
    font-size:1rem
  }
  h4 {
    font-size:.75rem
  }
  h5 {
    font-size:.5rem
  }
  h6 {
    font-size:.25rem
  }
  aside:not(.body-with-sidebar > aside) {
    width:100%;
    float:none;
    margin-inline-start:0
  }
  input,
  select,
  textarea {
    width:100%
  }
  dialog {
    max-width:100%;
    margin:auto 1em
  }
}
sub,
sup {
  vertical-align:baseline;
  position:relative
}
sup {
  top:-.4em
}
sub {
  top:.3em
}