html {
  font-size: 100%;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  /* border: 0; */
  text-decoration: none;
  font-family: inherit;
  border-collapse: collapse;
  color: #000;
  background-color: #f7f7f7;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 2em;
  font-family: Covette, serif;
  font-size: 1.1em;
  text-align: left;
}

body > *,
body > * > *,
main figure > *,
main figure > div > *,
main p {
  margin-bottom: 30px;
}

header {
  font-size: 2em;
  float: left;
  font-family: monospace;
  margin-right: 1em;
}

header input[id="submit"] {
  display: none;
}

header form input {
  outline: none;
  caret-color: transparent;
  line-height: 2.5em;
  text-align: center;
  width: 80px;
  font-size: 0.4em;
  border: 2px solid black;
  font-family: monospace;
}

nav {
  margin: 0 0 30px;
}

nav ul {
  padding: 0;
  float: left;
  margin: 0 2em 1.5em 0;
}

nav ul li {
  list-style-type: none;
  transition: all 0.25s;
}

nav ul li:hover {
  transform: translateX(0.15em);
  font-weight: bold;
}

nav ul li a#selected:before {
  content: " [ ";
}

nav ul li a#selected:after {
  content: " ] ";
}

main {
  max-width: 40em;
  clear: both;
  float: left;
}

main pre { overflow:auto;background:#efefef;font-size:90%;font-family:monospace;padding:10px;margin-bottom:30px }

main li details {
  /* margin: 1em; */
  display: inline;
}

main img,
main svg {
  max-width: 100%;
  display: block;
  margin: 0 0 30px;
  border: 2px solid black;
}

details > summary {
  /* list-style-type: none; */
  margin-bottom: 1em;
  font-weight: normal;
}

main > figure:first-child img:first-child {
  margin-left: -2em;
  max-width: calc(100vw - 15px);
  width: 600px;
  border: 2px solid black;
  border-left: none;
}

p > figure:first-child img:first-child {
  margin-left: -2em;
  max-width: calc(100vw - 15px);
  width: 800px;
}

main code {
  white-space:pre;
  background: #efefef;
  border-radius: 1px;
  padding: 1.5px;
  font-size: 1em;
  padding: 0.1em;
}

main li {
  margin: 0.5em 0;
}

#ToC ol {
  border: 2px solid black;
  display: inline-block;
  padding: 1em;
}

#ToC ol li {
  list-style-position: inside;
  list-style-type: decimal-leading-zero;
  text-decoration: underline;
}

main details ul {
  margin-top: 1em;
}

main ul,
ol {
  padding-left: 2em;
  /* margin-bottom: 2em; */
}

main h1 {
  font-size: 2em;
}

main h3 {
  margin-bottom: 1.1em;
  text-decoration: underline;
}

main q {
  /* font-family: serif; */
  font-style: italic;
  display: block;
  max-width: 20em;
}

main cite {
  display: block;
  clear: both;
  margin-bottom: 2em;
}

main p {
  line-height: 1.5em;
}

main cite:before {
  content: "— ";
}

#ToC a:after {
  content: "";
}
#ToC a:before {
  content: "";
}
main a:before {
  content: "{";
}
main a:after {
  content: "}";
}
main a[href^="https://"]::before
{
  content: "[";
}
main a[href^="https://"]::after
{
  content: "]";
}

main a:hover {
  background-color: #000;
  color: #fff;
}

main iframe {
  width: 100%;
  height: 480px;
}
main img,
main svg {
  max-width: 100%;
  display: block;
  margin: 0 0 30px;
}

footer {
  border-top: 1px solid black;
  line-height: 1.5em;
  clear: both;
}


footer hr {
  margin-bottom: 1em;
}

@font-face {
  font-family: "Covette";
  src: url("../links/fonts/Alegreya/Alegreya-VariableFont_wght.ttf");
}