body, html { margin:0; }
* { box-sizing:border-box;}
:root {
  --color-1: #000000;
  --color-2: #1f246a;
  --color-3: #8a1181;
  --color-4: #d14444;
  --color-5: #23cf3d;
  --color-6: #68cbcb;
  --color-7: #e3c72d;
  --color-8: #dcf5ff;
  --font-size-root:16px;
  --line-height:1.44rem
}
@media (min-width:940px) {
  :root {
    --font-size-root:20px;
    --line-height:1.625rem
  }
}
body {
  background-color: var(--color-1);
  font-size: var(--font-size-root);
  line-heighT:var(--line-height);
  color: var(--color-8);
  margin-bottom:5rem;
}
h1 {
  text-align:center; 
}
.title {
  text-align:center;
  margin:4rem auto;
  font-size:1.2em;
  line-height:1;
}
h1 {
  color:var(--color-7);
}
h2 {
  color:var(--color-7);
}
h3 {
  color:var(--color-4);
}
a {
  color:var(--color-7);
}
h2, h3, h4, h5, h6, p, ol, ul, details, .center, figure, figcaption, blockquote {
  --w: 45rem;
  max-width:min(var(--w), 100%);
  margin-inline: auto;
  overflow:hidden;
  display:block;
  height:auto;
}
*[style*="--w"] {
  --w: 40rem;
  max-width:min(var(--w), 100%);
  margin-inline: auto;
}
figcaption {
  font-size:0.8em;
  line-height:1.2;
  margin-top:1ch;
}
blockquote {
  --w: 50rem;
  font-size:1.2em;
  color: var(--color-5);
  font-style: italic;
  line-height:1.4;
}
textarea,
pre {
  font-family: "FontWithASyntaxHighlighter", monospace;
  padding: 8px;
  font-size: 14px;
  line-height:1.5;
  border: 0;
  overflow: auto;
  outline: none;
  background-color: #000;
  color: white;
  width: 100%;
}
img, video {
  display:block;
  max-width:min(var(--w, 70rem), 100%);
  margin-inline:auto;
}
img+img {
  margin-top:1rem;
}
iframe {
  --w: 100rem;
  --aspect: 16/9;
  width:100%;
  max-width:min(var(--w), 100%);
  border: 1px solid black;
  aspect-ratio:var(--aspect);
  margin-inline:auto;
  display:block;
}
.float-left {
  float: left;
  margin-right: 2rem;
  max-width: calc(50vw - 20rem);
  margin-left: max(calc(25vw - 10rem),0%);
  min-width: max(25%,min(20rem,50%));
}
code, kbd {
  background:#333;
  line-height:1.2;
  color:#f1f1f1;
  font-size:0.85em;
  padding:2px 4px;
  border-radius:4px;
  font-family: FontWithASyntaxHighlighter,monospace;
  word-break: break-word;
}
.garden-links {
  background: var(--color-3);
  color:var(--color-5);
  padding:1rem 2rem;
  border-radius:1rem;
}
.hstack {
  display:flex;
  --w: 80rem;
  max-width:min(var(--w), 100%);
  margin-inline: auto;
  gap:5px;
}
sup, sub {
  line-height:0;
  position:relative;
  vertical-align:baseline;
}
sup{top:-.5em}
sub{bottom:-.25em}
details { 
  padding:1rem;
  background:var(--color-3);
  border:1px solid var(--color-2);
}

.note {
  max-width:min(40rem, 100%);
  margin-inline: auto;
  padding:0 1rem;
  background:var(--color-7);
  color:var(--color-1);
  border:1px solid var(--color-2);
  a {
    color:var(--color-2);
  }
}
.margin-note {
  position:absolute;
  position-area: right span-bottom;
  left:calc(20rem);
  width: 150px;
  font-size:0.7em;
  line-height:1.3;
  color:#aaa;
}
@media (max-width:1080px) {
  .margin-note {
    position:relative;
    width:auto;
    --w: 45rem;
    max-width:min(var(--w), 100%);
    margin-inline: auto;
    left:0;
  }
}