/* COLORS */

:root {
  --color0: black;
  --color1: maroon;
  --color2: green;
  --color3: olive;
  --color4: navy;
  --color5: purple;
  --color6: teal;
  --color7: silver;
  --color8: gray;
  --color9: red;
  --color10: lime;
  --color11: yellow;
  --color12: blue;
  --color13: fuchsia;
  --color14: aqua;
  --color15: white;

  --color16: darkcyan;

  --desktop-background: teal;
  --desktop-foreground: black;

  --control-background: silver;
  --control-highlight: white;
  --control-lowlight: gray;
  --control-shadow: black;

  --title-background: navy;
  --title-foreground: white;

  --document-background: white;
  --document-foreground: black;


  --background: silver;
  --background-highlights: yellow;
  --primary: black;
  --secondary: black;

  --url-color: navy;

  --zoom: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desktop-background: black;
    --desktop-foreground: #ddd;
    --control-background: #444;
    --control-highlight: #888;
    --control-lowlight: #222;
    --control-shadow: #111;
    --title-background: #004;
    --title-foreground: #ddd;
    --document-background: black;
    --document-foreground: #ddd;
    --primary: #ddd;
    --secondary: #ddd;
    --url-color: white;
  }

  img {
    filter: brightness(0.8);
  }
}

/* 3d effect, using layered box shadows */

:root {
  --outset-3d-effect:
    inset -1px -1px 0 var(--control-shadow), /* bottom right shadow */
    inset  1px  1px 0 var(--control-background), /* top left background */
    inset -2px -2px 0 var(--control-lowlight), /* bottom-right lowlight */
    inset  2px  2px 0 var(--control-highlight); /* top left highlight */

  --outset-3d-effect-small:
    inset -1px -1px 0 var(--control-shadow), /* bottom right shadow */
    inset  1px  1px 0 var(--control-highlight), /* top left highlight */
    inset -2px -2px 0 var(--control-lowlight); /* bottom-right lowlight */

  --inset-3d-effect:
  inset -1px -1px 0 var(--control-highlight), /* bottom right background */
  inset  1px  1px 0 var(--control-lowlight), /* top left shadow */
  inset -2px -2px 0 var(--control-background), /* bottom-right highlight */
  inset  2px  2px 0 var(--control-shadow); /* top left lowlight */

  --inset-3d-effect-small:
    inset  1px  1px 0 var(--control-lowlight), /* top left lowlight */
    inset -1px -1px 0 var(--control-highlight); /* bottom-right highlight */
}


/* RESET */

/**
 * Eric Meyer's Reset Stylesheet
 *
 * v2.0
 * 2011-01-26
 * Author: Eric Meyer - http://meyerweb.com/eric/tools/css/reset/
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* LAYOUT */

* {
  box-sizing: border-box;
}

body > main {
  max-width: 47rem;
  width: calc(100% - 2rem);
  margin: 0 auto;
  flex-grow: 1;
}

video {
  /* display: block; */
  width: 100%;
}

/* STYLE */

/* global */

html {
  zoom: var(--zoom);
  min-height: calc(100vh / var(--zoom));
  font-size: 14px;
}

