body {
	background: linear-gradient(var(--color-bg) 80vh, var(--color-bg-teal) 160vh) no-repeat;
	background-size: 100% 200vh;
	padding: clamp(1rem, 20vw, 20vh) clamp(1rem, calc((100vw - 80ic) / 2), 34vw);
}

.pattern-background {
	opacity: 0.1;
	--pattern-duration: 8s;
}

@media (prefers-reduced-motion: no-preference) {
	.pattern-background {
		--pattern-column-width: calc(44px * var(--pattern-scale));
		background-image: none;
	}

	.pattern-background::before,
	.pattern-background::after {
		content: '';
		position: absolute;
		inset: 0;
		background-image: url('/pattern-tile.svg');
		background-size: inherit;
		animation: pattern-slide var(--pattern-duration) linear infinite;
	}

	/* Alternate columns independently of the SVG's 37-column repeat. */
	.pattern-background::before {
		mask-image: repeating-linear-gradient(to right,
			#000 0 var(--pattern-column-width),
			transparent var(--pattern-column-width) calc(2 * var(--pattern-column-width)));
	}

	.pattern-background::after {
		mask-image: repeating-linear-gradient(to right,
			transparent 0 var(--pattern-column-width),
			#000 var(--pattern-column-width) calc(2 * var(--pattern-column-width)));
		animation-direction: reverse;
	}
}

@keyframes pattern-slide {
	to {
		background-position: 0 calc(-72px * var(--pattern-scale));
	}
}

h1 {
	margin: 0;
	font-size: 2em;
}

#front {
	height: calc(100vh - clamp(1rem, 20vw, 20vh));
}

#front h1 {
	font-family: --Subsetted-HYWuYouRuiKaiW;
	writing-mode: vertical-rl;
	cursor: default;
}

#front h1:not(:hover) {
	color: #171717;
	transition: color 1.2s ease;
}

#front h1:hover {
	color: #a0a0a0;
	transition: color 0.8s ease;
}

h1, #front h1 .yan {
	color: var(--color-emphasis);
}

#front h1 .dian {
	color: #6b3030 !important;
	transition: color 1.2s ease;
}

#front h1:hover .dian {
	color: #eb4040 !important;
	transition: color 0.8s ease;
}

#main {
	min-height: calc(100vh - clamp(1rem, 20vw, 20vh));
	padding-top: clamp(1rem, 20vw, 20vh);
	text-align: right;

	display: flex;
	flex-direction: column;
	justify-content: center;

	font-size: 1.5rem;
}

#main p, #main h2 {
	margin: 1rem 0;
}

#main h2 {
	font-family: serif;
	font-size: 1.75em;
}

#main a {
	text-decoration: revert;
}