/* IMPORTED STYLESHEETS */
@import url("print.css");
@import url("fonts.css");
@import url("tooltips.css");

/* ROOT */
:root {
  --color-translucent: light-dark(var(--color-white), var(--color-black));
  --color-mono:  light-dark(var(--color-black), var(--color-white));
  --color-gray: color-mix(in srgb, var(--color-white) 50%, var(--color-black));
  --border-radius: /*5px*/ 0.3em;
  --flex-gap: 0.25em;
}

/* STYLE RESET */
html, body, div, span,  object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, main, nav, ins {
  box-sizing: border-box;
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0 none;
  padding: 0;
  margin: 0;
  scrollbar-color: var(--scrollbar);
  max-width: 100%;
  min-width: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* BODY */
html, body { height: 100%; width: 100%; }
html { font-size: 110% ;}
body {
  color: var(--text);
  font-family: var(--body-font);
  background-color: var(--bg-site);
  background-attachment: fixed;
}

/* TEXT SELECT */
::selection {
  background: var(--accent-secondary);
  color: var(--bg);
}

/* FOCUS */
:focus-visible, a:focus-visible img:only-child, sup.footnote-ref a:focus {
  outline: var(--focus-color) var(--focus-style);
  border-radius: var(--border-radius);
  outline-offset: .2rem;
  z-index: 100;
	position: relative;
}
a:has(img:only-child):focus-visible {
  outline: 0;
}
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="time"], input[type="color"], input[type="datalist"], select, textarea):focus-visible {
  outline-offset: 0;
  border-radius: 0.5rem;
  outline-color: var(--accent-primary);
}
a:focus-visible { text-decoration: none; }

/* CONTAINERS AND LANDMARKS */
#container {
  width: 90%;
  max-width: 900px; /*change to 1150px??? or 1000px?? and edit sidebar flex???*/
  background-color: var(--bg);
  height: fit-content;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#primary {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  /*without sidebar: 675px*/
  /* change to 1000px and 750px?*/
  /* better: 1,250px and 1000px*/
}

main { flex: 1 1 40%; background: var(--bg); }
footer, main { padding: 1em; }
header { background: var(--bg); }
header, footer { text-align: center; flex: 0 1 100%; }
#titleArea { padding: 1em; }
#sidebarLeft, #sidebarRight {
  flex: 0 1 25%;
  background: var(--bg-secondary);
  border-top: var(--bg) 0.2em solid;
  border-bottom: var(--bg) 0.2em solid; 
  font-size: 0.95em;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-color: var(--text) var(--bg-secondary);
  padding: 1em;
}
#sidebarLeft h2, #sidebarRight h2 {
  font-size: 1.5em;
  margin: 0.5rem 0;
}
footer {
  background: var(--bg-secondary); 
  padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem); /*<- stolen from https://leilukin.com */
}
footer p {
  font-size: 0.95em;
}

/* FLEXBOX */
/* https://kalechips.net/projects/snippets/flexcolumns */
.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  gap: var(--flex-gap);
}
.full { flex: 1 1 calc(100% - var(--flex-gap));}
.half { flex: 1 1 calc(50% - var(--flex-gap)); }
.third { flex: 1 1 calc(33% - var(--flex-gap)); }
.twothird { flex: 1 1 calc(66% - var(--flex-gap)); }
.quarter { flex: 1 1 calc(25% - var(--flex-gap)); }
.threequarter { flex: 1 1 calc(75% - var(--flex-gap)); }
/*add padding?*/
/* figure flex box???*/

/* BREADCRUMBS */
nav.breadcrumbs, #notBreadcrumbs {
  flex: 1 1 100%;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0.5em;
  background: var(--bg-secondary);
}
ol.breadcrumbs, #notBreadcrumbs > p {
  margin: 0;
}

ol.breadcrumbs, #notBreadcrumbs > p {
  padding: 4px;
  border-bottom: var(--accent) 1px solid;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.95em;
  justify-content: center;
}
ol.breadcrumbs li+li:before {
  content: "";
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
  font-size: 0.7em;
  margin: 0 0 0 0.25em;
  text-decoration: none;
  display: inline-block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}

