div.box {
	height: 100%;
	font-size: 1vw;
	line-height: 1.7em;
	position: relative;
	color: var(--box-color);
	overflow: hidden;
}

div.box.feature {
	background: var(--box-feature-background);
}

#bar.shrink div.box:not(.active) {
	visibility: hidden;
}

#bar.shrink div.box.active {
	border-left: 1px solid rgba(0, 0, 0, .05);
}

/* Menu */

div.box div.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--secondary-color);
	padding: .5em 10vw;
}

html.light div.box div.menu {
	background: rgba(255, 255, 255, .75);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}

html.dark div.box div.menu {
	background: rgba(255, 255, 255, .05);
}

div.box div.menu div.begin,
div.box div.menu div.middle,
div.box div.menu div.end {
	display: flex;
}

div.box div.menu div.begin {
	justify-content: flex-start;
	width: 50%;
}

div.box div.menu div.end {
	justify-content: flex-end;
	width: 50%;
}

div.box div.menu.trio div.begin {
	width: auto;
}

div.box div.menu.trio div.middle {
	flex-grow: 1;
	justify-content: center;
}

div.box div.menu.trio div.end {
	width: auto;
}

div.box div.menu:not(.trio) div.middle {
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 75%;
}

div.box div.menu .item {
	display: inline-block;
	color: var(--primary-color);
	font-size: 1em;
	cursor: pointer;
}

div.box div.menu .item span {
	font-weight: 700;
}

div.box div.menu div.begin .item {
	margin-right: 1.25em;
}

div.box div.menu div.end .item {
	margin-left: 1.25em;
}

div.box div.menu div.begin .item span {
	margin-left: .5em;
}

div.box div.menu div.end .item span {
	margin-right: .5em;
}

div.box div.menu div.title {
	text-align: center;
	font-size: .85em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Content */

div.box div.content {
	position: relative;
	padding: 3em 10vw;
	touch-action: pan-y;
	height: calc(100% - 2em);
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--box-background);
}

div.box.feature div.content {
	background: var(--box-feature-background);
}

div.box:not(.active) div.content {
	overflow-y: hidden;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}

div.box:not(.active) div.content::-webkit-scrollbar {
    display: none;
}

div.box div.content h1 {
	font-family: Bitter, serif;
	color: var(--primary-color);
}

div.box div.content h2 {
	font-family: Bitter, serif;
	font-weight: 400;
	color: var(--secondary-color);
}

div.box div.content h3 {
	font-family: Bitter, serif;
	font-size: 1.5em;
	font-weight: 500;
	color: var(--primary-color);
	margin-top: 2em;
}

div.box:not(.chapter) div.content h3:first-of-type {
	margin-top: .5em;
}

div.box div.content h3.solid {
	border-bottom: none;
	margin-bottom: .5em;
}

div.box div.content h3.list.solid {
	padding-left: .5em;
}

div.box div.content h3.compact.list.solid {
	font-size: .8em;
	text-transform: uppercase;
	margin-top: 0;
	padding-left: 1.1em;
}

/* Notice */

div.box div.notice {
	color: var(--primary-color);
	background: var(--secondary-background-light);
	font-size: .8em;
	font-weight: 700;
	line-height: 1.6em;
	padding: .5em 1em;
	border-radius: .3em;
	margin-bottom: 1em;
}

div.box div.notice.tertiary {
	color: var(--tertiary-color);
	background: var(--tertiary-background-light);
}

div.box div.notice.compact {
	margin-bottom: .25em;
}

div.box div.notice span:not(.normal) {
	color: var(--primary-color);
}

div.box div.notice span.normal {
	font-weight: normal;
}

div.box div.notice i.close {
	float: right;
	padding-top: .45em;
	cursor: pointer;
}

div.box div.notice.valid {
	color: var(--tertiary-color);
}

div.box.feature div.notice {
	background: var(--box-background-focus);
}

div.box div.notice i {
	margin-right: .5em;
	margin-left: .5em;
	vertical-align: middle;
	opacity: .75;
}

/* Button */

div.box.feature .button {
	background: var(--box-background-focus);
}

/* Text */

div.box.feature h1 {
	font-size: 2.25em;
	font-weight: 500;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: .35em;
}

div.box.feature h1 + p:not(.plain) {
	font-family: Bitter, serif;
	font-weight: 300;
	font-size: 1.5em;
	font-style: italic;
	color: var(--tertiary-color);
	margin-bottom: 4rem;
	line-height: 1.3em;
	margin-top: .5em;
	max-width: 90%;
}

div.box.feature h2 + p {
	margin-top: -1em;
}

@media (max-device-width: 1024px) {
	div.box {
		font-size: 1.1em !important;
	}

	div.box div.menu {
		font-size: 1em;
		padding-right: 6vw;
		padding-left: 6vw;
	}

	div.box div.menu div.title {
		margin-top: .15em;
	}

	div.box div.content {
		padding: 1.5em 6vw 2em 6vw;
	}

	div.box.feature h1 + p {
		margin-bottom: 2rem;
	}
}