a {
	text-decoration-line: none;
}

h2 {
	background-color: slategray;
	text-align: center;
	color: ivory;
	padding: 0.5rem;
	clear: both;
}

/* <emsp> */
emsp {
	display: inline;
	margin-left: 1rem;
}

emspd {
	display: inline;
	margin-left: 2rem;
}
/* </emsp> */

.bottom-edge-gradient {
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 4rem;

	background: rgb(255, 255, 255);
	/*
	background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	*/
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	/*
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
	*/

	/*
	background: #ffffff;
	background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%);
	background: -webkit-linear-gradient(90deg, #ffffff 0%, #ffffff 50%);
	background: -moz-linear-gradient(90deg, #ffffff 0%, #ffffff 50%);
	*/
}

.header {
	background-color: silver;
	padding: 1rem;
}

.header-wrapper-block {
	text-align: center;
}

.header-wrapper-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 40rem) {
	.header-wrapper-flex {
		flex-direction: column;
	}
}

.avatars img {
	width: 13rem;
	height: 13rem;
	border-radius: 50%;
}

.header-wrapper-flex h1 {
	text-align: center;
	margin-left: 1rem;
}

@media (max-width: 40rem) {
	.header-wrapper-flex h1 {
		margin-top: 1rem;
		margin-left: 0;
	}
}

.container.article {
	background-color: whitesmoke;
	max-width: 61.80rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5rem;
	line-height: 1.5;
}

.container.text {
	background-color: whitesmoke;
	/* 为了优化动画效果，让文字在浮现的过程中有一块背景板，防止和下面的标题和文字重叠，我才加上的这个属性。 */
	/* 不过貌似没啥用。(((φ(◎ロ◎;)φ))) */
	margin: auto 3.82%;
	text-indent: 2rem;
}

.container.text h4 {
	text-indent: initial;
}

.container.contacts {
	text-indent: initial;
}

.container.footer {
	background-color: silver;
	text-align: center;
	padding: 0.8rem;
	font-size: small;
	line-height: 0.8;
}

/* .c2cbd-btn start */
/* 来自 https://github.com/OpenRapid/winui3/blob/main/style.css */
.c2cbd-btn {
	background-color: rgb(251, 251, 251);
	border-top: 1px solid rgb(229, 229, 229);
	border-left: 1px solid rgb(229, 229, 229);
	border-right: 1px solid rgb(229, 229, 229);
	border-bottom: 1.3px solid rgb(204, 204, 204);
	box-shadow: 0 0 0 rgb(204, 204, 204);
	outline: none;
	color: #1a1a1a;
	user-select: none;
	border-radius: 4px;
	padding: 0 0.9375rem 0 0.9375rem;
	height: 1.875rem;
	font-size: 0.875rem;

	margin-left: auto;
	white-space: nowrap;
}

/* 这里是接下来要克服的难关！尝试在启用这个样式的情况下消除BUG！ */
/* From Uiverse.io by elijahgummer */ 
/*
.c2cbd-btn {
	font: inherit;
	background-color: #f0f0f0;
	border: 0;
	color: #242424;
	border-radius: 0.5em;
	font-size: 0.875rem;
	padding: 0.375em 1em;
	font-weight: 600;
	text-shadow: 0 0.0625em 0 #fff;
	box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef, 0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede, 0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
	transition: 0.15s ease;
	cursor: pointer;

	display: inline-block;
	text-align: center;
	user-select: none;
}
*/

.c2cbd-btn:hover {
	background-color: #F6F6F6;
	/*transition: 0.2s;*/
}

.c2cbd-btn:active {
	border-bottom: 1px solid rgb(229, 229, 229);
	color: #616161;
	/*transition: 0.2s;*/
}

.c2cbd-btn-line {
	display: flex;
	align-items: center;
}

.c2cbd-btn-line > span {
	white-space: nowrap;
}

.c2cbd-btn-line > span:first-child {
	margin-left: 2rem;
	white-space: nowrap;
}

@media (max-width: 40rem) {
	.c2cbd-btn-line > span:first-child {
		margin-left: 2rem;
		white-space: initial;
	}
}

.c2cbd-btn .emoji {
	margin-left: -0.4rem;
}

/* .c2cbd-btn end */

/* .img-diff start */
/* 原创链接： https://segmentfault.com/a/1190000044064219 */
.img-diff-wrapper {
	display: flex;
}

.img-diff {
	display: inline-flex;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.img-diff [type=range] {
	margin: 0;
	-webkit-appearance: none;
	position: absolute;
	height: 100%;
	width: 100%;
	background: none;
	overflow: hidden;
}

.img-diff [type=range]::-webkit-slider-runnable-track {
	background-color: transparent;
	height: 100%;
	cursor: ew-resize;
}

.img-diff [type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 4px;
	height: 100%;
	background-color: #18a0fb;
}

.img-diff img {
	display: block;
	width: 100%;
}

.img-diff img:first-of-type {
	position: absolute;
	clip-path: inset(0 calc(100% - var(--pos, .5) * 100%) 0 0)
}
/* .img-diff end */

/* .page-counter start */
.page-counter {
	margin-top: 0;
	margin-bottom: -7px;
}
/* .page-counter end */

/* .emoji start */
.emoji {
	width: 1rem;
}
/* .emoji end */

/* .temp-- start */
.temp--001 {
	text-align: center;
	text-indent: initial;
}

.temp--002 {
	text-align: center;
	text-indent: initial;
	font-size: larger;
}

.temp--004 {
	background-color: #FEFEFE;
}

.temp--005 {
	margin: auto 2rem;
}

.temp--006 {
	text-align: center;
	text-indent: initial;
	font-size: xxx-large;
}

.temp--007 {
	/* 刚出场就废弃 */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	text-indent: initial;
}

.temp--007 img {
	/* 刚出场就废弃 */
	width: 90%;
	height: auto;
}

.temp--008 img {
	max-width: 90%;
	/*
	这个 max-width 本来是要用在 .img-diff 上的，
	但是直接使用后会导致一些错误，
	所以现在暂停使用。
	在 .img-diff-wrapper 上也是一样的效果。
	可能要对所有带 .img-diff 的选择器都应用一遍 max-width？
	因为 width 本身在 .img-diff 里就被定义了两三次左右。
	*/
}
/* .temp-- end */