@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
/* -------------------------------------------- 侧边目录导航 -------------------------------------------- */
/* 大框框 */
#uprightsideBar {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	position: fixed;
	/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
	top: 50px;
	right: 0px;
	width: auto;
	height: auto;
}

/* 目录导航四个字 */
#sideBarTab {
	padding: 10px;
	font-weight: bold;
	float: left;
	width: 30px;
	border: 1px solid #e5e5e5;
	border-right: none;
	text-align: center;
	background: #ffffff;
}

/* 目录内容 */
#sideBarContents {
	float: left;
	overflow: auto;
	overflow-x: hidden !important;
	width: 300px;
	min-height: 108px;
	max-height: 460px;
	border: 1px solid #e5e5e5;
	border-right: none;
	background: #ffffff;
}

#sideBarContents dl {
	color: yellow;
	padding: 2px;
}

/* 2标题 */
#sideBarContents dt {
	font-weight: bolder;
	text-align: center;
	font-size: 16px;
	color: green;
	padding: 0px 0px 10px 5px;
}

/* 3标题 */
#sideBarContents dd,
dt {
	font-size: 14px;
	color: red;
	cursor: pointer;
	margin: 10px;
}

#sideBarContents dd:hover,
dt:hover {
	color: #A7995A;
}

/* --------------------------------------------  */
:root {
	--accent-color: #696969;
	/* nice */
	--primary-colour: #306797;
	/* <> */
	--background-color: white;
	--border-color: #dbdbdb;
	--code-bg-color: #f8f8f8;
	--font-color: #1f1f1f;
	--codemirror-color: var(--font-color);
	--header-color: #000000;
	--link-color: #2077b2;
	--control-text-color: #667176;
	--side-bar-bg-color: #fafafa;
	--hr-color: var(--primary-colour);
	--body-font: 'Poppins',"Consolas", "Times New Roman", "等线", "SimSun", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	--heading-font: 'Poppins',"Consolas", "Times New Roman", "等线", "SimSun", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif !important;
	--border-radius: 2px;
	--document-horizontal-margin: 80px;
	--document-padding-x: 19ch;
	--font-size: 1rem;
	--navigator-size: 1.1rem;
	--h1-fontsize: 2.7rem;
	--h2-fontsize: 1.9rem;
	--h3-fontsize: 1.5rem;
	--h4-fontsize: 1.4rem;
	--h5-fontsize: 1.2rem;
	--h6-fontsize: 1.1rem;
	--line-height: 1.4;
	--main-content-margin: 0 auto;
	--main-content-max-width: 100ch;
	--monospace-font-size: 15px;
	--monospace-font: "Consolas", "FiraCode", "Inconsolata", "Consolas", "Menlo", "Liberation Mono", Courier, monospace;
	--code-font: "Consolas", "等线", "宋体", "SimSun", "Arial", "Times New Roman", "Microsoft YaHei", "黑体", sans-serif;
	--monospace-line-height: 1.4;
	--monospace: var(--monospace-font);
	--nav-width: 200px;
	--vertical-padding: 40px;
}

* {
	z-index: 1;
	font-family: var(--heading-font);
}

/* -------------------------------------------- 顶部导航 -------------------------------------------- */

/* 整个搜索栏 */
#navigator2 {
	background-color: #072833;
	height: 70px;
	line-height: 60px;
}

#navigator2 ul {
	display: flex;
	flex-direction: row;
	justify-content: left;
}

#navigator2 li {
	padding: 0px 25px;
}

#navigator2 a {
	color: #ffffff;
	font-size: var(--navigator-size);
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #000;
    transition: all .4s linear 0s;
}

.postTitle a:visited,
.postTitle a:active {
	color: #000;
}

.postTitle {
	font-size: var(--h1-fontsize) !important;
	color: #000000;
	padding: 4%;
	text-align: center;
    broder: 4px solid var(--primary-colour);
}
/* -------------------------------------------- 目录 --------------------------------------------  */

#cat{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-around;
	padding-bottom: 20em;
}

#cat .li2{
	display: flex;
	flex-direction: column;
	justify-content: left;
	padding:1.5em;
	border-radius:0.7em;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	background: rgba(0,0,0, 0.05);
	padding-bottom: 70px;
	position:relative;
	margin: 1em;
}

#cat .li2 .li2-order{
	text-align: left;
	font-size:22px;
	font-weight:900;
	padding-bottom: 1em;
}

#cat .li2 .li2-title{
	color:#1675ce;
	text-decoration:none;
	font-size: 22px;
	padding-bottom: 10px;
	font-weight: bold;
}

#cat .li2 div{
	text-align: center;
	position:absolute;
	bottom:20px;
	width:270px;
	left:50%;
	margin-left:-135px;
	/* margin:0 auto; */

}

#cat .li2 .li2-button{
	background-color:white;
	border-radius:10em;
	text-decoration:none;
	/* border: 2px solid black; */
	padding:0.7em 0.9em;
	font-weight:900;
}

#cat .li3{
	text-decoration:none;
	font-size:20px;
	padding:5px;
}

