/* Copyright (c) [2023] [Zhang Qingtian (张擎天) | u-typography.blog]
[u-Typography-*-additional.css] is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
       http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */

:root {
	--colour-grid-normal: rgb(226, 226, 226);
	--colour-grid-Tri: rgb(180, 192, 219);
	--colour-grid-Centre: rgb(238, 183, 194);
	--colour-grid-important: rgb(39, 171, 252);
	--colour-grid-Core: rgb(14, 82, 255);
}

#gridMask {
	display: block;
	position: absolute;
	top: 0;
	left: -0.5px;
	height: 100%;
	width: 79rem;
	overflow: hidden;
	letter-spacing: calc(-1em / 3);
}
.gridLine,
.gridLine-Tri,
.gridLine-Centre,
.gridLine-Important,
.gridLine-Core,
#gridLine-Centre-Layout_3_4_5 {
	height: 100%;
	width: 1px;
	display: inline-block;
	margin-left: 19px;
}
#gridLine-First-Layout_1 {
	margin: 0;
}
/* #gridLine-Last-Layout_5{
	display: none;
} */

.gridLine {
	background-color: var(--colour-grid-normal);
}
.gridLine-Tri {
	background-color: var(--colour-grid-Tri);
}
.gridLine-Centre {
	background-color: var(--colour-grid-Centre);
}
.gridLine-Important {
	background-color: var(--colour-grid-important);
}
.gridLine-Core {
	background-color: var(--colour-grid-Core);
}
#gridLine-Centre-Layout_3_4_5 {
	position: absolute;
	top: 0;
	margin: 0;
	left: 13.5rem;
	background-color: var(--colour-grid-Centre);
	display: none;
}
#resize {
	/* resize: horizontal; */
	max-width: 100%;
	min-width: 14rem;
	max-height: 50rem;
	overflow: hidden;
	padding: 1rem calc(2rem - 2px);
	/* margin: 2rem auto; */
	margin-top: 1rem;
	margin-bottom: 2rem;
	background-color: white;
	border-radius: 0.5rem;
}
#ZuoYouShuangQi-X,
#ZuoYouShuangQi-O,
#ZuoQi {
	margin: 1rem calc(1rem + 1px);
	font-size: 1rem;
	line-height: 1.5rem;
	text-indent: 0;
	/* text-align: justify; */
	color: rgb(66, 66, 66);
	max-width: 100%;
	min-width: 8rem;
	border-left: 1px solid rgb(190, 190, 190);
	border-right: 1px solid rgb(190, 190, 190);

	box-sizing: content-box;
}
/* #ZuoYouShuangQi-O {
	color: rgb(170, 78, 78)
} */
#ZuoQi {
	text-align: left;
	color: rgb(66, 66, 66);
}
.resizeSubhead {
	display: block;
	font-size: 0.75rem;
	color: rgb(177, 177, 177);
	text-align: left;
}
#paragraphWidth {
	width: 100%;
}
input[type="range"] {
	appearance: none;
	overflow: visible;
	width: 200px;
	height: 5px;
	border-radius: 2.5px;
	outline: none;
	background-color: var(--colour-3);
	transition: background-color 200ms ease-in-out;
}
input[type="range"]:hover {
	background-color: var(--colour-2);
	transition: background-color 200ms ease-in-out;
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 50%;
	border: 2px solid var(--colour-3);
	box-shadow: 0px 0px 2px var(--colour-1);
	box-sizing: border-box;
	/* transition: background-color 200ms ease-in-out; */
}
input[type="range"]::-moz-range-thumb:hover {
	box-shadow: 0px 0px 4px var(--colour-1);
	transition: box-shadow 200ms ease-in-out;
}
/* input[type="range"]::-moz-range-thumb:hover {
	background: rgb(253, 250, 242);
	transition: background 200ms ease-in-out;
}
input[type="range"]::-moz-range-thumb:active {
	background: rgb(253, 248, 239);
	transition: background 200ms ease-in-out;
} */
input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	border: 2px solid var(--colour-3);
	box-shadow: 0px 0px 3px var(--colour-1);
	box-sizing: border-box;
}
/* input[type="range"]::-webkit-slider-runnable-track {
	border-radius: 30px;
	background: #128;
	height: 15px;
} */

