/* from https://uchu.style/color.css */
:root {
    --uchu-yang: oklch(99.4% 0 0); /* white */
    --uchu-light-yin: oklch(91.87% 0.003 264.54); /* light gray */
    --uchu-yin: oklch(14.38% 0.007 256.88); /* black */
    --uchu-yin-9: oklch(25.11% 0.006 258.36);
    --uchu-purple-9: oklch(36.01% 0.145 298.35);  /* purple */
    --uchu-purple-3: oklch(68.5% 0.136 303.78);
    --uchu-orange-9: oklch(52.49% 0.113 51.98); /* brown */
    --uchu-orange-3: oklch(83.56% 0.10753627570574478 56.492594564236946);

    --bg: light-dark(var(--uchu-yang), var(--uchu-yin));
    --bg2: light-dark(var(--uchu-light-yin), var(--uchu-yin-9));
    --text: light-dark(var(--uchu-yin), var(--uchu-yang));
    --accent: light-dark(var(--uchu-purple-9), var(--uchu-purple-3));
    --accent1: light-dark(var(--uchu-orange-9), var(--uchu-orange-3));

    --otherfont: 'Nimbus Mono PS', 'Courier New', monospace;
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);

}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

    /* Light Mode */
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

#toggleBtn {
    background: var(--bg);
    border: 0px;
    width: 25px;
}

#toggleBtn:hover {
    cursor: crosshair;
}

[data-theme='dark'] .map-tiles {
    filter:var(--map-tiles-filter, none);
    }


html {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

* {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

body {
  background: var(--bg);
  color: var(--text);
  font-size:1.1em;
  line-height: 1.5;
  max-width: 100%;
  margin: 0;
  padding: 0 5vw;
}

main {
  margin: 0 auto;
  max-width: 65ch;
  padding: 0 1rem;
}

/* || header */
header {
  max-width: 65ch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 50px auto 0px;
  padding: 0 1rem;
  align-items: center;
}

header h1 {
  margin: 0px;
  padding: 0px;
}

h1, h2, h3, h4, h5 {
  color: var(--accent1);
  text-shadow: 3px 3px var(--bg2);
}

a {
  color: var(--accent);
  text-underline-offset: 0.25rem;
}

a:hover {
  text-decoration-line: none;
}

hr {
  color: var(--bg2);
}

tr:nth-child(even) {
  background-color: var(--bg2);
}

table {
    border-collapse: collapse;
    font-size: smaller;
    width: 100%;
}

blockquote {
  font-size: larger;
  font-style: italic;
  color: var(--accent);
  background-color: var(--bg2);
  margin: 0;
  padding: 0 40px;
}

aside {
  font-size: smaller;
  background-color: var(--bg2);
  border-top: solid var(--accent1) 2px;
  margin: 1em;
  max-width: 100%;
  padding: 0 1em 0.25em 1em;
  /* max-width: fit-content; */
}

aside h4 {
  font-style: normal;
  display: inline;
  margin: 0;
}

aside p {
  display: inline;
  margin: 0 0 0 0.25em;
  font-style: italic;
  color: var(--accent);
}

footer {
  margin: 2rem 0;
  /* padding: 2rem 0; */
  font-size: smaller;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.visually-hidden {
    /* visibility: hidden; */
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* || nolist */
.nolist ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.nolist li {
    display: inline;
    padding-right: 0.2em;
}

.header-anchor {
    color: var(--accent1);
    text-decoration: none;
}

.header-anchor:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent1);
}

.header-anchor:hover::before {
    content: '#';
    position: absolute;
    margin-left: -0.8em;
    padding-right: 0.8em;
    color: var(--accent);
    text-decoration: none;
    text-shadow: none;
}

.link {
    font-size: large;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.25rem;
}

/* || post date title tag div */
.taglink {
    color: var(--accent1);
    font-style: italic;
    margin-right: 0.4em;
    text-underline-offset: 0.25rem;
}

.recentPost {
    border-top: 1px solid var(--bg2);
    margin: 1lh auto;
    /* margin: 0 calc((100vw - 100%) / -2);
    padding: 0.5lh calc((100vw - 100%) /2); */
}

/* .recentPost:nth-child(even) {
    background-color: var(--bg2);
} */

.postTitleDate {
    display:flex;
    flex-flow: row wrap;
    margin: 0;
}

.postTitleDate p {
    margin: 0;
}

.toc ul {
    list-style: none;
}

.footnotes-sep {
    display: none;
}

.footnote-item p {
    margin: 0;
}

.footnote-ref a {
    text-decoration: none;    
}

.footnote-ref a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-thickness: 0.25rem;
}

.footnote-backref {
    color: var(--accent1);
    text-decoration-color: var(--accent);
    text-underline-offset: auto;
}

.footnote-item:target,
.footnote-ref > :target {
    background-color: var(--bg2);
    transition: background-color 0.5s ease-in-out;
    /* animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both; */
}

.footnote-ref > :target {
    font-weight: bold;
}

.ccSvg {
    margin-right: 0.25em;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    max-height: 1000px;
    max-width: 1000px;
    height: auto;
    width: auto;
}

.fig {
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
}

.fig img,
.fig video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%
}

