index.css

body {
	margin: 0;
	font-family: sans-serif;
}

#content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

iframe {
	border: none;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

noscript {
	display: block;
	width: 100%;
	margin-top: 2rem;
	font-size: 200%;
	text-align: center;
}

#nav-menu + label:hover::before,
#nav-menu + label:hover::after,
button.nav:hover::before {
	border-color: #F60;
}

#nav-menu + label:active::before,
#nav-menu + label:active::after,
button.nav:active::before {
	border-color: #D40;
}

.nav {
	position: fixed;
	z-index: 2;
	left: 1rem;
	height: 1.6rem;
	width: 1.6rem;
	border: none;
	border-radius: 0.2rem;
	background-color: white;
	cursor: pointer;
}

#nav-menu {
	display: none;
}

#nav-menu + label {
	top: 1rem;
}

#nav-menu + label::before,
#nav-menu + label::after {
	position: absolute;
	top: 0.3rem;
	left: 0.2rem;
	height: 0.18rem;
	width: 1.2rem;
	border-top: 0.2rem solid black;
	content: '';
	transition: all 0.3s;
}

#nav-menu + label::after {
	top: 0.7rem;
	border-bottom: 0.2rem solid black;
}

#nav-menu:checked + label::before,
#nav-menu:checked + label::after {
	left: 0.1rem;
}

#nav-menu:checked + label::before {
	top: 0.63rem;
	transform: rotate(45deg);
}

#nav-menu:checked + label::after {
	top: 0.5rem;
	border-top: transparent;
	transform: rotate(-45deg);
}

.nav.jump::before {
	position: absolute;
	top: 0.25rem;
	padding: 0.4rem;
	border: solid black;
	border-width: 0 0.3rem 0.3rem 0;
	content: '';
}

.nav.jump.prev {
	top: 4rem;
}

.nav.jump.prev::before {
	left: 0.5rem;
	transform: rotate(135deg);
}

.nav.jump.next {
	top: 7rem;
}

.nav.jump.next::before {
	left: 0;
	transform: rotate(-45deg);
}

h4 {
	margin: 0;
}

#nav-chapter {
	top: 10.2rem;
	height: auto;
	width: auto;
	min-width: 1.6rem;
	text-align: center;
	transition: left 0.3s;
	pointer-events: none;
}

#nav-menu:checked ~ #nav-chapter {
	left: -10rem;
}

#nav-link {
	top: 10rem;
	left: -10rem;
	transition: left 0.3s;
}

#nav-menu:checked ~ #nav-link {
	left: 1rem;
	transition: left 0.4s;
}

#nav-link > svg {
	display: initial !important;
	fill: none;
	stroke: black;
	stroke-width: 12;
}

#nav-link:hover > svg {
	stroke: #F60;
}

#link:active > svg {
	stroke: #D40;
}

#nav-link > .tooltip {
	position: absolute;
	display: none;
	top: 0;
	left: 2.2rem;
	height: 1.6rem;
	width: 9rem;
	border-radius: 0.2rem;
	background-color: dimgrey;
	text-align: center;
}

#nav-link:hover > .tooltip {
	display: block;
}

#nav-link.copied > .tooltip {
	display: block;
	width: 4.4rem;
	background-color: #F60;
}

#nav-link > .tooltip::before {
	color: white;
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.6rem;
	content: 'Copy module link';
}

#nav-link.copied > .tooltip::before {
	content: 'Copied!';
}

#nav-link > .tooltip::after {
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -0.4rem;
	border: 0.4rem solid transparent;
	border-right-color: dimgrey;
	content: '';
}

#nav-link.copied > .tooltip::after {
	border-right-color: #F60;
}

#nav-courses {
	position: fixed;
	top: 13rem;
	left: -10rem;
	height: auto;
	width: 2.5rem;
	border-radius: 0.2rem;
	background-color: white;
	cursor: auto;
	transition: left 0.3s;
}

#nav-menu:checked ~ #nav-courses {
	left: 0.6rem;
	transition: left 0.5s;
}

#nav-courses > h4 {
	margin-bottom: 0.2rem;
	text-align: center;
}

#nav-courses > * {
	margin: 0.1rem 0;
	width: 2.5rem;
}

#nav-info {
	top: 33rem;
	left: -10rem;
	height: 1.5rem;
	width: 1.5rem;
	margin: 0.1rem;
	border-radius: 50%;
	background-color: black;
	color: white;
	font-family: serif;
	font-size: 140%;
	font-style: italic;
	font-weight: bold;
	line-height: 1.3rem;
	transition: left 0.3s;
}

#nav-menu:checked ~ #nav-info {
	left: 1rem;
	transition: left 0.5s;
}

#nav-info:hover,
#nav-info:active {
	height: 1.7rem;
	width: 1.7rem;
	margin: 0;
	background-color: #F60;
}

#nav-info:active {
	background-color: #D40;
}

#nav-list {
	position: fixed;
	z-index: 1;
	overflow: auto;
	top: 0;
	left: -24rem;
	height: 100%;
	width: 23rem;
	max-width: 100%;
	padding-left: 3.7rem;
	box-sizing: border-box;
	background-color: white;
	box-shadow: 0 0 1rem;
	transition: left 0.3s;
}

#nav-menu:checked ~ #nav-list {
	left: 0;
}

#nav-list > h1 {
	width: 17rem;
	max-width: 100%;
	margin: 0;
	padding: 1.2rem 0;
	font-size: 250%;
	text-align: center;
}

#nav-list > div {
	position: relative;
	width: calc(100% - 0.2rem);
	margin: 0.1rem 0 0 0.2rem;
	overflow: hidden;
}

#nav-list > div::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(to right, #FFF0, white);
	content: '';
}

#nav-list h4 {
	position: relative;
	display: inline;
	left: 0;
	white-space: nowrap;
	transition: left 0.5s ease-in-out;
}

.section {
	line-height: 1.55rem;
	height: 2rem;
	width: 2rem;
	border: 0.2rem solid white;
	background-clip: padding-box;
	background-color: black;
	color: white;
	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
}

.section:hover,
button.selected {
	background-color: #F60;
}

.section:active {
	background-color: #D40;
}

span.selected {
	color: #F60;
}

::-webkit-scrollbar {
	width: 1rem;
	-webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
	background-color: silver;
}

::-webkit-scrollbar-thumb:hover {
	background-color: darkgray;
}

::-webkit-scrollbar-thumb:active {
	background-color: dimgray;
}

#info {
	position: fixed;
	z-index: 3;
	height: 100%;
	width: 100%;
	background-color: #0009;
}

#info-box {
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 1rem;
	background-color: white;
	box-shadow: 0 0 1rem;
	text-align: center;
	transform: translate(-50%,-50%);
}

a {
	color: #F60;
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: #D40;
}

#link {
	position: fixed;
	top: 100%;
}

@media only screen
and (max-width: 480px) {
	#nav-menu + label {
		top: auto;
		bottom: 1rem;
	}

	.nav.jump.prev {
		top: auto;
		bottom: 7rem;
	}

	.nav.jump.next {
		top: auto;
		bottom: 4rem;
	}

	#nav-chapter {
		top: auto;
		bottom: 10rem;
	}

	#nav-link {
		top: auto;
		bottom: 10rem;
	}

	#nav-courses {
		top: auto;
		bottom: 12.7rem;
	}

	#nav-info {
		top: auto;
		bottom: 32.7rem;
	}
}

@media print {
	body > :not(#content) {
		display: none;
	}

	#content {
		position: static;
		height: 999vh;
	}
}