/*
 * Stylesheet for https://rshadr.neocities.org
 * This file can be found live at:
 *   https://rshadr.neocities.org/style.css
 * No copyright 2024; I don't give a shit
 */

html {
  width: 100%;
  height: 100%;

  font-family: Roboto, sans-serif;
  font-size: 12pt;
  color: black;

  background-color: white;
}


body > main,
body > main > :is(header:has(+ *), section:has(+ footer))::after {
  margin-left: auto;
  margin-right: auto;
  max-width: 56em;
}

body > main > :is(header, section, footer) {
  margin-top: 1em;
  margin-bottom: 1em;
}

body > main > :is(header:has(+ *), section:has(+ footer)) {
  margin-bottom: 2em;
}

body > main > :is(header:has(+ *), section:has(+ footer))::after {
  content: '';
  height: 2pt;
  width: 100%;
  position: relative;

  opacity: 0.2;
  background-color: black;
}



/*
 * ======
 * HEADER
 * ======
 */

header > h1 {
  text-align: center;
}



/*
 * ========
 * ELEMENTS
 * ========
 */
details > summary {
  display: block;

  padding-left: 0.61em;

  background-color: #b0c4de;

  border-left-style: solid;
  border-left-width: 0.5em;
  border-left-color: #4b79b4;
}

details > summary::after {
  white-space: pre;

  font-weight: bold;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 1em;

  background-color: yellow;
}

details > summary:hover::after {
  background-color: orange;
}

details:not([open]) > summary::after {
  content: " read more 🡒 ";
}

details[open] > summary::after {
  content: " 🡐 read less ";
}

details:not([open]) > summary:hover {
  cursor: zoom-in;
}

details[open] > summary:hover {
  cursor: zoom-out;
}

details[open] {
  border-left-style: solid;
  border-left-width: 0.5em;
  border-left-color: #4b79b4;

  padding: 0.5em;
  padding-top: 1em;

  background-color: #d9e6f2;
}



dl {
  background-color: #b3ffec;

  border-left-style: solid;
  border-left-width: 0.5em;
  border-left-color: #00e6ac;

  padding: 0.5em;
}

dl > dt {
  width: auto;

  padding: 0.5em;
  padding-left: 1em;
  background-color: #ccfff2;

  font-style: italic;
  font-weight: bold;
}

dl > dd > ul {
  padding-left: 0;
}


abbr {
  font-style: italic;
}


/*
 * regular links
 */
a {
  text-decoration: underline;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}


/*
 * unfinished links
 */
a.wip-link {
  text-decoration: line-through;
  color: gray;
}

a.wip-link:hover {
  cursor: not-allowed;
}

a.wip-link::after {
  content: "[🔨]";
  color: black;
  background-color: #b0e0e6;
  text-decoration: none;
}


/*
 * broken links
 */
a.dead-link {
  text-decoration: red wavy underline;
  color: red;
}

a.wip-link:hover {
  cursor: not-allowed;
}

a.dead-link::after {
  content: "[💀]";
  color: black;
  background-color: #ffcccc;
  text-decoration: none;
}

/*
 * external links
 */
a.external-link:hover {
  cursor: alias;
}

a:hover {
  background-color: orange;
}

em:hover {
  background-color: lime;
}


strong:hover {
  background-color: yellow;
}


figure > img {
  display: block;

  margin-left: auto;
  margin-right: auto;
  text-align: center; /* for alt text */

  max-height: 10em;
}

figure > figcaption {
  display: block;

  margin: 1.61em;

  text-align: center;
  font-style: italic;
}





/*
 * ===========
 * PAGE FOOTER
 * ===========
 */

footer > span:not(:last-child)::after {
  content: " ‖ ";
  white-space: pre;

  font-weight: bold;

  opacity: 0.4;
}


/*
 * Only put separators if there's atleast 2 child nodes
 */
footer #page-stamps:has(time#last-modified) > time#created::after {
  content: " / ";
  white-space: pre;
}

footer #page-stamps > time {
  font-family: monospace;
}

footer #page-stamps > time::before {
  font-family: sans-serif;
}

footer #page-stamps > time#created::before {
  content: "Created: ";
}

footer #page-stamps > time#last-modified::before {
  content: "Last Modified: ";
}


/*
 * WIDGETS
 */
iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

iframe[src="/widgets/w3stan.html"] {
  /* aspect-ratio: 0.8; */

  max-height: 20em;

  width:  20em;
  height: 20em;
}


/*
 * DARK THEME OVERRIDES
 */

@media (prefers-color-scheme: dark) {
  html {
    color: white;
    background-color: black;
  }

  body > main > :is(header:has(+ *), section:has(+ footer))::after {
    background-color: white;
  }

  details > summary {
    background-color: #000099;
  }

  details > summary::after {
    background-color: yellow;
  }

  details > summary:hover::after {
    background-color: orange;
  }

  details[open] {
    background-color: #000066;
  }

  dl {
    background-color: #004d39;
    border-left-color: #00e6ac;
  }

  dl > dt {
    background-color: #009973;
  }

  a:link {
    color: #00ccff;
  }

  a:visited {
    color: #2eb8b8;
  }

  a.wip-link {
    color: gray;
  }
}