:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #f0f6f3);
  background-color: light-dark(#fff, #0d1117);
  font-family: "Segoe UI", sans-serif;
  max-width: 850px;
  margin: auto;
  line-height: 1.5;
}
a { color: #4493f8; text-decoration: none; border-bottom: 1px #4493f855 solid; }
a:visited { color: light-dark(#5644f8, #44cbf8); }
a:hover { border-color: #4493f8; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border: none; }
h1, h2 { border-bottom: 1px solid #3d444db3; padding-bottom: .3em;  }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
summary h1, summary h2, summary h3 { display: inline-block; border-bottom: 0; }
h1 { font-size: 2em; }
.main-title {
  text-align: right;
  position: sticky;
  top: 0;
  background-color: light-dark(#ffffffee, #0d1117ee);
  border: none;
  display: block;
  z-index: 1;
  text-decoration: none;
  line-height: 1;
  padding: 0;
}
.main-title a:hover { text-decoration: underline; }
.main-title a:visited { color: #4493f8; }
li { margin-top: .25em; }
.markdown-body { font-size: 16px; padding: 20px; word-wrap: break-word; }
code { padding: .2em .4em; font-size: 85%; white-space: break-spaces; border-radius: 6px; background: #656c7633; }
hr {
  height: .25em;
  padding: 0;
  margin: 24px 0;
  background-color: #3d444d;
  border: 0;
}
.footer {
  text-align: center;
  border-top: 5px white solid;
  padding-top: 10px;
  margin-top: 40px;
}

/* code blocks */
pre {
  padding: 16px;
  overflow: auto;
  /* font-size: 85%; */
  line-height: 1.45;
  border-radius: 3px;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2;
  background: #151b23;
  position: relative;
  color: white;
}
pre code {
  background: inherit;
  padding: 0;
}
blockquote {
  padding: 0 1em;
  color: #9198a1;
  border-left: .25em solid #3d444d;
  margin: 0;
}
del { text-decoration-color: #ffffff88; }
img {
  max-width: 90%;
  margin: auto;
  display: block;
}
[id] {
  scroll-margin-top: 35px; /* fix for #fragment links and sticky header */
}
.github-logo {
  width: 25px;
  height: 25px;
  background-image: url('./github-light.png');
  /* background-image: light-dark(url('./github-light.png'), url('./github-dark.png')); */
  background-size: cover;
  display: inline-block;
}
.cms-logo {
  width: 55px;
  height: 23px;
  background-color: white;
  border: 4px white solid;
  border-radius: 6px;
  background-image: url('./cms.svg');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: bottom;
}
.cms-logo:hover { border-color: white; }

@media (prefers-color-scheme: dark) {
  .github-logo { background-image: url('./github-dark.png'); }
}

/* code syntax colouring */
.cp { color: #79c0ff; }
.nt { color: #7ee787; }
.na, .nl, .nf, .nc, .sr, .se { color: #79c0ff; }
.s { color: #a5d6ff; }
.k, .kd { color: #ff7b72; }
.nx { color: #d2a8ff; }
.s1, .m { color: #a5d6ff; }
.c1, .c { color: #9198a1; }
.s2, .dl { color: #a5d6ff; }
.no { color: #fff; }

.copy-button {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  background: inherit;
}
.copy-button:hover {
  background: #eeeeee33;
}