:root {
    --bg: #fff;
    --text: #222;
    --highlight: #96D0FA;
    --highlight2: #FFC3A6;
    --secondary-bg: #F4F4F4;
    --code-text: #555;
    --title: #cff1cf;
    --bg-shadow: #eee;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #222;
		--text: white;
		--highlight: #96D0FA;
		--highlight2: #FFC3A6;
		--secondary-bg: #444444;
		--code-text: #EEE;
    --bg-shadow: #333;
	}

	h1, th, dt, dt a {
		color: var(--bg) !important;
	}
}

.columns {column-count:3;margin-top:3em}

@media screen and (max-width:1000px) {
  .columns{column-count:2}
}

@media screen and (max-width:600px) {
  .columns{column-count:unset}
}

img {max-width:100%}

tr:nth-child(even) {
  background-color: var(--secondary-bg);
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: sans-serif;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3rem;
}

p, a {
    line-height: 1.3em;
    letter-spacing: 0.25px;
}

a, a:visited, a:active {
    color: var(--text);
    text-decoration: none;
    font-weight: normal;
    font-style: italic;
}

a:hover{text-decoration:underline}

.table-container {
  max-width:100%;
  overflow-x:auto;
}

table{margin-top:4rem}
table#ingredients{margin-top:1.5rem}
table td{padding: 0.5rem}

.green {
	color: green;
	font-weight: bold;
}

.link-p{margin: 0.2em}

code {
    background: var(--secondary-bg);
    border: 1px solid var(--code-text);
    border-left: 3px solid var(--highlight);
    color: var(--code-text);
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em 1.7em;
    display: block;
    word-wrap: break-word;
}

span.inline-code {
	background-color: var(--secondary-bg);
	border: 1px dotted var(--code-text);
  font-family: monospace;
	padding: 0 0.25em;
	font-size: 1.06em;
	display: inline-block;
}

.arrow-list{padding-left:2ch}
.arrow-list li {border: none}
.arrow-list li::marker {content: '\279c'}

.link-p::before {
  content: '\279c';
  margin-right: 0.5em;
}

.link-p.back::before{transform: scaleX(-1)}

.link-p.home::before{content: '\2604'}

h1, th {
    background-color: var(--highlight);
    color: var(--text);
    padding: 5px;
}

h1.title {background-color: var(--title)}

h1, h2, h3 {
    font-family: monospace;
    display: inline-block;
}

h2 {
    margin-top: 2em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--highlight);
}

h3 {
    margin-top: 1.5em;
    border-bottom: 2px solid var(--highlight);
}

div[role="image"]:first-child {
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
}

hr {
    border: 0;
    height: 0;
    margin: 2em 0;
}

ul {list-style: none}

ul li {
    margin-bottom: 0.4em;
    border-left: 3px solid var(--highlight2);
    padding-left: 0.75em;
}

.images {
	font-size: 0;
	text-align: center;
  max-width: 90vw;
}

.images img {
	max-width: 200px;
	margin: 4rem 2rem 0;
	border-radius: 50%;
	border: 2rem solid var(--highlight2);
}

header h1, header nav{float: left}

header ul {
  list-style: none;
  columns: 3;
  max-width: 600px;
  column-gap: 2rem;
}

header ul li a {
  font-weight: lighter;
  font-family: monospace;
}

hr {
  clear: both;
  border-top: 2px dashed var(--highlight);
}

main{margin-bottom: 5rem}

h4{margin-top: 4rem}

h3{margin-top: 5rem}

.outline {
  border: 1px dotted var(--text);
  padding: 1rem;
  background-color: var(--secondary-bg);
  display: inline-block;
  margin-bottom: 2rem;
  margin-top: 2rem;
  border-radius: 5px;
}

.outline li{line-height: 175%}

.outline ol ol{list-style: lower-alpha}

dt {
  background-color: var(--highlight2);
  display: inline-block;
  padding: 0.25rem;
  margin-bottom: 0.25rem;
}

dd{margin-bottom: 1.5rem}

#image-list img {
  display: block;
  max-width: 80%;
  border: none;
  border-radius: initial;
  width: 80%;
  margin: 2rem auto;
}

.album-listing {
  padding-left:0;
  text-align:center;
  margin-top:4em;
}

.card {
  border-radius:5px;
  padding: 2px;
  padding-bottom:4px;
}

.album-listing a:hover .card,
.album-listing a:focus .card {
  background-color: var(--bg-shadow);
}

.album-listing li {
  display:inline-block;
  border:0;
  padding:0;
  text-align:center;
  max-width:225px;
  width:225px;
  vertical-align:top;
  margin-bottom:2em;
}

.album-listing img {
  max-width:100%;
  margin: initial;
  border:0;
  width: 225px;
  margin-bottom:0.5em;
  border-radius:0;
}

.album table{margin-top:1em}

.album ul li span:first-child{font-weight:bold}

.artbox img {max-height: 250px;vertical-align:top;margin-bottom:1em}
cite{display:block;margin-top:1em;font-size:0.95em}
cite:before{content: '— '}

main a, main a:visited, main a:active{text-decoration: underline}

ul ul{margin-top:0.5em;margin-bottom:0.5em}
ul ul li{border-left-color: var(--highlight)}

.figures figure{padding:1.5em;border:1px solid var(--highlight);border-radius:10px;break-inside:avoid;margin:0;margin-bottom:1.5em}
.figures img{border-radius:8px}
.figures figcaption{margin-top:1.5em}

.toc{display:inline-block;border:3px solid var(--highlight2);padding-right:1em;border-radius:10px}
.toc ol {list-style: upper-roman}
.toc ol ol{list-style: upper-alpha}

.toc ol li {
    margin-bottom: initial;
    border-left: none;
    padding-left: initial;
    line-height: 1.5em;
}

figcaption details {margin-top:2em;padding:5px;background:var(--secondary-bg);border:1px solid var(--highlight2);border-radius:10px}
figcaption details summary{padding:5px}