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);
}

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-style: italic;
	font-size: 1.75em;
}

#main a {
	text-decoration: revert;
}