/* upd-251023 */

::-webkit-scrollbar {
  width: 0.25rem;
}
::-webkit-scrollbar-track {
  background: solid;
  background-color: #23262aFF;
}
::-webkit-scrollbar-thumb {
  background-color: #606060FF;
  border-radius: 1em;
/*   border: transparent; */
}

/*Note: Background color will be overridden in index.html JS set-theme*/
body {
  color:#afbaba;
/*   background-color:#21272a; */
  background-color:#2A2D31;
  height: 99%;
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Hack", monospace;
  font-size: 0.85rem;
  line-height: 1.22em;
  letter-spacing: -0.04em;
/* Top-separator line because default Brave/Chrome theme color clash, and they have no separator? */
/*   box-shadow: 0 -2px 0 #1e2125; */
/*   margin-top: 1px; */
}
/* Insert non-breaking space to make sure Top-separator is always first */
/*body:before {
content: "\a0";
}*/

pre {
  display: block;
  font-family: "Hack", monospace;
  font-size: .87rem;
  letter-spacing: -0.04em;
  line-height: 1.15em;
  white-space: pre-wrap;
}

a {color: inherit; text-decoration: None; filter: brightness(130%);}
a:hover {filter: brightness(180%); font-weight: bold;}
a:link {color:inherit; text-decoration: none;}
a:visited {color:inherit; text-decoration: none;}
a:active {color:inherit; text-decoration: none;}
b {color: inherit; filter: brightness(115%);}

h1 {
/*   display: block; */
  font-family: inherit;
  font-size: 2rem;
  line-height: 1.1em;
  filter: brightness(115%);
}
h2 {
/*   display: block; */
  filter: brightness(115%);
  margin-bottom: 0.1em;
  margin-top: 0.5em;
}
h3 {
/*   display: block; */
  font-family: inherit;
  font-size: 1.425em;
/*   font-weight: bold; */
/*   font-style: italic; */
/*   text-decoration: underline; */
/*   text-underline-offset: 0.15em; */
   letter-spacing: 0.02em;
  line-height: 1.15em;
  filter: brightness(115%);
  margin-bottom: 0.75em;
  padding: 0em;
}

.sep {margin: 0 auto; padding:0.5em; text-align: center;  font-size: 1em;
}

hr {
  border:none;
}

ul, ol {
  line-height: 1.35em;
/*   margin: 0.5em; */
/*   margin-top: -0.35em; */
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.5em;
}
ul .h {
  color: inherit; filter: brightness(115%);
  font-weight: bolder;
  text-decoration: underline;
  text-underline-offset: 0.1em;
/*   font-style: italic; */
  font-size: 1.1em;
  list-style: none;
  margin-left: -1em;
  line-height: 1.75em;
  margin-top: 0.85em;

}
li {
  margin: 0.1em 0;
  line-height: 1.3em;
/*   font-size: 0.95em; */
/*   list-style: disc; */
/*   list-style: none; */
/*   list-style: circle; */
/*   list-style: square; */
}
.nostyle {
  list-style: none;
  margin-left: -1em;
}
.numbered {
  margin-left: -1em;
}

.smallprint {
  font-family: inherit;
  font-size: 0.8em;
  line-height: 1.2em;
  font-style: italic;
}
/* AppleSafari nonsense workaround for none-styling?: */
ul li::before {
  content: "\200B";
}

iframe {
  border-radius: 0.3em;
  border: solid;
  border-width: 0.1em;
  border-color:inherit;
  color:inherit;
  height: 20em;
  width: 100%;
}
iframe:hover {
  border: solid;
  border-width: 0.15em;
  border-color: inherit;
  filter: brightness(130%);
  color:inherit;
}

img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.center {
  font-size: .75rem;
  text-align: center;
  }
.box {
  background-color:#00000040;
  padding:1rem 2rem 1.5rem 2rem;
/*   padding:1.5rem 2rem 1.5rem 2rem; */
  line-height: 1.2;
  border-radius: 0.3em;
}
.box-outline {
  background-color:#00000040;
/*   padding:0.5rem 1.5rem 1rem 1.5rem; */
  padding:1rem 2rem 1.5rem 2rem;
  line-height: 1.2;
  border-radius: 0.3em;
  outline:0.1rem solid;
  outline-color: inherit;
}
.btn {
  border: solid;
  border-width: 0.1em;
  border-radius: 0.3em;
  border-color:inherit;
  background-color:#00000040;
  padding: 0em 1em;
  text-align: left;
  display: inline-block;
  cursor: pointer;
}
.fbtn {
  border: dashed;
  border-width: 0.1em;
  border-color:inherit;
  border-radius: 0.3em;
  background-color:#00000040;
  padding: 0em 1em;
  text-align: left;
  display: inline-block;
  cursor: pointer;
}
.btn:hover {
  border: solid;
  border-width: 0.1em;
}
.btn_pre {
  display: block;
  font-family: "Hack", monospace;
  font-size: .9rem;
  letter-spacing: -0.04em;
  white-space: pre-wrap;
  padding: 0.7em 0em 0.6em 0em;
}
.icon-button {
  margin: 0 auto; position: relative; text-align: center;
  color: inherit;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  background: none;
  border: none;
  padding: 0;
  margin-top: -1em;
  cursor: pointer;
}
.tint_c64 { filter: contrast(30%) sepia(100%) brightness(107%) hue-rotate(202deg) saturate(3000%) saturate(56%);}
.tint_dos { filter: brightness(65%) saturate(0%);}
.tint_green { filter: contrast(90%) sepia(100%) brightness(30%) hue-rotate(70deg) saturate(2000%);}
.tint_amber {filter: contrast(50%) sepia(100%) brightness(30%) hue-rotate(14deg) saturate(3000%);}
.tint_white { filter: contrast(100%) brightness(100%) saturate(0%);}