/* 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);


    --base03:#002b36;
    --base02:#073642;
    --base01:#586e75;
    --base00:#657b83;
    --base0:#839496;
    --base1:#93a1a1;
    --base2:#eee8d5;
    --base3:#fdf6e3;
    --yellow:#b58900;
    --orange:#cb4b16;
    --red:#dc322f;
    --magenta:#d33682;
    --violet:#6c71c4;
    --blue:#268bd2;
    --cyan:#2aa198;
    --green:#859900;

    --bg: light-dark(var(--base3), var(--base03));
    --bg2: light-dark(var(--base2), var(--base02));
    --text: light-dark(var(--base03), var(--base3));
    --accent: light-dark(var(--orange), var(--violet));
    --accent1: light-dark(var(--blue), var(--green));

    --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: 85vw;
  padding: 0 1rem;
}

article {
  max-width: 65ch;
  margin: 0 auto;
}

/* || header */
header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 50px 0;
}

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

header h1 a {
  text-decoration: none;
  color: var(--text);
}

header h1 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

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;
}

/* for 'the map room' */
  .outerGallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin: 2lh auto;
    gap: 15px 15px;
    /* height: 340px; */
  }

  .gallery {
    background-color: var(--bg);
    transform-origin: center center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* background: var(--bg); */
  }

  .gallery img {
    height: 200px;
    width: 200px;
    object-fit: cover;
    /* border-radius: 20px 20px 20px 20px; */
    border-radius: 50%;
    border: 3px solid var(--text);
    box-shadow: 3px 3px 6px var(--base03);
  }

  .gallery img:hover {
    box-shadow: 5px 5px 10px var(--base03);
    transform: scale(1.1) rotate(3deg);
  }

  /* on feature pages */
  .featuredImg {
    width: 90vw;
    margin-left: calc(50% - 45vw);
    margin-right: calc(50% - 45vw);
    margin-top: 1lh;
    margin-bottom: 1lh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
  }

  .featuredImg img {
    max-width: 100%;
    max-height: 95svh;
    height: auto;
    width: auto;
    display: block;
  }

  figcaption {
    font-style: italic;
    max-width: 65ch;
    text-align: justify;
    margin-top: 0.8lh;
    margin-bottom: 0;
  }


  th {
    vertical-align: top;
    padding: 0 1em;
  }

  table {
    margin: 1lh auto;
    max-width: 65ch;
  }



.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;
}

.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;
}


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;
}


html {
    visibility: visible;
    opacity: 1;
}