/* Layout inspired by sw (MIT), Nibble and contributors. */
:root { color-scheme: light; --ink: #111; --link: #369; --header: #ccc; --bar: #ddd; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font: 1rem/1.6 sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.header { background: var(--header); }
.headerTitle { margin: 0; padding: .5em 1em; font-size: 1.6rem; }
.headerTitle a { color: var(--ink); }
.headerSubtitle { font-size: .65em; font-weight: normal; margin-left: 1em; }
#side-bar { background: var(--bar); padding: .3em 1em; }
#side-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em 1em; }
.folder-icon { width: 1em; height: 1em; margin-right: .35em; vertical-align: -.125em; }
.skill-download { display: inline-block; padding: .5em 1em; border: 1px solid var(--link); border-radius: .25em; background: var(--link); color: #fff; font-weight: bold; }
.skill-download:hover { filter: brightness(.85); text-decoration: none; }
.skill-download:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#main { max-width: 120ch; margin: 0 0 0 2em; padding: 1em 3em 2em 1em; overflow-wrap: anywhere; }
h1, h2 { color: #666; line-height: 1.3; }
pre { overflow: auto; background: #f4f4f4; padding: 1em; }
code { font-size: .95em; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
th, td { padding: .4em .8em; border: 1px solid #ccc; text-align: left; }
blockquote { border-left: 2px solid #666; margin-left: 0; padding-left: 1em; }
img, video { max-width: 100%; height: auto; }
#footer { background: var(--bar); padding: 2em; text-align: right; font-size: .9em; }
#footer > :first-child { margin-top: 0; }
#footer > :last-child { margin-bottom: 0; }
.auxesia-errors { position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; max-width: min(42rem, calc(100vw - 2rem)); max-height: 45vh; overflow: auto; border: 2px solid #b33; background: #fff4f4; color: #500; padding: 1em; box-shadow: 0 2px 8px #999; }
@media (max-width: 600px) { #main { margin: 0; padding: 1em; } .headerSubtitle { display: block; margin-left: 0; } }