/* -------------------------------------------- body --------------------------------------------  */

#cnblogs_post_body {
	font: 0.875em/1.5em "等线", "Times New Roman", "SimSun", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	font-size: var(--font-size);
}


.return-top {
	z-index: 2 !important;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	line-height: 60px;
	text-align: center;
	position: fixed;
	bottom: 100px;
	right: 100px;
	background-color: lightslategrey;
}

.edit {
	z-index: 2 !important;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	line-height: 60px;
	text-align: center;
	position: fixed;
	bottom: 100px;
	left: 100px;
	background-color: lightslategrey;
}

/* Narrow layout styles */
@media (max-width: 640px) {
	:root {
		--document-padding-x: 4ch;
	}
}

html {
	font-size: 18px;
	background-color: var(--background-color);
}

html,
body {
	color: var(--font-color);
	line-height: var(--line-height);
}

#write {
	/* size of writing area: */
	padding-left: var(--document-padding-x);
	padding-right: var(--document-padding-x);
	max-width: var(--main-content-max-width);
	box-sizing: border-box;
}



.catListTitle {
	background-color: #072833;
	border-bottom: 1px solid #072833;
	text-align: center;
}

.catListEssay ul li a {
	font-size: var(--font-size) !important;
}

/* --------------------------------------------  */
pre.md-meta-block {
	background-color: var(--background-color);
	padding-bottom: .5rem;
	color: var(--accent-color);
	border-bottom: 2px solid var(--border-color);
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
	color: var(--header-color);
}

#cnblogs_post_body h3 {
	color: var(--primary-colour)
}


#cnblogs_post_body h1 {
	padding: 5% 4% 4% 4%;
	text-align: center;
	/* margin: 3rem 0 1.5rem 0; */
	font-size: var(--h1-fontsize);
	border: 4px solid var(--primary-colour);
}

#cnblogs_post_body h1:not(:first-child) {
	margin-top: 3rem;
}

/* <> */
#cnblogs_post_body h2 {
	content: '';
	text-align: center;
	font-size: var(--h2-fontsize);
	margin: 1.5rem 10%;
}

#cnblogs_post_body h2:after {
	content: '';
	/* height: 1px; */
	width: 70%;
	display: block;
	margin: .2em auto 0;
	border-bottom: 2px solid var(--primary-colour);
}

/* <> */
#cnblogs_post_body h3 {
	margin-top: 1.5rem;
	margin-bottom: 0.5em;
	font-size: var(--h3-fontsize);
	padding: 0 1em;
	padding-right: 2px solid var(--primary-colour);
	border-left: 2px solid var(--primary-colour);
	border-right: 2px solid var(--primary-colour);
}

#cnblogs_post_body h4 {
	color: var(--header-color);
	margin-top: 1rem;
	margin-bottom: 0.4em;
	font-size: var(--h4-fontsize);
	display: inline-block;
	padding: 1px 10px 0.1em 10px;
	border-bottom: 2px dashed var(--primary-colour);
}

#cnblogs_post_body h5 {
	color: var(--header-color);
	margin-top: 1rem;
	margin-bottom: 0.2em;
	font-size: var(--h5-fontsize);
}

#cnblogs_post_body h6 {
	font-style: oblique;
	color: var(--header-color);
	margin-top: 1rem;
	margin-bottom: 0.2em;
	font-size: var(--h6-fontsize);
}


/* table */
table {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

table tr:nth-child(2n),
thead {
	background-color: var(--side-bar-bg-color);
}

td,
th {
	border-style: solid;
	border-color: var(--border-color);
	border-width: 1px;
	padding: .35rem .7rem
}

li {
	margin: 5px !important;
	padding-bottom: 5px;
}

li p {
	margin: 0;
}

blockquote {
	margin: 1rem 0 !important;
	padding-left: 2ch !important;
	margin-left: .5ch !important;
	position: relative !important;
	overflow: visible !important;
	/* <> */
	border-left: 4px solid var(--primary-colour) !important;
	color: var(--accent-color) !important;
}


/* .task-list {
                        padding-left: 0;
                        }

                        .task-list-item {
                        padding-left: 1.5em;
                        margin-bottom: 0rem;
                        } */

/* Task list Checkbox styling from
                        https://github.com/h16nning/typora-gitbook-theme/blob/main/src/gitbook-teal.css */

.md-task-list-item>input:before,
input[type="checkbox"]:before {
	border-radius: 0.2rem;
	margin-top: -0.08rem;
	margin-left: -0.1rem;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--font-color);
	background-color: var(--background-color);
	content: " ";
	display: block;
	transition-duration: 0.3s;
	transition-property: background-color;
}

.md-task-list-item:hover>input:before,
input[type="checkbox"]:hover:before {
	background-color: var(--primary-colour);
}

.md-task-list-item>input:checked:before,
.md-task-list-item>input[checked]:before,
input[type="checkbox"]:checked:before {
	background-color: var(--primary-colour);
}

.md-task-list-item:hover>input:checked:before,
.md-task-list-item:hover>input[checked]:before,
input[type="checkbox"]:hover:checked:before {
	background-color: var(--primary-colour);
}