/* BLOCK ELEMENTS (BLOCKQUOTE, PARAGRAPHS, AND LISTS) */
:is(main, aside, #sidebarLeft, #sidebarRight) :is(p, ul, ol, dl),
blockquote, details, summary, figcaption, table,
input[type="checkbox"], input[type="radio"], label {
  line-height: 1.5;
}
:is(blockquote, figcaption, caption, details) p:first-of-type {
  margin-top: 0;
  padding-top: 0;
}
:is(blockquote, figcaption, caption, details) p:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
:is(blockquote, figcaption, caption) details {
  margin: 0;
  padding: 0;
}
blockquote {
  border-left: 4px solid var(--accent-primary);
  padding: 1em;
  background-color: var(--bg-secondary);
}
blockquote + p:has(cite) { text-align: right; }
main ul li li { list-style-image: none; }
p, ol, ul, dl, blockquote, details, pre/*, fieldset*/ { margin: 1em 0; }
ol, ul, dd { padding-left: 40px; }
li ol, li ul { margin: 0; }
dt { font-weight: bold; }

/* HEADINGS AND TITLE*/
#siteTitle { font-size: 220%; text-align: center; }
#siteTitle, h1, h2, h3, h4, h5, h6 {
  display: block;
  font-weight: bold;
  font-family: var(--heading-font);
  /*margin: 1.25rem 0 1rem 0;*/
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h1 {
  font-size: 200%;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}
h2 {
  font-size: 150%;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}
h3 {
  font-size: 125%;
  margin-block-start: 1em;
  margin-block-end: 1em;
}
h4, h5, h6 {
  font-size: 100%;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}
h5 { padding-left: 2em; }
h6 { padding-left: 4em; }

/* LINKS AND ABBREVIATION*/
a, abbr, ins, u, del, s { text-decoration-thickness: .1em; }
a, abbr, ins, u { text-underline-offset: 0.15em; }
abbr[title]:hover { cursor: help; }
/* links with SVG icons */
a[href$=".pdf"]:not(.btn, :has(img, svg))::after,
a[href^="mailto:"]:not(.btn, :has(img, svg))::after,
a[href^="http"]:not(:has(img, svg))::after,
a[href^="https://"]:not(:has(img, svg))::after {
  content: "";
  width: /*1em*/ 0.9em;
  height: /*1em*/ 0.9em;
  display: inline-block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  vertical-align: middle;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
/* link to pdf file */
a[href$=".pdf"]:not(.btn, :has(img, svg))::after {
  margin-left: 0.1em;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text-icon lucide-file-text"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text-icon lucide-file-text"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>');
}
/* link to email */
a[href^="mailto:"]:not(.btn, :has(img, svg))::after {
  margin-left: 0.1em;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>');
}
/* external link */
a[href^="http"]:not(:has(img, svg))::after, a[href^="https://"]:not(:has(img, svg))::after {
  margin-left: /*0.05em*/0.1em;
  mask-image: url('data:image/svg+xml,<svg alt="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>') !important;
  -webkit-mask-image: url('data:image/svg+xml,<svg alt="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>') !important;
}

:is(h1, h2, h3, h4, h5, h6) a[href^="http"]:not(:has(img, svg))::after, :is(h1, h2, h3, h4, h5, h6) a[href^="https://"]:not(:has(img, svg))::after {
  margin-left: 0.1em;
}

/* CODE AND PRE */
code {
  font-family: var(--mono-font);
  font-size-adjust: 0.45;
}
:not(pre) > code {
  border: 1px solid currentColor;
  padding-inline: 0.25em;
  background: var(--bg-secondary);
}
@supports (border-color: color-mix(in srgb, currentColor 35%, transparent)) {
  :not(pre) > code {
      background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
      border-color: color-mix(in srgb, currentColor 35%, transparent); 
  }
}
pre {
  scrollbar-color: var(--text) transparent;
  border: 1px solid var(--text);
  border-radius: 0.3em;
  padding: 0.5em;
  font-family: var(--mono-font);
  white-space: pre;
  overflow: scroll;
}
pre:focus-visible { border-radius: 0.3em; }
@supports (border: color-mix(in oklab, var(--text) 30%, transparent) 1px solid) {
  pre {border: color-mix(in oklab, var(--text) 30%, transparent) 1px solid;}
}
pre:not(:has(code)) { background: var(--bg-secondary); }

/* adjust js file !!!!!! */
pre:has( + .cc-wrapper ) {
  margin-bottom: 0.5em;
}

/* DETAILS AND SUMMARY */
summary {font-weight: bold;}
summary:hover { cursor: pointer; }
main details { background: var(--bg-secondary); padding: 0.4em; border-radius: 8px; }
main details[open] > summary { margin-bottom: 1em; }

/* BUTTONS AND FORM CONTROLS*/
input, textarea, select, button, a.btn, .pagination li a, .pagination li > span:not(.tooltip), .btn-list li a {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid;
  border-color: /*var(--accent-primary)*/ currentColor;
  font-size: inherit;
  font-family: var(--body-font);
  padding: 0.5rem;
  margin: 0;
  border-radius: 0.5rem;
  text-decoration: none;
}

/*
select, button, input[type="button"], input[type="reset"], input[type="submit"], a.btn, .pagination li a, .pagination li > span:not(.tooltip), .btn-list li a {
  border-color: currentColor;
}
*/

/*
:not(p) > :is(input, textarea, select, button, a.btn) {
    margin: 1em 0;
}
*/
a.btn, .btn-list li a {
  display: inline-block;
}
/*
input[type="text"]:focus-visible, textarea:focus-visible, select:focus-visible, input[type="url"]:focus-visible, input:focus-visible {
  border-color: var(--accent-primary);
  border-radius: 0.5rem; 
}*/
/*
select:focus-visible {
  color: var(--accent-primary);
  border-radius: 0.5rem;
}
select:focus-visible option, select:focus-visible optgroup {
  color: var(--text);
  border-radius: 0.5rem;
}
*/
:is(#sidebarLeft, #sidebarRight, footer, .box, .c-comment)
:is(input, textarea, select, button:not(.alt), .btn, .btn-list:not(.alt) li a) {
  background: var(--bg);
}


button, input[type="button"],
input[type="submit"], input[type="reset"] {
  cursor: pointer;
}

:is(button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, .pagination li a, .btn-list li a):is(:focus, :hover) {
  /*background: var(--accent-primary);
  color: var(--bg-secondary);
  border-color: var(--accent-primary);*/
  color: var(--accent-primary);
  border-radius: 0.5rem;
}

option[disabled] {font-style: italic;}

/*
fieldset {
  border: 2px solid var(--text);
  padding: 0 1em;
  border-radius: 0.5rem;
}

legend {
  color: var(--bg);
  background: var(--text);
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
*/

input[type="checkbox"], input[type="radio"], input[type="range"], progress {accent-color: var(--accent-primary);}



:disabled, :is(button, input[type="button"], input[type="reset"], input[type="submit"]):disabled:hover {
  color: var(--color-translucent);
  border-color: var(--color-translucent);
}

:is(button, input[type="button"], input[type="reset"], input[type="submit"]).alt:disabled,
:is(button, input[type="button"], input[type="reset"], input[type="submit"]).alt:disabled:hover {
  background-color: var(--color-translucent);
  border-color: var(--color-translucent);
  color: var(--bg);
}


/* TABLE */
table { border-collapse: collapse; margin: 0 auto; }
th, td { border: 1px solid; padding: 8px 10px; }
th, thead td, tfoot td {
  text-align: center;
  font-weight: bold;
  background: var(--bg-secondary);
}
td {border-color: var(--text)}
.zebra tr:nth-child(odd), .both tr:nth-child(odd),
.vertical tbody td:nth-child(even), .both tbody td:nth-child(even),
.zebra-odd tr:nth-child(even), .both-odd tr:nth-child(even),
.vertical-odd tbody td:nth-child(odd), .both-odd tbody td:nth-child(odd) {
  background-color: var(--bg-secondary);
}
@supports (background: color-mix(in srgb, var(--text) 7%, var(--bg))) {
  .zebra tr:nth-child(odd), .both tr:nth-child(odd),
  .vertical tbody td:nth-child(even), .both tbody td:nth-child(even),
  .zebra-odd tr:nth-child(even), .both-odd tr:nth-child(even),
  .vertical-odd tbody td:nth-child(odd), .both-odd tbody td:nth-child(odd) {
    background: color-mix(in srgb, var(--text) 7%, var(--bg));
  }
  .both tr:nth-child(odd) td:nth-child(even),
  .both-odd tr:nth-child(even) td:nth-child(odd) {
    background: color-mix(in srgb, var(--text) 13%, var(--bg));
  }
}
table.alt :is(th, thead td, tfoot td) {
  background: var(--text);
  color: var(--bg);
  border-color: var(--bg);
}

/* HR / DIVIDER */
hr {
  overflow: visible;
  text-align: center;
  height: 0px;
  margin: 1em auto;
}
hr::after {
  background: var(--bg);
  padding: 0 0.25rem;
  position: relative;
}

/* FIGURE AND FIGCAPTION */
figure img {max-width: 100%; height: auto; max-height: /*90vh*/ 100vh; object-fit: contain;}
figure.small img {max-width: 100%;}
figure.center {display: block; margin-right: auto; margin-left: auto; text-align: center;}
@media only screen and (min-width: 799px) {
  figure.small {max-width: /*40%*/ 33%; height: auto;}
  figure.right {float: right; margin-left: 1em; margin-right: 0; text-align: center;}
  figure.left {float: left; margin-right: 1em; margin-left: 0; text-align: center;}
}
figure {text-align: center; margin: 0; /*wtf is going with margins????*/}
figcaption, caption {
  font-size: 0.9em;
  text-align: center;
  background: var(--bg-secondary);
  color: var(--text);
  padding: 0.25em 0.5em;
  border-radius: 8px;
  margin: 0.25em auto;
  padding: 0.5em;
}
figcaption p {margin: 0.5em 0;}
figcaption details { text-align: left; }
figcaption summary { text-align: center; }

/* DELETED AND INSERTED TEXT */
del {
  background: color-mix(in srgb, var(--color-red) 20%, var(--bg-callout));
  filter: saturate(120%);
}
ins {
  background: color-mix(in srgb, var(--color-green) 20%, var(--bg-callout));
  filter: saturate(120%);
}
ins, u { text-decoration-line: underline; }
del, s { text-decoration-line: line-through; }
s { color: var(--color-translucent); text-decoration-color: var(--text); }
code, del, ins, mark {border-radius: 0.25em; padding-inline: 0.25em;}

/* MARK */
mark, mark strong {
  color: var(--bg);
  background-color: var(--accent-primary);
}
:is(div.callout-frame, blockquote, figcaption, details) :is(mark, mark strong, mark b) {
  color: var(--bg-secondary);
}

/* SUBSCRIPT AND SUPERSCRIPT */
sub {vertical-align: sub; font-size: smaller;}
sup {vertical-align: super; font-size: smaller;}

/*KEYBOARD*/
kbd {
  border-radius: 5px;
  border: 1px solid var(--text);
  box-shadow: 0 1px 1px var(--text),0 2px 0 0 var(--bg) inset;
  color: var(--text);
  display: inline-block;
  font-size: .85em;
  line-height: 1;
  padding: .2em .4em;
  font-weight: bold;
  background-color: var(--bg-secondary);
}

/* INLINE QUOTES */
q { quotes: '"' '"' "'" "'"; }
q::before { content: open-quote; }
q::after { content: close-quote; }

/* MISCELLANEOUS */
strong, b { font-weight: 700; }
em, i, dfn, cite { font-style: italic; }
small { font-size: 0.7em; }
samp { font-family: var(--mono-font); font-weight: bold; }

/* CUSTOM INLINE CLASSES */
.caps { text-transform: uppercase; }
.titleCase { text-transform: capitalize; }
.lowerCase { text-transform: lowercase; }
.smaller { font-size: 0.9em; }
.bigger { font-size: 1.1em; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.indented { margin-left: 2em; }
.indented.right { margin-right: 2em; margin-left: 0; }
.monospace { font-family: var(--mono-font); font-size-adjust: 0.45; }
.fancy { font-family: "Brush Script MT", cursive; font-size-adjust: 0.5; }
.pink { color: var(--color-pink); }
.red { color: var(--color-red); }
.orange { color: var(--color-orange); }
.yellow { color: var(--color-yellow); }
.green { color: var(--color-green); }
.blue { color: var(--color-blue); }
.purple { color: var(--color-purple); }
.white { color: var(--color-white); }
.black { color: var(--color-black); }
.mono { color: var(--color-mono); }
.translucent { color: var(--color-translucent); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-gay, .text-rainbow { background: linear-gradient(to right, var(--color-red), var(--color-orange), var(--color-yellow), var(--color-green), var(--color-blue), var(--color-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-lesbian { background: linear-gradient(to right, var(--color-red), var(--color-orange), var(--color-white), var(--color-pink), var(--color-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-bisexual { background: linear-gradient(to right, var(--color-pink), var(--color-purple), var(--color-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-nonbinary { background: linear-gradient(to right, var(--color-yellow), var(--color-white), var(--color-purple), var(--color-black)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-transgender { background: linear-gradient(to right, var(--color-blue), var(--color-pink), var(--color-white), var(--color-pink), var(--color-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-aromantic { background: linear-gradient(to right, var(--color-green), var(--color-white), var(--color-gray), var(--color-black)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-asexual { background: linear-gradient(to right, var(--color-black), var(--color-gray), var(--color-white), var(--color-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-disability { background: linear-gradient(to right, var(--color-black), var(--color-red), var(--color-yellow), var(--color-white), var(--color-green), var(--color-blue), var(--color-black)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.clearfix::after { content: ""; clear: both; display: table; }

/* SVG ICONS */

:is(p, div):has(> a.btn) {text-align: center; /*margin: 1.5em 0;*/}

/*
.speciallink a:hover, .speciallink a:focus, a.btn:hover, a.btn:focus {color: var(--accent-primary);}*/ /*{border-color: var(--textaccent);}



/* footer ul, header ul, ul.inline */


          /* SKIP TO CONTENT LINK */
          #skiptocontent a {
              padding: /*0.6rem 1em 1em 0.6rem*/ 0.75rem;
              position: absolute;
              top: -50px;
              left: 0px;
              color: var(--text);
              background: var(--bg);
              font-family: var(--headingfont);
              /*border-right: 5px solid var(--text);
              border-bottom: 5px solid var(--text);*/
              font-weight: bold;
              text-decoration: none;
              -webkit-transition: top 1s ease-out;
              transition: top 1s ease-out;
              z-index: 100;
              border-radius: 0 0 5px 0;

              border-right: 1px solid currentColor;
              border-bottom: 1px solid currentColor;
              background: var(--bg-secondary);
          }
          #skiptocontent a:focus {
              position:absolute;
              left: 0px;
              top: 0px;
              outline-color:transparent;	
              -webkit-transition: top .1s ease-in;
              transition: top .1s ease-in;
              outline: 0;
              box-shadow: none;
          }
          @media (prefers-reduced-motion: reduce) {
              #skiptocontent a {
                  transition-duration: 0s!important;
              }
          }




















/*ADD DROP SHADOW TO POPPED OUT 81x33 BUTTONS*/

@media screen and (min-width: 1025px) {
  /*h1, #sidebarLeft h2, #sidebarRight h2 { margin-top: 0; }*/

  /*give main and sidebar no top/bottom padding??*/
}
/*@media screen and (max-width: 1024px) {
 ?????
}*/
@media only screen and (max-width: 799px) {
    #container {
      width: 100%;
    }
}

/*
.lucideicon {
  display: inline-block;
  vertical-align: -0.25em;
}
  */


/* make tip and question orange??*/

/* put nextprev under links */





/* NEXT PREV */

.nextprev {display: flex; flex-wrap: wrap;gap: 0.5em; justify-content: center;} /*increase gap*/
.prev {flex: 0 1 calc(50% - 1em); /*padding-right: 5px;*/}
.next {flex: 0 1 calc(50% - 1em); /*padding-left: 5px;*/}
.indexlink {flex: 0 1 calc(50% - 1em);}

.nextprev a {width: 100%;}
.prev a {text-align: left; height: 100%;}
.next a {text-align: right; height: 100%;}
.indexlink a {text-align: center;}



/* Prevent image overflows */
img, pre, code, area { overflow-wrap: break-word; }



:is(#sidebarLeft, #sidebarRight, nav.box) :is(ol, ul) {
  padding-left: 1em;
}

/* STYLE MARK!!! */

/*finish doing through old css, include buttonwall css*/

/*really go over theme stylesheets*/

/*figure out default theme*/

/*change pagination to ol*/


.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}
.hidden {
  display: none;
}

/*figure this out */

/*https://leilukin.com/articles/accessible-footnotes/*/
.footnotes ol :target/*, .footnote-ref a:target*/ {
  /*background: var(--bg-secondary);
  border-radius: 5px; border: 1px dashed var(--text);*/
  background-color: var(--bg-secondary);
  outline: 0.1em dashed var(--color-translucent);
  outline-offset: 0.2em;
  border-radius: 5px;
}

a.top-btn {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 999;
  background-color: var(--clr-top-btn-bg);
  display: flex;
  align-items: center;
  border-radius: 50em;
  padding: 0.3em 0.5em;
  gap: 0.2em;


  padding: 0.75rem;
  font-family: var(--headingfont);
  font-weight: bold;
  text-decoration: none;
  border: /*1px*/ calc(0.075em * 2) solid currentColor;
  color: var(--text);
  background: var(--bg-secondary);
  font-size: 1rem;
}

/*TEMP!!!*/
a.top-btn svg {
  stroke: currentColor;
  fill: currentColor;
}

a.top-btn:hover,
a.top-btn:focus {
  color: var(--accent-primary);
}

@media screen and (max-width: 1024px) {
  a.top-btn {
    color: var(--bg-secondary);
    background: var(--accent-primary);
    border: none;
  }

  a.top-btn:hover,
  a.top-btn:focus {
    color: var(--bg-secondary);
    background: var(--text);
  }
}

/* Unsticky button if on extremely small screen or zoomed in a lot */
/*
@media screen and (max-width: 319px) {
  a.top-btn {
    position: relative;
    justify-content: center;
  }
}
*/
footer .tooltip--show {
  text-align: left;
}
/*will I even need this by the end?*/

#sidebarRight {
  display: none !important;
}



    .postlist time {
      background: var(--text);
      border-radius: 8px;
      padding-inline: 0.25rem;
      color: var(--bg);
      font-weight: bold;
      font-family: monospace;
      font-size: 120%;
      word-spacing: -0.25em;
    }
    .postlist time {
      background: none;
      color: var(--text);
      border: /*0.125em*/ 0.075em solid currentColor;
    } 
    .postlist {
      list-style: none;
      line-height: 1.6 !important;
    }


    .status {
      background-color: var(--bg-secondary);
      border-radius: 0.5rem;
      color: var(--text);
      padding: 0.75rem;
      gap: 1rem;
      align-items: center;
      align-self: stretch;
      box-sizing: border-box;
      width: 100%;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .status ul {
      margin: 0;
      padding-left: 0;
      list-style: none;
    }
    .status svg {
      vertical-align: -2px;
    }
    .status h2 {
      margin-top: 0;
    }

    /*REMOVE IN FINAL*/
    ul.blogtags {padding-left: unset;}
    ul.posttags {display: inline;}
    ul.blogtags li {display: inline;}
    ul.blogtags li::after {content: ", ";}
    ul.blogtags li:last-of-type::after {content: none;}


    /*?????*/

    /* PAGINATION */
.pagination ol {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0;
    justify-content: center;
    margin: 0 auto;
}
.pagination {padding-bottom: 10px;}
.pagination li+li {padding-left: 0.25em;}


.pagination {
  margin: 1em 0;
}

.pagination li a[aria-current="page"],
a.btn.alt,
.btn-list.alt li a,
:is(button, input[type="button"], input[type="reset"], input[type="submit"]).alt {
    background: var(--text);
    color: var(--bg-secondary);
    border-color: var(--text);
    font-weight: bold;
}

.pagination li > span:not(.tooltip) {
  color: var(--accent-secondary);
}

:is(button.alt, a.btn.alt, .btn-list.alt li a, .pagination li a[aria-current="page"], input[type="submit"].alt):is(:hover, :focus),
:is(button, input[type="button"], input[type="reset"], input[type="submit"]).alt:is(:hover, :focus) {
    background: var(--accent-primary);
    color: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.pagination li a, .pagination li > span:not(.tooltip) {
  font-weight: bold;
}

:is(button, a.btn, .btn-list.alt li a) svg {
    vertical-align: sub;
}

.pagination li svg {
    vertical-align: -0.35em;
}

footer :is(button, a.btn, .btn-list.alt li a, .pagination li) svg {
    vertical-align: sub;
}

/*
arrows

vertical-align: -0.35em;


*/

@media screen and (max-width: 1024px) {
    .pagination li+li {margin-bottom: 1.2em;}
    .postlist {
      padding: 0;
    }
}




ul.buttons {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: 0.25em;
  justify-content: center;
  image-rendering: pixelated;
}

ul.buttons img:hover, ul.buttons a:focus img {
    scale: 120%;
    transition: 0.2s ease;
    transition-property: scale;
    z-index: 2;
    filter: none;
    image-rendering: optimizeQuality;
}

ul.buttons :not(a) img:hover {
  filter: none;
}


/* ORGANIZE THIS */
.buttons img {position: relative;}
.buttons a:hover img, .buttons a:focus img {
    scale: 120%;
    transition: 0.2s ease;
    transition-property: scale;
    z-index: 2;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    .buttons img:hover, .buttons a:hover img, .buttons a:focus img {transition-duration: 0s!important;}
}
figure img:hover, figure img:focus {filter: none;}



/*FIX FLEX STUFF AND FOOTER!!! */

ul.buttons.alt li img {
    filter: none;
    border: 0.1em solid;
    border-color: var(--accent-secondary); /*change back to text color?*/
    border-radius: 0.15em;
}

ul.buttons.alt a:is(:hover, :focus) img {
  border-color: var(--accent-primary);
}







/*btn list*/
:is(#sidebarLeft, #sidebarRight, nav.box) ul.btn-list {
  list-style: none;
  padding-left: 0;
}
.btn-list:not(.inline) li + li {
  margin-top: 0.5em;
}
.btn-list li a {
  width: 100%;
  text-align: center;
}




.btn-list.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  justify-content: center;
}




.pagination.alt li > span:not(.tooltip) {
  background: var(--bg-secondary);
  color: var(--text);
  border-color: var(--bg-secondary);
}

.pagination.alt li a {
    background: var(--text);
    color: var(--bg-secondary);
    border-color: var(--text);
    font-weight: bold;
}

.pagination.alt li a:is(:hover, :focus) {
    background: var(--accent-primary);
    color: var(--bg-secondary);
    border-color: var(--accent-primary);
}

article + article {
  border-top: 1px solid var(--text);
}

.postmetadata svg {
  vertical-align: -0.1em;
}

:is(h1, h2, h3, h4, h5, h6) svg {
  margin-right: 0.25em;
  vertical-align: /*top*/ -0.1em;
  margin: 0;
}

/*
footer button svg {
  vertical-align: sub !important;
}
*/

/*DOUBLE CHECK FALLBACK BG COLORS FOR WHEN BG IMAGES DON'T LOAD*/

/* add aria-hidden="true" to lucide icons as default */







/* RESPONSIVE MEDIA QUERY */

/* big screen only */
@media screen and (min-width: 1025px) {
.visually-hidden-big {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}
.hidden-big {
  display: none;
}
  /*
    header nav ul {flex-wrap: wrap; justify-content: center; width: unset;}
    blockquote {margin: 1em 0.5em;}
    .bigscreen {display: none;}
    .smallscreen {display: block;}
    */
}

/* tablet size or smaller */
@media screen and (max-width: 1024px) {
  .visually-hidden-small {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
  }
  .hidden-small {
    display: none;
  }

  .flexcontainer, #container, #primary { display: block; }
  header, footer, #sidebarLeft, #sidebarRight, main { flex: 1 1 100%; }
  abbr[title]:after{ content: " (" attr(title) ")"; }
  abbr[title] { text-decoration-color: var(--color-translucent); }

  #sidebarRight, #sidebarLeft {
        height: unset;
        position: unset;
    }
    main {
      padding-top: 0;
      overflow: clip;
    }
    .flexcontainer {
        display:block;
    }

  .btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
  }
  .btn-list li + li {
    margin-top: auto;
  }
  .btn-list li a {
    width: auto;
  }
}

/* smartphone size */
@media only screen and (max-width: 799px) {
  /*
    body {font-size: 1em;}
    .container {max-width: 100%; border-left: none; border-right: none; padding: 1em;}
    nav.breadcrumbs {display: none;}
    header nav a {font-weight: bold; font-size: 1.25em}
    header nav ul li + li::before {width: 1em; height: 2em;}
    #title {font-size: 1.75em;}
    .box, details, blockquote {margin: 1em 0;}
    */
}



.toc ol ol {
  list-style-type: disc;
}
.toc ol ol ol {
  list-style-type: circle;
}
.toc ol ol ol ol {
  list-style-type: square;
}

.heading-wrapper {
  display: flex;
  gap: 0.3em;
  align-items: baseline;
}

.heading-anchor {
  order: -1;
  text-underline-offset: 0.1em;
}

/*change mark to always be yellow on black???*/

/* fix figure text align */


/*change mark to always be yellow on black???*/

/* fix figure text align */
/*
mark, mark strong {
  color-scheme: dark;
  color: black;
}
*/
/*
mark, mark strong {
  color-scheme: dark;
  background: var(--color-yellow);
  color: black;
}
*/

#titleArea {
text-align: center;
}
#siteTitle {
margin: auto;
}

main {
  padding-top: 0 !important;
}

/*maybe change to*/
kbd {
  box-shadow: 0 1px 1px var(--color-translucent),0 2px 0 0 var(--bg) inset;
}

figure.c-blockquote blockquote {
  margin-bottom: 0;
}

blockquote + figcaption {
  text-align: right;
  background: none;
  font-size: 1em;
  margin-top: 0;
}

blockquote:has(blockquote), blockquote blockquote {
  background: color-mix(in lab, var(--text) 7%, transparent);
}


:is(header, footer) nav :is(ol, ul), ul.inlineList {
  display: flex;
  list-style: none;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}
/*
:is(header, footer) nav :is(ol, ul) li + li::before, ul.inlineList li + li::before {
  content: "•";
  margin: 0 0.5em;
}
*/

/* do something about uniform boxes*/

@media (forced-colors: active) {
  #siteTitle { color: var(--text); }
  svg { stroke: currentColor !important; }
  mark strong { color: unset; background: unset; }
  img { filter: none !important; }
  #sidebarLeft, #sidebarRight { border: none; }
}

/*remove back to top zoom media query thingy*/

figure blockquote {
  text-align: start;
}

.box {
    /*margin: 1em;*/
    padding: .7em;
    /*z-index: 1;*/
    border-radius: .5em;
    background-color: var(--bg-secondary);

    background: var(--bg-secondary);
    padding: 0.25rem 1rem;
    border-radius: 1rem;
    margin-top: 1em;
    margin: 1em 0;

}
/*.box p {margin: 0;}*/

.flexcontainer .box:has(h1, h2, h3, h4, h5, h6) {
  padding: 0 0.5em;
  border-radius: 0.5em;
}



/* START BLOG.CSS */
.blogcontainer {width: 1150px;}
#blogaside {
    flex: 1 1 calc(30% - 10px);
    padding: 10px;
    font-size: 0.95em;
    position: sticky;
    top: 10px;
    height: fit-content;
    margin: 5px;
    border-left: var(--accent) 2px solid;
}
/*.postpreview {margin: 1em auto;}
.postpreview .speciallink {text-align: left;}*/
/*.postmetadata {
    font-size: 0.95em;
    border-bottom: var(--text) 1px solid;
    padding-bottom: 0.75em;
    margin-top: 0;
    margin-bottom: 0.75em;
    line-height: 1.5;
}*/
.postmetadata i {color: var(--textaccent);}
/*.postpreview h2 {border-bottom: none; margin: 0.25em 0;}*/
#blogaside #styleswitcher {width: 100%;}
.status {
    /*columns: 2;*/
    margin: 0;
    padding-left: 0;
    list-style: none;
}
@media screen and (max-width: 1024px) {
    #blogaside {font: unset; margin: unset; border-left: none;}
    .postpreview:last-of-type {margin-bottom: 0;}
    .status {columns: 1;}
}
/* END BLOG.CSS */




/*


background: linear-gradient(to right, 
      var(--color-red) 1ch, 
      var(--color-orange) 1ch, 
      var(--color-orange) 2ch, 
      var(--color-yellow) 2ch, 
      var(--color-yellow) 3ch, 
      var(--color-green) 3ch,
      var(--color-green) 4ch,
      var(--color-blue) 4ch, 
      var(--color-blue) 5ch, 
      var(--color-purple) 5ch,
      var(--color-purple) 6ch
    );
    

*/




/*

remove select focus-visable for selects/options

figure out focus visable for inputs

*/




/*
add " "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", " to the end of font stack before fallback.

add "-webkit-mask-size: cover; and non-webkit version to svg ::after thingies so that they're responsive"
*/


/* figure this out???? */



/* from skldfjlsakjdf */


figure, blockquote, li {
    break-inside: avoid;
}

blockquote, ol ol, ul ul {
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0;
    padding-left: 1.25em;
}

/*

summary#toc {
    font-size: 130%;
}

*/


/*REMEMBER TO UNINTSTAL VTO PLUGIN*/

/*change ins and del to be green and red if color-mix doesn't work*/

hgroup.mainHeading h1 {
  margin-bottom: 0.25em;
}

hgroup.mainHeading h1 + p {
  margin-top: 0;
  color: var(--color-translucent);
  /*color: var(--accent-primary);*/
  font-size: 95%;
}