.screen-only {
	display: none;
}

.page {
	width: 100%;
}

.page:not(:first-of-type) {
	page-break-before: always;
}

.title-page {
	--background-height: 30rem;
	background: var(--secondary);
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--primary);
	position: relative;
	overflow: hidden;
}

.title-page::before,
.title-page::after {
	content: "";
	position: absolute;
	background-color: var(--primary);
	height: var(--background-height);
	width: 200%;
	translate: 0 -50%;
	transform: skewY(10deg);
}

.title-page::after {
	bottom: 0;
	translate: 0 50%;
}

.title-page h1 {
	font-size: 5rem;
}