@charset "UTF-8";
:root {
	--color-title: #000 ; /* title and hover over links */
	--color-text: #000;
	--color-text-accent: #666; /* links and <small> */
	--color-background: #fff;
	--color-background-accent: #eee; /* title background and <hr> */
}

/* classes for switching between light and dark images */
.light {
	display: initial;
}

.dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
:root {
	--color-title: #fff;
	--color-text: #ccc;
	--color-text-accent: #888;
	--color-background: #0c0c0c;
	--color-background-accent: #333;
}

.light {
	display: none;
}

.dark {
	display: initial;
}
} /* end of @media (prefers-color-scheme: dark) */


html {
	scrollbar-color: var(--color-background-accent) var(--color-background);
}

body {
	color: var(--color-text);
	background-color: var(--color-background);
	fill: currentColor;
	stroke: currentColor;
	font-size: 16px;
	text-align: left;
	font-family: "Bitstream Vera Sans", "Arial", sans-serif; 
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 5%;
	padding-right: 5%;
	margin: 0;
	margin-left: auto; /* center page on wide screen */
	margin-right: auto;
	max-width: 110ch; /* makes text column ~80ch */
}

input,
textarea,
select,
button {
	color: inherit;
	background-color: inherit;
}

h1 {
	/* site title */
	color: var(--color-title);
	font-size: 1.5rem;
	margin: 0;
	display: inline;
}

h2 {
	/* page title */
	color: var(--color-title);
	font-size: 2rem;
	margin: 0;
}

h3 {
	/* section and article title */
	color: var(--color-title);
	background-color: var(--color-background-accent);
	font-size: 1.25rem;
	margin: 0;
	padding-left: 25%; /* background-color should be visible in left column -> use padding */
}

h4 {
	/* subsection title */
	color: var(--color-title);
	font-size: 1rem;
	margin: 0;
	margin-top: 1rem;
	margin-left: 25%;
	clear: both;
}

h5 {
	/* used in bass tabs */
	color: var(--color-title);
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
	margin-top: 1rem;
	margin-left: 25%;
}

header.site div {
	width: 25%;
	display: inline-block;
	/*text-align: center;*/
	white-space: nowrap;
}

header.site img {
	height: 1.75rem;
	width: auto;
	margin-bottom: -.3rem; /* shift image down a little */
}

header.site a img {
	text-decoration: underline;
}

header.site nav {
	display: inline-block;
}

header.site ul {
	margin-left: 0;
}

header.page {
	clear: both;
	margin-bottom: 1rem;
	margin-left: 25%;
}

section header,
article header {
	clear: both;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

header.h5 {
	/* sections with h5 title, unfortunately no elegent way to select on that */
	margin-bottom: 0;
}

small {
	/* page, section, article */
	color: var(--color-text-accent);
	display:block;
	font-size: .75rem;
	margin-top: .25rem;
}

article header small,
section header small {
	margin-left: 25%;
}

section section small {
	/* subsection */
	margin-top: 0rem;
	margin-bottom: .25rem;
}

table,
p,
blockquote {
	margin: 0;
	margin-bottom: 1rem;
	margin-left: 25%;
}

article,
section {
	clear: both;
	margin-bottom: 1rem;
}

.hidden {
	display: none;
}

a {
	color: var(--color-text-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-title);
	text-decoration: underline;
}

a svg,
a:hover svg {
	/* otherwise svg colours change */
	color: var(--color-text);
	background-color: var(--color-background);
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

del {
	text-decoration: line-through;
}

ins {
	text-decoration: none;
	font-style: italic;
}

ul {
	margin-top: 0;
	margin-bottom: 1rem;
	margin-left: 25%;
}

nav ul {
	margin-bottom: 0;
	margin-right: 0;
	padding: 0;
	overflow: hidden; /* causes ul to have a defined height with all floating li */
}

nav.site li {
	padding: 0;
	margin: 0;
	margin-right: 4rem;
	list-style-type: none;
	display: inline-block;
}

.selected {
	color: var(--color-title);
}

main {
}

div.clear {
	clear: both;
}

hr {
	clear: both;
	height: 0;
	border: 0;
	border-top: .1rem solid var(--color-background-accent);
}

pre {
	margin-left: 25%;
	margin-bottom: 2rem;
	page-break-inside: avoid;
}

figure.sidebar,
figure.article {
	clear: both;
	float: left;
	margin: 0;
	margin-bottom: 2rem;
	background-color: var(--color-background-accent);
}

figure.sidebar {
	width: calc(25% - 1rem); /* this value is also set in picture srcset sizes in html */
}

figure.article {
	margin-left: 25%;
	width: 50%;
}

figure figcaption,
table caption {
	font-size: .75rem;
	text-align: left;
	caption-side: bottom;
	max-width: 100%;
	padding-left: .25rem;
}

table caption {
	margin-top: .5rem;
}

figure img,
figure video {
	width: 100%;
	height: auto;
}

code {
	font-family: "Lucida Console", "Bitstream Vera Sans Mono", monospace;
	background-color: var(--color-background-accent);
}

q,
blockquote {
	font-style: italic;
}

q::before,
blockquote::before {
	content: open-quote;
}

q::after,
blockquote::after {
	content: close-quote;
}

blockquote {
	padding-left: 2rem;
	padding-right: 2rem;
}

th,
td {
	padding: 0 .25rem;
}

table,
th,
td {
	border: 2px solid var(--color-background-accent);
	border-collapse: collapse;
}

iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 315;
	border: 0;
	margin: 0;
	padding: 0;
}

div.audio-player {
	margin-left: 25%;
}

section section header {
	margin: 0;
}

footer {
	clear: both;
}

footer.site {
	margin-top: 2rem;
}


/* these @media sections are at the bottom, so they overrule everything defined earlier */
@media (max-width: 1040px) {
/* ascii bass tabs are not properly readable under 730px small layout and 1040px wide layout */
body {
	padding-left: 1rem;
	padding-right: 1rem;
}

h1,
h2,
h3,
h4,
h5,
header.page,
p,
blockquote,
ul,
pre,
article header small,
section header small,
div.audio-player {
	margin-left: 0;
	padding-left: 0;
}

blockquote {
	padding-left: 2rem;
	padding-right: 2rem;
}

header.site div {
	width: initial;
	text-align: initial;
	margin-right: 2rem;
}

nav.site li {
	margin-right: 2rem;
}

figure.sidebar {
	margin-left: 0;
	margin-right: .5rem;
	width: 50%; /* this value is also set in picture srcset sizes in html */
}

figure.article {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
} /* end of @media (max-width) */

@media print {
body {
	font-family: "Bitstream Vera Serif", "Times New Roman", serif;
	margin: 0;
	padding: 0;
}

h3,
figcaption {
	border-width: thin;
	border-style: solid;
	border-color: initial;
	background-color: initial;
}

table,
p {
	margin-right: 0;
}

a {
	color: currentColor;
	text-decoration: initial;
}

p a:link:after {
	content: " (" attr(href) ")";
	font-size: .75rem;
}

nav.site,
header.site,
footer.site,
div.filter,
section.filter,
section#music {
	display: none;
}

figure.sidebar figure.article {
	margin-right: 2%; /* double size of web layout */
	width: 48%;
}
} /* end of @media print */
/* end of css */