html { background-color: black; max-height: 100%; margin: 1em 2em; font-family: 'IBM Plex Sans', sans-serif; scroll-behavior: smooth; }

body { overflow-y: scroll; --hue: 43; --wire: hsla(var(--hue), 100%, 51%, .95); --highlight: hsla(var(--hue), 100%, 51%, .35); --hover: hsla(var(--hue), 100%, 51%, .3); --text: hsl(calc(var(--hue) + .2), 100%, 90%); /*  overflow: visible; */ color: var(--text); font-weight: 300; font-size: 90%; position: relative; margin: auto; width: 100%; min-width: 18em; max-width: 70em; height: 200em; max-height: 95vh; }
body.art { --hue: 283; }
body.foo { --hue: 163; }
body > footer { position: sticky; bottom: calc(4px + 6px); left: 0; margin-left: 0px; }
body > footer > a { border: var(--wire) 0.3pt solid; background-color: #0000; backdrop-filter: blur(5px); box-shadow: 4px 4px 0px -1px black, 4px 4px var(--wire); transition: all 0.3s ease-in-out; transition-property: box-shadow, transform; display: inline-block; text-decoration: none; margin: 0 .1em; padding: .15em .3em; font-family: sans-serif; font-size: 88%; }
@media (hover: hover) { body > footer > a { will-change: transform; }
  body > footer > a:hover { box-shadow: 0px 0px 0px -1px black, 0px 0px var(--wire); transform: translate(4px, 4px); } }

a, a:visited, a:active, a:hover { color: var(--text); }

a:hover { text-decoration: none; }

h2 { margin-block: 0; }
h2 > small { font-size: .6em; }

h3 { margin-block: .2em 1.5em; font-size: .85rem; font-weight: normal; font-style: italic; }

blockquote { border: dashed 1px var(--text); padding: 0 1em; }
blockquote > blockquote { margin: 1.3em 10px; }
blockquote > footer > p { margin: 0px; text-align: right; font-size: 80%; font-style: italic; }

pre { color: black; width: 100ch; max-width: 90%; white-space: pre-wrap; overflow-wrap: break-word; text-indent: 4ch hanging each-line; }

code { font-family: monospace; font-weight: normal; }

#main { border: none; margin: auto; padding-bottom: 3em; width: 100%; }
#main.index { display: grid; align-items: start; row-gap: .7em; column-gap: 2em; /* box */ }
#main.index > div:not(#content) { border: var(--wire) 0.3pt solid; background-color: #0000; backdrop-filter: blur(5px); box-shadow: 4px 4px 0px -1px black, 4px 4px var(--wire); transition: all 0.3s ease-in-out; transition-property: box-shadow, transform; display: block; max-width: 30em; /* item title bar */ }
@media (hover: hover) { #main.index > div:not(#content) { will-change: transform; }
  #main.index > div:not(#content):hover { box-shadow: 0px 0px 0px -1px black, 0px 0px var(--wire); transform: translate(4px, 4px); } }
#main.index > div:not(#content):hover { background-color: var(--hover); }
#main.index > div:not(#content).highlight { background-color: var(--highlight); }
#main.index > div:not(#content) > a { display: block; padding: .4em .5em; cursor: zoom-in; text-decoration: none; /* title text */ }
#main.index > div:not(#content) > a > div { font-weight: 600; }
#main.index > div:not(#content) > a > div > img { display: none; vertical-align: middle; height: 1.5em; --stroke: 4, 255, 183; --fill: 4, 255, 183; }
#main.index > div:not(#content) > a > div > div { font-size: 80%; /*  display: block; */ padding: .3em .3em .1em; margin: .1em; float: right; vertical-align: top; position: relative; font-weight: normal; }

#content { min-width: 20em; max-width: 90vw; max-height: 0; height: fit-content(10em); opacity: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); overflow-y: scroll; }
#content::-webkit-scrollbar { display: none; }
#content.full { max-height: 90vh; opacity: 1; }
#content > div { padding: 2em 3em; }
#content > div:not(:first-child) { border-top: --var(wire) 0.3pt solid; }
#content > div > div > p > img, #content > div > a > img { display: block; max-width: 80%; max-height: 60vh; margin: 1.5em auto; }
#content p.link { text-align: right; font-family: monospace; font-weight: normal; }

@media (min-width: 60em) { #main { position: relative; grid-template-columns: max-content 1fr; }
  #main > div:not(#content) { grid-column-start: 1; }
  #content { position: absolute; width: 100%; grid-column-start: 2; grid-row: 1 / -1; } }
img { max-width: 100%; max-height: 100%; }

iframe { display: block; margin: auto; width: 40em; max-width: 90%; }

li { margin-top: .5em; }

#main > div:first-child, #now { font-style: italic; }

#now + div > div > div:not(:first-of-type) { text-decoration: line-through dotted var(--text) 0.05em; }

/* glightbox */
.gslide-image { max-width: 80vw; margin: auto; }

/* current image */
.gslide.loaded.current > .gslide-inner-content > .ginner-container { /* stop title+description from covering wireframe */ }
.gslide.loaded.current > .gslide-inner-content > .ginner-container > .gslide-media { border: var(--wire) 0.3pt solid; background-color: #0000; backdrop-filter: blur(5px); }
.gslide.loaded.current > .gslide-inner-content > .ginner-container .gslide-description { background-color: transparent; }
.gslide.loaded.current > .gslide-inner-content > .ginner-container .gslide-description .gslide-title { color: var(--text); }