.fig figcaption {
    text-align: center;
    font-style: italic;
    text-decoration: none;
}

.fig a {
    text-align: center;
    text-decoration: underline;
    text-underline-offset:4px;
    font-style: normal;
}

.fig a:hover {
    text-decoration-line: none;
}

pre[class*="language-"],
code[class*="language-"] {
	color: #d4d4d4;
	font-size: 13px;
	text-shadow: none;
	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::selection,
code[class*="language-"]::selection,
pre[class*="language-"] *::selection,
code[class*="language-"] *::selection {
	text-shadow: none;
	background: #264F78;
}

@media print {
	pre[class*="language-"],
	code[class*="language-"] {
		text-shadow: none;
	}
}

pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	background: #1e1e1e;
}

:not(pre) > code[class*="language-"] {
	padding: .1em .3em;
	border-radius: .3em;
	color: #db4c69;
	background: #1e1e1e;
}
/*********************************************************
* Tokens
*/
.namespace {
	opacity: .7;
}

.token.doctype .token.doctype-tag {
	color: #569CD6;
}

.token.doctype .token.name {
	color: #9cdcfe;
}

.token.comment,
.token.prolog {
	color: #6a9955;
}

.token.punctuation,
.language-html .language-css .token.punctuation,
.language-html .language-javascript .token.punctuation {
	color: #d4d4d4;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.inserted,
.token.unit {
	color: #b5cea8;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.deleted {
	color: #ce9178;
}

.language-css .token.string.url {
	text-decoration: underline;
}

.token.operator,
.token.entity {
	color: #d4d4d4;
}

.token.operator.arrow {
	color: #569CD6;
}

.token.atrule {
	color: #ce9178;
}

.token.atrule .token.rule {
	color: #c586c0;
}

.token.atrule .token.url {
	color: #9cdcfe;
}

.token.atrule .token.url .token.function {
	color: #dcdcaa;
}

.token.atrule .token.url .token.punctuation {
	color: #d4d4d4;
}

.token.keyword {
	color: #569CD6;
}

.token.keyword.module,
.token.keyword.control-flow {
	color: #c586c0;
}

.token.function,
.token.function .token.maybe-class-name {
	color: #dcdcaa;
}

.token.regex {
	color: #d16969;
}

.token.important {
	color: #569cd6;
}

.token.italic {
	font-style: italic;
}

.token.constant {
	color: #9cdcfe;
}

.token.class-name,
.token.maybe-class-name {
	color: #4ec9b0;
}

.token.console {
	color: #9cdcfe;
}

.token.parameter {
	color: #9cdcfe;
}

.token.interpolation {
	color: #9cdcfe;
}

.token.punctuation.interpolation-punctuation {
	color: #569cd6;
}

.token.boolean {
	color: #569cd6;
}

.token.property,
.token.variable,
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
	color: #9cdcfe;
}

.token.selector {
	color: #d7ba7d;
}

.token.escape {
	color: #d7ba7d;
}

.token.tag {
	color: #569cd6;
}

.token.tag .token.punctuation {
	color: #808080;
}

.token.cdata {
	color: #808080;
}

.token.attr-name {
	color: #9cdcfe;
}

.token.attr-value,
.token.attr-value .token.punctuation {
	color: #ce9178;
}

.token.attr-value .token.punctuation.attr-equals {
	color: #d4d4d4;
}

.token.entity {
	color: #569cd6;
}

.token.namespace {
	color: #4ec9b0;
}
/*********************************************************
* Language Specific
*/

pre[class*="language-javascript"],
code[class*="language-javascript"],
pre[class*="language-jsx"],
code[class*="language-jsx"],
pre[class*="language-typescript"],
code[class*="language-typescript"],
pre[class*="language-tsx"],
code[class*="language-tsx"] {
	color: #9cdcfe;
}

pre[class*="language-css"],
code[class*="language-css"] {
	color: #ce9178;
}

pre[class*="language-html"],
code[class*="language-html"] {
	color: #d4d4d4;
}

.language-regex .token.anchor {
	color: #dcdcaa;
}

.language-html .token.punctuation {
	color: #808080;
}
/*********************************************************
* Line highlighting
*/
pre[class*="language-"] > code[class*="language-"] {
	position: relative;
	z-index: 1;
}

.line-highlight.line-highlight {
	background: #f7ebc6;
	box-shadow: inset 5px 0 0 #f7d87c;
	z-index: 0;
}


html {
    visibility: visible;
    opacity: 1;
}