.md-task-list-item>input:after,
.md-task-list-item>input:after,
input[type="checkbox"]:after {
	transform: rotate(-45deg);
	position: absolute;
	border: 2px solid white;
	border-top: 0;
	border-right: 0;
	top: 0.16rem;
	left: 0.1rem;
	width: 0.6rem;
	height: 0.375rem;
	content: " ";
	opacity: 0;
	transition-duration: 0.3s;
	transition-property: opacity;
}

.md-task-list-item>input:checked:after,
.md-task-list-item>input[checked]:after,
input[type="checkbox"]:checked:after {
	opacity: 1;
}



blockquote {
	background: white !important;
	margin: 1rem 0;
	padding-left: 2ch;
	margin-left: .5ch;
	position: relative;
	overflow: visible;
	border-left: 4px solid var(--primary-colour);
	color: var(--accent-color);
}


/* horizontal line */
hr {
	border: none;
	border-bottom: 2px solid var(--hr-color);
	margin-top: 1.4rem;
	margin-bottom: 1.4rem;
}

/* list markers */
ol>li::marker,
ul>li::marker {
	color: var(--primary-colour);
	font-weight: bold;
}

p {
	margin: 0.1em 0;
}


.cm-s-inner .CodeMirror-gutters {
	background: var(--code-bg-color);
}

.code-tooltip {
	box-shadow: none;
	border-radius: var(--border-radius);
	background-color: var(--code-bg-color);
	border-color: var(--border-color);
	border-style: solid;
	border-width: 1px;
}

.code-tooltip input {
	outline: none;
	width: 20ch;
}

.md-fences .code-tooltip {
	bottom: -1.8rem;
	padding: none;
}

.md-fences.md-focus .cm-s-inner {
	/* Remove bottom right border radius when tooltip is shown */
	border-bottom-right-radius: 0;
}

/* code tooltip autocomplete list */

.autoComplt-hint {
	background-color: transparent !important;
	margin: 0 !important;
	padding: 0.125rem 0.375rem !important;
	color: var(--text-color) !important;
	line-height: var(--line-height) !important;
	height: 1.4rem !important;
}

.autoComplt-hint-selected {
	background-color: var(--link-color) !important;
	color: var(--background-color) !important;
}

.md-fences,
tt {
	border: 1px solid var(--border-color);
	background-color: var(--code-bg-color);
	font-family: var(--code-font);
	font-size: var(--monospace-font-size);
	border-radius: .25rem;
	padding: 0 .125rem;
	line-height: var(--monospace-line-height);
}

.md-fences {
	margin-bottom: 2px;
	margin-top: 15px;
	padding: 0.2em 1em;
	padding-top: 8px;
	padding-bottom: 6px;
}

a {
	color: var(--link-color);
}

code span,
code {
	font-family: var(--code-font) !important;
}


.outline-item:hover {
	color: var(--header-color);
}

#write div.md-toc-tooltip {
	background-color: var(--background-color);
}

/* CodeMirror Theme: a modified version of ir_black -
                                https://github.com/FarhadG/code-mirror-themes/blob/master/themes/ir_black.css */

.cm-s-inner {
	font-size: 1em;
	line-height: 1.5em;
	font-family: var(--code-font);
	letter-spacing: 0.3px;
	word-spacing: 1px;
	background: var(--code-bg-color) !important;
	color: var(--codemirror-color);
}

.cm-s-inner .CodeMirror-lines {
	padding: 0px 0;
}

.cm-s-inner .CodeMirror-gutters {
	background-color: var(--code-bg-color) !important;
	border: none;
}

.cm-s-inner div.CodeMirror-cursor {
	border-left: 3px solid var(--codemirror-color) !important;
}

.cm-s-inner .CodeMirror-selected {
	background: #afafaf !important;
}

.cm-s-inner .cm-comment {
	color: #575757 !important;
}

.cm-s-inner .cm-keyword {
	color: #1675ce !important;
}

.cm-s-inner .cm-string {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-number {
	color: #5b1d68 !important;
}

.cm-s-inner .cm-property {
	color: #5b1d68 !important;
}

.cm-s-inner .cm-atom {
	color: #5b1d68 !important;
}

.cm-s-inner .cm-operator {
	color: #173d61 !important;
}

.cm-s-inner .CodeMirror-linenumber {
	color: #7C7C7C !important;
}

/* Not in original Theme... */
.cm-s-inner .cm-def {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-punctuation {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-variable {
	color: #125d5f !important;
}

.cm-s-inner .cm-variable-2 {
	color: #125d5f !important;
}

.cm-s-inner .cm-variable-3 {
	color: #125d5f !important;
}

.cm-s-inner .cm-meta {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-string-2 {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-qualifier {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-builtin {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-quote {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-bracket {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-tag {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-attribute {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-hr {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-link {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-plus {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-minus {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-error {
	color: var(--codemirror-color) !important;
}

.cm-s-inner .cm-invalidchar {
	color: var(--codemirror-color) !important;
}

/* End CodeMirror Theme */