:root {
  color-scheme: light dark;
}

/* GENERAL  */

body {
  font-family: sans-serif;
  font-size: 1.0em;
  margin: 2em auto;
  padding: 0 2em 2em 2em;
  max-width: 46em;
}

p {
  line-height: 1.5em;
}

h3 {
  font-size: 1em;
}

/* HEADER ANCHOR REVEAL ON HOVER  */

h1 font a[href^="#"],
h2 font a[href^="#"] {
  visibility: hidden;
  text-decoration: none;
}

h1:hover font a[href^="#"],
h2:hover font a[href^="#"] {
  visibility: visible;
}

/* CODE BLOCKS  */

pre {
  padding: 1em;
}

pre,
pre> code {
  font-family: 'Consolas', monospace;
  font-size: 1em;
  line-height: 1.2em;
  overflow-x: auto;
  max-width: 100%;
}

pre:has(code[data-box]) {
  border: 1px solid;
}

/* CODE BLOCKS - ALIGNMENT  */

pre:has(code[data-center]) {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}


pre:has(code[data-right]) {
  width: max-content;
  max-width: 100%;
  margin-inline: auto 0;
  box-sizing: border-box;
}

/* SITE NAV  */

.menu li {
  list-style-type: none;
  display: inline;
}
.menu li:not(:first-child)::before {
  padding: 0.5em;
  content: " | ";
}

.menu {
  padding: 0;
}

/* TABLE */

table,
th,
td {
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  border: 1px solid;
  text-align: center;
}

hr {
  border: none;
  border-top: 1px solid;
}

/* LINK */

a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

a.ext:link,
a.ext:visited {
  text-decoration: underline;
}