body {
	margin: 0;
	width: 100%;
	background-color: #ffffcc;
	color: #000000;
	font-family: monospace;
	font-size: 1.2em;
}

header {
	width: 100%;
}

/* Logo */
header h1 img {
	height: 5em;
}

nav {
	max-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}

nav a, nav a:visited {
	color: #003300;
	text-decoration: none;
	padding: 0.6em;
	border: solid 0.1rem #b2b27c
}

#content {
	margin: auto;
	padding: 0 0.5em 10em;
	max-width: 15cm;
}

 h1 {
	 text-align: center;
 }

 a, a:visited {
	 color: #003300;
 }

 img, video {
	 max-height: 60vh;
	 max-width: 100%;
	 display: block;
	 margin-left: auto;
	 margin-right: auto;
 }

 .article-list {
	 background-color: #fff2cc;
	 padding: 1em;
	 margin: 1rem 0;
 }

 .article-list h2 {
	 text-align: center;
	 padding: 0.5em;
	 margin: 0;
 }

 .postmeta {
	 display: flex;
	 justify-content: center;
	 list-style-type: none;
	 padding: 0;
	 gap: 1em;
 }

 .postmeta li svg {
	 height: 1em;
 }

:target,
:target::marker {
	font-weight: bold;
	animation: highlight 10s;
}

@keyframes highlight {
	from {
		background-color: #ccb751;
	}
	to {
		background-color: #ffffcc;
	}
}

#trackList {
	padding: 0;
}
#trackList > li {
	display: block;
	border-bottom: solid 0.1rem #b2b27c;
}
.trackRow {
	font-size: 1.2em;
	display: flex;
	padding: 0.2em;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.trackRow > span:first-child {
	flex-grow: 1;
}
/* No-JS players */
#trackList > li audio,
#trackList > li > span:last-child {
	width: 100%;
}
.trackRow > button {
	width: 2rem;
	height: 2rem;
	border: 0;
	font-size: 1.2rem;;
	background-color: #cccc99;
}
.trackRow > button:hover {
	background-color: #e5e5ac;
	cursor: pointer;
}

/* Lyrics */
summary {
	padding: 0.4em;
	color: #333328;
}

/* Player */
#playerContainer {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0 0 0;
	color: #ffffcc;
	background-color: #333328;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	min-height: 6em;
	position: fixed;
	bottom: 0px;
}

#playerContainer button:first-child {
	margin-left: 0.2em;
}

#playerContainer > button {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 150%;
	color: #ffffcc;
	background-color: #0000;
	border: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#playerContainer > button:hover {
	background-color: #ffffcc20;
	cursor: pointer;
}

#playerContainer > span {
	font-size: 1.4em;
	display: block;
	flex-grow: 1;
}

#playerContainer > audio {
	width: 100%;
}