@import url(/css/font/inter.css);

:root {
	--background: white;
	--foreground: black;
	--link-a: #3244dc;
	--link-b: #804182;
	--link-c: #b21122;
	--highlight: #ffd9e9;
	--accent: #461929;
	--emph: #595959;
	--coverart-invert: 0.3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #1a1715;
		--foreground: white;
		--link-a: #60a5f9;
		--link-b: #d381f7;
		--link-c: #ff7975;
		--highlight: #461929;
		--accent: #ffd9e9;
		--emph: #c3c3c3;
		--coverart-invert: 0.7;
	}
}

body {
	font-family: 'Inter', Helvetica, Verdana, Arial, sans-serif;
	line-height: 1.5;
	max-width: 50em;
	margin: 4vw auto;
	padding: 32px;
	background-color: var(--background);
	color: var(--foreground);
}

h1 { font-size: xx-large; }
h2 { font-size: x-large; }
h3 { font-size: large; }

.pride-underline {
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-image: -webkit-linear-gradient(130deg,
		var(--background)      15%,
		#ff5f5c  15%, #ff5f5c  29%,
		#ffc64c  29%, #ffc64c  43%,
		#fde62c  43%, #fde62c  57%,
		#a8dc64  57%, #a8dc64  71%,
		#a3c2ff  71%, #a3c2ff  85%,
		#a275bd  85%, #a275bd  99%,
		var(--background)      99%,
		var(--background)     100%) 1;
	border-image: linear-gradient(130deg,
		var(--background)      15%,
		#ff5f5c  15%, #ff5f5c  29%,
		#ffc64c  29%, #ffc64c  43%,
		#fde62c  43%, #fde62c  57%,
		#a8dc64  57%, #a8dc64  71%,
		#a3c2ff  71%, #a3c2ff  85%,
		#a275bd  85%, #a275bd  99%,
		var(--background)      99%,
		var(--background)     100%) 1;
	width: fit-content;
}

.trans-underline {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-image: -webkit-linear-gradient(to right,
		#5bcefa 20%,
		#f5a9b8 20%, #f5a9b8 40%,
		#ffffff 40%, #ffffff 60%,
		#f5a9b8 60%, #f5a9b8 80%,
		#5bcefa 80%, #5bcefa 100%) 1;
	border-image: linear-gradient(to right,
		#5bcefa 20%,
		#f5a9b8 20%, #f5a9b8 40%,
		#ffffff 40%, #ffffff 60%,
		#f5a9b8 60%, #f5a9b8 80%,
		#5bcefa 80%, #5bcefa 100%) 1;
	width: fit-content;
}

a.header-link {
	font-size: .8em;
	margin-left: .2em;
	text-decoration: none;
	padding: 0;
	user-select: none;
}

section:target {
	animation: highlight 3s;
	animation-timing-function: steps(1);
}
@media (prefers-reduced-motion: no-preference) {
	section:target { animation: highlight 3s; }
}
@keyframes highlight {
	0% {
		background: var(--highlight);
		outline: 2px var(--foreground) solid;
	}
	100% {
		background: none;
		outline: 2px transparent solid;
	}
}

a:link { color: var(--link-a); }
a:visited { color: var(--link-b); }
a:hover, a:focus, a:active {
	color: var(--link-c);
	text-decoration: none;
}
a:visited:hover, a:visited:focus, a:visited:active {
	color: var(--link-b);
	text-decoration: none;
}

ol, ul { padding: 0 20px; }
.spaced-list li:not(:last-child) {
	margin-bottom: 1em;
}

header:has(> img) {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header img {
	align-self: start;
	min-height: 3rem;
	max-height: 3rem;
}

header nav {
	line-spacing: 0.5rem;
	margin-bottom: 0.5rem;
}

header nav > ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	gap: 0 .75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: flex-end;
}

header nav > ul li {
	display: inline-block;
}

details.lang-sel {
	position: relative;
}

details.lang-sel summary {
	cursor: pointer;
}
details.lang-sel summary > span {
	/* text-decoration: underline; */
}
details.lang-sel summary:hover,
details.lang-sel summary:focus,
details.lang-sel summary:active,
details.lang-sel[open] summary {
	color: var(--link-c);
}
details.lang-sel summary:hover > span,
details.lang-sel summary:focus > span,
details.lang-sel summary:active > span {
	text-decoration: none;
}

details.lang-sel ul {
	box-shadow: 0 0 0.5rem 0.25rem var(--background);
	margin-top: 0.5rem;
	list-style-type: none;
	position: absolute;
	z-index: 1;
	right: 0;
	padding: 0.6rem 0.6rem;
	background-color: var(--background);
	border: solid 0.15rem var(--foreground);
	border-radius: 0.5rem;
	max-height: 15rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

details.lang-sel ul li {
	background: var(--background);
}

details.lang-sel ul li a {
	display: inline-block;
	padding: 0.2rem 0.4rem;
	box-sizing: border-box;
	width: 100%;
}

details.lang-sel ul li:has(a:hover),
details.lang-sel ul li:has(a:focus),
details.lang-sel ul li:has(a:active) {
	background: var(--highlight);
}

.accent {
  color: var(--accent);
}

ul.no-bullets {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

div.right {
	text-align: right;
}

div.left {
	text-align: left;
}

div.leftright {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

h2.overview {
	display: flex;
	font-size: medium;
	margin: 0;
}

address {
	font-style: normal;
}

/* Recommended for code blocks */
pre {
	padding: 1rem;
	overflow: auto;
}
pre[data-linenos] {
	padding: 1rem 0;
}
pre table td {
	padding: 0;
}
pre table td:nth-of-type(1) {
	text-align: center;
	user-select: none;
}
pre mark {
	display: block;
	background-color: rgba(254, 252, 232, 0.9);
}
pre table {
	width: 100%;
	border-collapse: collapse;
}