/* JustCoderdev's Style v1 */

:root {
	/* palette */
	--fg-primary: hsl(45deg, 25%, 80%);

	--bg-primary:   #252525;
	--bg-secondary: #3c3c3c;

	--tint-white: #ffffff;

	/* --tint-yellow-dim: hsl(45deg,  80%,  30%); */
	/* --tint-yellow:     hsl(45deg,  80%,  40%); */
	/* --tint-yellow-br:  hsl(45deg,  80%,  60%); */

	--tint-yellow-dim: oklch(45% 0.15 90); /* 50% */
	--tint-yellow:     oklch(60% 0.15 90); /* 70% */
	--tint-yellow-br:  oklch(75% 0.15 90); /* 90% */

	--tint-red-dim: oklch(50% 0.16 25);
	--tint-red:     oklch(60% 0.16 25);
	--tint-red-br:  oklch(70% 0.16 25);

	--tint-cyan-dim: oklch(50% 0.08 200);
	--tint-cyan:     oklch(60% 0.08 200);
	--tint-cyan-br:  oklch(70% 0.08 200);
}

body.accent-yellow
{
	--accent-tint-dim: var(--tint-yellow-dim);
	--accent-tint:     var(--tint-yellow);
	--accent-tint-br:  var(--tint-yellow-br);
}

body.accent-cyan
{
	--accent-tint-dim: var(--tint-cyan-dim);
	--accent-tint:     var(--tint-cyan);
	--accent-tint-br:  var(--tint-cyan-br);
}

body.accent-red
{
	--accent-tint-dim: var(--tint-red-dim);
	--accent-tint:     var(--tint-red);
	--accent-tint-br:  var(--tint-red-br);
}

html {
	display: flex;
	justify-content: center;
	font-size: 1.6em;
}

body {
	padding: 0.5em;
	width: 80ch;

	background-color: var(--bg-primary);
	color: var(--fg-primary);
	line-height: 1.3;

	/* Linux: DejaVu Sans Mono Font */
	font-family: monospace;
}

header, footer {
	padding: 1em;
	background-color: var(--bg-secondary);
}

header > span { text-align: right; }
header {
	margin: 0rem 0rem 2rem 0rem;

	display: flex;
	justify-content: space-between;
}

footer { margin: 2rem 0rem 0rem 0rem; }

h1 { text-align: center; }
h2 { margin: 2rem 0rem 1rem 0rem; }
h3 { margin: 2rem 1rem 1rem 1rem; }

/* p::first-letter  { padding-left: 2ch; } */
p  { margin: 0.8rem 1rem; }
li {
	margin: 0.5rem 1rem;
	margin: 0.5rem 1rem 0.5rem 0;

	display: flex;
	align-items: center;
	gap: .5rem;
}
li::marker {
	content: '* ';
	font-weight: 900;
}
li > img {
	height: 1rem;
	width: 1rem;
}

*[title] { text-decoration: 0.1em underline dashed var(--accent-tint); }
*[title]:hover { text-decoration-color: var(--accent-tint-br); }

span.highlight { color: var(--accent-tint); }

*:has(> code) { line-height: 1.5em; }
code {
	padding: 0.1em 0.4em;
	background-color: var(--bg-secondary);
	border-radius: 0.1em;
}
pre {
	max-width: calc(80ch + 2*1em);
	
	margin: 0rem 1rem;
	padding: 0.5em 1em;
	
	background-color: var(--bg-secondary);
	border-radius: 0.2em;
}
sup { vertical-align: top; font-size: 0.6em; }
em { color: var(--tint-red); }

a, a:link { color: var(--accent-tint);     } /* Unvisited link  */
a:visited { color: var(--accent-tint-dim); } /* Link in history */
a:hover   { color: var(--accent-tint-br);  } /* Mouse hovering  */
a:active  { color: var(--tint-white);      } /* Mouse clicking  */