menu {
	position: fixed;
	top: 0;
	left: calc((100vw - var(--page-width)) / 2 + var(--page-width) + var(--page-padding));
	font-size: 70%;
	width: 18em;
	padding-block-end: 1em;
	padding-right: 1.5em;
}
#toc {
	overflow-y: auto;
  	max-height: calc(100vh - 16em);
	scrollbar-width: thin;
	scrollbar-color: var(--color-light) transparent;
}
nav {
	padding-inline-start: 2em;
	margin-block-start: 0.5em;
}
nav ol {
	padding: 0;
	margin: 0;
	line-height: 1.65;
}
	nav ol:not(:first-child) {
		padding-inline-start: 1.25em;
	}
	nav ol li {
		margin-block-end: 0;
	}
	nav li > ol {
		margin-top: -0.25em;
	}
	.nav-link.active {
		color: var(--color-black) !important;
		text-decoration: none;
		font-weight: 450;
	}
	.nav-link:not(.active) {
		display: block;
		width: 100%;
	}
	.nav-link:visited {
		color: var(--color-blue);
	}

#nav-toggle {
	cursor: pointer;
	user-select: none;
	padding-block-start: 2em;
	padding-inline-start: 2em;
	padding-inline-end: 2em;
}

#demo .example-list {
	padding-inline-end: 2.5em;
	margin-block-end: 0;
}

#demo .demo-buttons-group {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5em;
}

.main-title, .menu-title, h1 {
	font-variation-settings: "FLAR" 75;
	font-weight: 750;
	color: var(--color-red);
}
.main-title {
	margin-block-start: 2em;
}
.menu-title {
	display: none;
}

footer {
	background-color: #0000001a;
	font-size: 80%;
	padding: 0.5em 0;
	margin-block-start: 4em;
}
	footer aside {
		float: right;
	}

.fade {
	opacity: 0;
	transition: opacity 0.1s ease-in-out;
	background-color: #ffffffbb;
	backdrop-filter: saturate(0.4);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}

#overrides-calculator {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
}
	#overrides-calculator textarea {
		width: 100%;
	}

.example-letter {
	line-height: 0.65;
	transition: 0.04s ease;
}
	.example-letter > div {
		width: fit-content;
		font-size: 4.1em;
		padding: 0.075em;
		background-color: color-mix(in srgb, var(--color-orange), var(--color-white) 50%);
		transform-origin: bottom;
		cursor: default;
		user-select: none;
	}
		.example-letter > div:hover {
			transform: scale(2);
		}
	.example-letter small {
		font-size: 60%;
	}

@media screen and (max-width: 1200px) {
	nav {
		display: none;
	}
	menu {
		width: 100%;
		left: 0;
		padding: 1em var(--page-padding);
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 3rem;
		z-index: 11;
		font-size: 1rem;
	}
		.menu-title {
			display: block;
		}
	#nav-toggle {
		padding: 0;
		background: transparent;
		flex-grow: 1;
		text-align: right;
	}
	#toc {
		max-height: unset;
	}
	nav {
		position: fixed;
		max-height: calc(100vh - 3rem);
		top: 3rem;
		left: 0;
		z-index: 10;
		width: 100%;
		background: var(--color-white);
		margin: 0;
		padding: 1em var(--page-padding) 1.2em;
		line-height: 2;
		overflow-y: scroll;
	}
	.search {
		display: none;
	}
}

@media screen and (max-width: 1050px) {
	menu {
		background-color: var(--color-white);
		border-block-end: 1px solid var(--color-light);
	}
	#demo .demo-buttons-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	#demo button {
		font-size: 1.5em;
	}
	#overrides-calculator {
		grid-template-columns: 1fr;
		gap: 1em;
	}
}

@media screen and (max-width: 706px) {
	#demo .demo-buttons-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	#demo button {
		font-size: 1.25em;
	}
	.nav-link.active {
		font-weight: 600;
	}
}