#title {
	--height: 7rem;

	height: var(--height);
	width: 100%;
	background: var(--color-title-bg);

	h1 {
		line-height: var(--height);
	}

	.triangle {
		--color-triangle: rgba(from var(--color-nav-dark) r g b / .33);
		width: 28vw;
		height: var(--height);
		position: absolute;
	}

	.triangle-up-left {
		background-image: linear-gradient(to bottom right, var(--color-triangle) 50%, transparent 50.5%);
	}

	.triangle-down-left {
		background-image: linear-gradient(to top right, var(--color-triangle) 50%, transparent 50.5%);
	}

	.triangle-up-right,
	.triangle-down-right {
		right: 0;
	}

	.triangle-up-right {
		background-image: linear-gradient(to bottom left, var(--color-triangle) 50%, transparent 50.5%);
	}

	.triangle-down-right {
		background-image: linear-gradient(to top left, var(--color-triangle) 50%, transparent 50.5%);
	}
}

@media (max-width: 650px) {
	#title {
		--height: 5rem;

		.triangle {
			width: 17vw;
		}
	}
}

@media (prefers-color-scheme: light) {
	#title {
		.triangle {
			--color-triangle: rgba(from var(--color-nav-light) r g b / .33);
		}
	}
}