/* 【1】#############################
宽度大于1820的窗口，或经过1.25倍放大的宽度大于2275的窗口
适用于1920宽的屏幕，或经过1.25倍放大的2560宽的屏幕
正文每行36字，字号20。边注每行24字，字号15；宽度等同于正文18字 */
@media screen and (min-width: 1840px) {
	#＋＋ {
		margin-top: 3.75rem;
	}
	#✽＃※ {
		margin-top: 1rem;
	}
}

/* 【2】#############################
宽度1380—1820的窗口，或经过1.25倍放大的宽度1725—2275的窗口
适用于1440宽的屏幕，或经过1.25倍放大的1920宽的屏幕
正文每行30字，字号20。边注每行16字，字号15；宽度等同于正文12字 */
@media screen and (min-width: 1400px) and (max-width: 1840px) {
	#gridMask {
		width: 61rem;
	}

	.layout_2_hidden {
		display: none;
	}
	#＋＋ {
		margin-top: 5.25rem;
	}
}
/* 【3】#############################
宽度1020—1380的窗口，或经过1.25倍放大的宽度1275—1725的窗口
适用于1080宽的屏幕，或经过1.25倍放大的1440宽的屏幕
正文每行27字，字号20。边注每行12字，字号15；宽度等同于正文9字 */
@media screen and (min-width: 1040px) and (max-width: 1400px) {
	#gridMask {
		width: 40rem;
	}
	#gridLine-First-Layout_3 {
		margin: 0;
	}
	.gridLine-Centre {
		background-color: var(--colour-grid-normal);
	}
	.layout_2_hidden {
		display: none;
	}
	.layout_3_hidden {
		display: none;
	}
	.layout_3_Centre {
		background-color: var(--colour-grid-Centre);
	}
	#gridLine-Centre-Layout_3_4_5 {
		display: inline-block;
	}
	#＋＋ {
		margin-top: 9rem;
	}
	#⊙⊙⊙ {
		margin-top: 1.75rem;
	}
	#✽＃※ {
		margin-top: 1.25rem;
	}
}
/* 【4】#############################
宽度660—1020的窗口，或经过1.25倍放大的宽度825—1275的窗口
正文每行27字，字号20。*/
@media screen and (min-width: 680px) and (max-width: 1040px) {
	#gridMask {
		width: 28rem;
	}
	#gridLine-First-Layout_3 {
		margin: 0;
	}
	.gridLine-Centre {
		background-color: var(--colour-grid-normal);
	}
	.layout_2_hidden {
		display: none;
	}
	.layout_3_hidden {
		display: none;
	}
	/* .layout_3_Centre {
		background-color: var(--colour-grid-Centre);
	} */
	.layout_4_hidden {
		display: none;
	}
	.layout_4_Important {
		background-color: var(--colour-grid-important);
	}
	#gridLine-Centre-Layout_3_4_5 {
		display: inline-block;
	}
	#＋＋ {
		margin-top: -1rem;
	}
	#中文网格的运用{
		margin-top: 8rem;
	}
}
/* 【5】#############################
宽度小于660的窗口，或经过1.25倍放大的宽度小于825的窗口
正文字号20。*/
@media screen and (max-width: 679px) {
	#gridMask {
		border-right: 1px solid var(--colour-grid-Core);
	}
}
@media screen and (max-width: 680px) {
	#gridMask {
		max-width: 28rem;
	}
	#gridLine-First-Layout_3 {
		margin: 0;
	}
	/* #gridLine-Last-Layout_5{
		display: inline-block;
	} */

	.layout_2_hidden {
		display: none;
	}
	.layout_3_hidden {
		display: none;
	}
	/* .layout_3_Centre {
		background-color: var(--colour-grid-Centre);
	} */
	.gridLine-Centre {
		background-color: var(--colour-grid-normal);
	}
	.layout_4_hidden {
		display: none;
	}
	#gridLine-Centre-Layout_3_4_5 {
		display: inline-block;
	}
	/* .layout_4_Important {
		background-color: var(--colour-grid-important);
	} */
	#ZuoYouShuangQi-X,
	#ZuoYouShuangQi-O,
	#ZuoQi {
		/* margin: 1rem calc(1rem + 1px); */
		font-size: 0.75rem;
		line-height: 1rem;
		/* text-indent: 0; */
		/* text-align: justify; */
		/* color: rgb(66, 66, 66); */
		/* max-width: 100%; */
		min-width: 6rem;
	}
}
@media screen and (max-width: 600px) {
	#gridLine-Centre-Layout_3_4_5 {
		left: 50%;
	}
}