@media (prefers-color-scheme: dark) {
	html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		background-color: #333;
		color: white;
	}
	.menu li{
		background: #533;
		color: lightblue;
	}
}
/* counters */
body {
	counter-reset: sectio;
}

#logo{
	position: fixed;
	height: 6cm;
	right: 1cm;
	top: -1cm;
}

@media (max-width: 1900px) {
	#logo{
		display: none;
	}
}

/* general */
p, pre, em, table, ul, ol, li{
	font-size: 4.5mm;
}
/* menu */
.menu {
	position: fixed;
	left: 1cm;
	top: 1cm;
	border-radius: 8px;
	box-shadow: 0 1mm 3mm rgba(0, 0, 0, 0.1);
	padding: 10mm 5mm;
}
@media (max-width: 1600px) {
	.menu {
		position: static;
	}
}

a {
	text-decoration: none;
	color: #66a;
	transition: color 0.2s ease;
}

a:hover {
	color: #000;
}

.menu a.selected {
	font-weight: bold;
	color: #77b;
	position: relative;
}

/* menu counter */
.menu ol {
	counter-reset: sectio;
	list-style-type: none;
}

.menu li::before {
	counter-increment: sectio;
	content: counters(sectio,".") " ";
	width: 8mm;
	left: 5mm;
	position:absolute;
	text-align:right;
}

.menu li {
	list-style-type: none;
	padding: 3mm 5mm 3mm 13mm;
	margin: 1mm 0;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.menu li:hover {
	background-color: rgba(85, 51, 51, 0.1);
}

/* end menu */

pre {
	tab-size: 2;
	background-color: #ccc; /* dark on light even in dark mode */
	padding: 3mm;
	border: 1px solid #000;
}

#print {
	cursor: pointer;
}

.next, .previous {
	font-size: 200%;
	background: #533;
	color: lightblue;
}

code {
	background-color:#533;
}

task {
	display: block;
  background-color: #533;
  border-left: 4px solid #533;
  padding: 1em;
  margin: 1em 0;
  counter-increment: task;
  position: relative;
}

task::before {
  content: "Task " counter(task);
  font-weight: bold;
  color: #a88;
  display: block;
  margin-bottom: 0.5em
}