body {
  min-height: calc(100vh / var(--zoom));
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

em {
  font-style: italic;
}

h1, h2, h3, h4, h5, h6, header nav a, details summary {
  font-size: 1rem;
}

h1 a,
details summary {
  text-decoration: none;
  display: inline-block;
  padding: 3px 6px;
  box-shadow: var(--outset-3d-effect-small);

  &:hover {
    text-decoration: none;
  }

  &:active {
    box-shadow: var(--inset-3d-effect-small);
  }
}

header nav,
footer ul.links {
  margin-left: auto;
  margin-bottom: 0;
  padding: 3px 6px;
  width: fit-content;
  box-shadow: var(--inset-3d-effect-small);
}

/* site header */

body > header, body > footer {
  display: flex;
  justify-content: space-between;

  & > :last-child {
    flex-grow: 1;
    flex-basis: 0;
  }
}

details {
  > summary {
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
    width: fit-content;
  }

  &[open] > summary {
    box-shadow: var(--inset-3d-effect-small);
  }

  > div {
    display: flex;
    position: absolute;
    background-color: var(--control-background);
    box-shadow: var(--outset-3d-effect);
    padding: 3px;

    h1 {
      margin: 0;
      background-color: var(--color8);
      color: var(--title-foreground);
      padding: 6px 3px;
      writing-mode: sideways-lr;
      height: fit-content;
    }

    ul {

      li {
        display: block;

        a {
          display: block;
          padding: 3px 6px;
          background-color: inherit;
          color: inherit;
        }

        &:hover {
          background-color: var(--title-background);
          color: var(--title-foreground);
        }
      }
    }
  }
}

body > header {
  position: sticky;
  top: 0;
  margin-bottom: 1rem;
  display: flex;
  gap: 3px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 3px;
  box-shadow: var(--outset-3d-effect);
  background-color: var(--control-background);
}

body > header > * {
  margin: 0;
  align-content: center;
}

body > header > ul,
footer ul.links {
  display: flex;
  list-style: none;
  margin-bottom: 0;
  gap: 3px;
  padding: 0 0.5rem;
}

/* page list */

.archive li time {
  margin-right: 0.25rem;
  width: 10ch;
  display: inline-block;
}

.archive li {
  margin-bottom: 0.25rem;
}

.archive a:hover {
  text-decoration: underline;
}

h2.archive {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* breadcrumbs */

.breadcrumbs ul, .breadcrumbs li, .breadcrumbs a, .breadcrumbs h1 {
display: inline
}

.breadcrumbs h1 {
  font-size: 1rem;
}

.breadcrumbs {
  margin-bottom: 1rem;
}

/* articles */

p, ol, ul, a, pre {
  line-height: 1.5;
}

article header h1, article header h1 a, main > nav header h1 {
  line-height: 1.2;
}

p, ul, ol, h1, h2, h3, h4, h5, h6, img, iframe, object, article li {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

h1 {
  font-weight: bold;
}

h2 {
  font-weight: bold;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

h3 {
  font-weight: bold;
}

h4 {
  font-style: italic;
}

h5 {
  font-weight: bold;
  font-size: 0.5rem;
}

h6 {
  font-style: italic;
  font-size: 0.5rem;
}

img {
  height: auto;
}

img, iframe, object {
  max-width: 100%;
}

iframe {
  display: block;
}

pre code::before {
  counter-reset: listing;
}
pre code > * {
  counter-increment: listing;
}
pre code > *::before {
  content: counter(listing) ". ";
  display: inline-block;
  width: 3rem;
  padding-left: auto;
  margin-left: auto;
  text-align: right;
  color: gray;
}

pre > code {
  line-height: 1.2;
  font-size: 0.9rem;
  display: block;
  overflow: auto;
}

pre {
  padding: 3px;
  box-shadow: var(--inset-3d-effect);
  font-family: monospace;
}

article li {
  margin-left: 1.25rem;
  font-weight:normal;
  list-style-type: disc;
}

article ul {
  padding-bottom: 0.5rem;
}

article > footer {
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.25rem;
  margin: 1px;
}

main > nav,
article {
  margin-bottom: 1rem !important;

  & > :not(header):not(footer) {
    margin: 1rem;
  }
}

ul.card {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style-type: none;
  padding: 0;

  li {
    /* background-color: var(--document-background); */
    flex: 1 1 25%;
    box-shadow: var(--inset-3d-effect);
    padding: 3px;
    text-align: center;

    a {
      display: flex;
      flex-direction: column;

      * {
        margin-bottom: 0;
      }

      div {
        padding: 0.25rem;
      }
    }
  }
}

/* Site footer */

body > footer {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3px;
  box-shadow: var(--outset-3d-effect);
  background-color: var(--control-background);
}

/* background */
body {
  background-color: var(--desktop-background);
  color: var(--desktop-foreground);
}
body > header h1 a,
body > header nav a {
    color: var(--desktop-foreground);
}

body > header nav,
body > footer .links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-direction: row;
}

article,
main > nav {
    padding: 3px;
    box-shadow: var(--outset-3d-effect);
    background-color: var(--control-background);
}
article header h1,
main > nav header h1 {
    margin: 0;
    padding: 0.25rem;
    background-color: var(--title-background);
    color: var(--title-foreground);
}
article footer {
  background-color: var(--control-background);
  box-shadow: var(--inset-3d-effect-small);
}
code {
  font-weight: bold;
}

pre code {
  font-weight: normal;
  border: 0;
  background-color: var(--document-background);
}

/* primary */
article header h1 a,
h1, h2, h3, h4, h5, h6, p, li {
  color: var(--primary);
}

/* secondary */
body > footer a,
article > footer,
body > footer a {
  color: var(--secondary);
}
pre {
  border-color: var(--secondary);
}

/* highlight */
a {
  color: var(--url-color);
}