@charset "UTF-8";
@import "normalize.css";
@import "prism.css";
@import "animation.css";
@import "shortcode.css";
@import "toastify.css";

@font-face {
	font-family: "Jetbrains Mono";
	src: url(../fonts/jb.ttf) format("truetype");
}

* {
	transition: color 0.2s, background 0.2s;
}

html {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	transition: font-size 0.2s ease;
	--theme-text-main: #000;
	--theme-bg-main: #fff;
	--theme-text-strong: RGB(204, 53, 54);
	--theme-text-code: #dd4a68;
	--theme-bg-sub: RGBA(244, 245, 245, 1);
	--theme-sc-col-bg: #fafafa;
	--theme-sc-col-text: #202020;
	--theme-sc-warn-bg: #fcf1f1;
	--theme-sc-warn-text: #777;
	--theme-sc-warn-border: #ed0000;
	--theme-sc-notice-bg: #eef6fd;
	--theme-sc-warn-text: #777;
	--theme-sc-warn-border: #38a3fd;
	--theme-text-blockq-bg: rgba(245, 245, 245, 0.5);
	--theme-text-blockq: #878c93;
	--theme-table-th-bg: #f8f8f8;
	--theme-table-td-bg: #fff;
	--theme-table-td-bg-even: #f8f8f8;
	--theme-table-tr-border: #ccc;
	--theme-table-td-border: #ddd;
	--theme-banner-bg: #fafafa;
	--theme-banner-title: #333;
	--theme-pap-text-main: #202020;
}

html::-webkit-scrollbar-thumb {
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.07);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: gray;
	min-height: 40px;
	padding-top: 100px;
	border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active {
	background-color: #b3b3b3;
}

html::-webkit-scrollbar,
html *::-webkit-scrollbar {
	height: 15px;
	width: 8px;
}

html::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.07);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #696969;
	min-height: 40px;
	padding-top: 100px;
	border-radius: 4px;
}

body {
	margin: 0;
	padding: 0;
}

html::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center 0;
}

html,
body,
div,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
select,
button,
textarea,
iframe,
table,
th,
td,
blockquote,
img {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
}

a:link,
a:visited {
	color: var(--theme-color, #07f);
}

a.icp {
	color: hsla(0, 0%, 100%, 0.8);
}

.clear,
.clear::before,
.clear::after,
.page-navigator::before,
.page-navigator::after {
	display: block;
	clear: both;
}

.clear::before,
.clear::after,
.page-navigator::before,
.page-navigator::after {
	content: "";
}

.left {
	float: left;
}

.right {
	float: right;
}

.lightbox-wrap {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	background: RGBA(255, 255, 255, 0.99);
	-moz-animation: opacity-in 0.2s;
	-webkit-animation: opacity-in 0.2s;
	-o-animation: opacity-in 0.2s;
	animation: opacity-in 0.2s;
	cursor: pointer;
}

.bq {
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	bottom: -0.385rem;
	display: inline-block !important;
}

.g-toast {
	background: var(--theme-bg-main);
	color: var(--theme-text-main);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.438rem 0.825rem;
	box-shadow: var(--theme-shadow);
}

/* Basic */
#main {
	width: 1280px;
	margin: 50px auto;
	position: relative;
	right: 0;
	transition: right 0.3s;
}

#container {
	width: 1280px;
	margin: auto;
	-moz-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	-webkit-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	-o-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
}

/* Header */
#header {
	padding: 40px;
	border-radius: var(--theme-radius, 30px);
	background: var(--header-color, #6a6a6a);
	box-shadow: var(--theme-shadow, none);
	color: #fff;
	margin-bottom: 50px;
	position: relative;
	overflow: hidden;
}

#header-title {
	position: relative;
	z-index: 2;
}

#header-title h2 {
	margin: 0;
	padding: 0;
	font-weight: 200;
	font-size: 2rem;
	margin-bottom: 1.125rem;
}

#header-content {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	z-index: 2;
}

#header-content-left p {
	color: hsla(0, 0%, 100%, 0.6);
	margin: 0;
}

#header-content-right nav a {
	position: relative;
	display: inline-block;
	color: hsla(0, 0%, 100%, 0.6);
	margin-left: 0.5rem;
	transition: color 0.2s;
}

#header-content-right nav a:hover,
#header-content-right nav a.nav-focus {
	color: #fff;
}

#header-content-right nav a.nav-focus::before {
	content: " ";
	display: block;
	position: absolute;
	height: 5px;
	width: 5px;
	background: #fff;
	top: -5px;
	right: -5px;
	border-radius: 1000rem;
	opacity: 0.7;
	transition: opacity 0.2s;
}

#header-background {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0.35;
	z-index: -1;
	max-height: 400rem;
	bottom: var(--theme-header-offset-y, 0);
	right: var(--theme-header-offset-x, 0);
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Footer */
footer {
	padding: 30px 40px;
	border-radius: var(--theme-radius, 30px);
	background: var(--header-color, #6a6a6a);
	box-shadow: var(--theme-shadow, none);
	color: hsla(0, 0%, 100%, 0.8);
	margin-top: 50px;
	font-size: 0.875rem;
}

footer p {
	margin: 0;
}

#footer-content {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

#footer-contenx {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}


#footer-nav {
	text-align: right;
}

#footer-nav a {
	position: relative;
	display: inline-block;
	color: #fff;
	margin-left: 5px;
	transition: all 0.2s;
}

#footer-nav a:hover {
	transform: translateY(-2px);
}

#footer-nav a.nav-focus::before {
	content: " ";
	display: block;
	position: absolute;
	height: 5px;
	width: 5px;
	background: #fff;
	top: -5px;
	right: -5px;
	border-radius: 1000rem;
	opacity: 0.7;
	transition: opacity 0.2s;
}

#footer-sponsor img,
#footer-sponsor a {
	height: 1.35rem;
	margin-right: 5px;
}



/* Links */

#link_item {}

.link_item .content{position: relative;text-align:center;margin: 10px 10px 0 0;width:100%;min-height:260px;border-radius:8px;box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);background:var(--item-background-color);padding:16px 14px;-webkit-transition:.2s linear;transition:.2s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}

.link_item .content:hover{box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);transform:translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}

.link_item .content .logo{margin-top:22px;width:64px;height:64px;border-radius:8px;object-fit:cover}.link_item .content .like{display:flex;width:auto;height:auto;margin-top:-3px;text-align:center;padding:4px 8px;color:var(--like-text-color);float:right;border:solid;font-size:13px;border-radius:5px;border-color:var(--like-border-color);border-width:1px;cursor:pointer}.link_item .content .like .heart{color:var(--heart-color)}.link_item .content .title{font-weight:550;font-size:16px;margin-top:12px}.link_item .content .title img{width:18px;height:18px}.link_item .content .description{margin-top:12px;color:var(--text-color);font-size:13px;line-height:20px;height:40px}.link_item .content .description a{color:var(--title-text-color);font-weight:600;font-size:14px;}.link_item .content .category{display:inline-block;overflow:visible;margin-top:16px;margin-left:0;margin-right:3px;padding:6px 14px;border-radius:20px;background-image:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7));font-weight:400;font-size:12px}

.link_item .content .category999{display:inline-block;overflow:visible;margin-top:16px;margin-left:0;border-radius: 8px 4px;margin-right:3px;padding:0px 12px;font-weight:600;font-size:11px;position: absolute;
    left: 2px;
    top: -14px;background-color:#ffefda;color:#ff6000;line-height:20px;transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}
.link_item .content:hover .category999{font-size:12px;background-color:#000;color:#66ff00;transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}

.link_item:hover a{color:#052e71;}


@media (max-width: 2560px){.link_item{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1680px){.link_item{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1360px){.link_item{width:24%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 830px){.link_item{width:46%;margin:0 auto;padding-top:10px;padding-left:10}}


#link_item2 {}

.link_item2 .content{position: relative;text-align:center;margin: 10px 10px 0 0;width:100%;min-height:260px;border-radius:8px;box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);background:var(--item-background-color);padding:20px 25px;-webkit-transition:.2s linear;transition:.2s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}

.link_item2 .content:hover{box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);transform:translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}

.link_item2 .content .logo{margin-top:22px;width:64px;height:64px;border-radius:8px;object-fit:cover}.link_item2 .content .like{display:flex;width:auto;height:auto;margin-top:-3px;text-align:center;padding:4px 8px;color:var(--like-text-color);float:right;border:solid;font-size:13px;border-radius:5px;border-color:var(--like-border-color);border-width:1px;cursor:pointer}.link_item2 .content .like .heart{color:var(--heart-color)}.link_item .content .title{font-weight:550;font-size:16px;margin-top:12px}.link_item2 .content .title img{width:18px;height:18px}.link_item2 .content .description{margin-top:12px;color:var(--text-color);font-size:13px;line-height:20px}.link_item2 .content .description a{color:var(--title-text-color);font-weight:600;font-size:14px}.link_item2 .content .category{display:inline-block;overflow:visible;margin-top:16px;margin-left:0;margin-right:3px;padding:6px 14px;border-radius:20px;background-image:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7));font-weight:400;font-size:12px}


@media (max-width: 2560px){.link_item2{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1680px){.link_item2{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1360px){.link_item2{width:24%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 830px){.link_item2{width:46%;margin:0 auto;padding-top:10px;padding-left:10}}


#link_item3 {}

.link_item3 .content{position: relative;text-align:center;margin: 10px 10px 0 0;width:100%;min-height:260px;border-radius:8px;box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);background:var(--item-background-color);padding:20px 25px;-webkit-transition:.2s linear;transition:.2s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}

.link_item3 .content:hover{box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);transform:translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}

.link_item3 .content .logo{margin-top:22px;width:64px;height:64px;border-radius:8px;object-fit:cover}.link_item3 .content .like{display:flex;width:auto;height:auto;margin-top:-3px;text-align:center;padding:4px 8px;color:var(--like-text-color);float:right;border:solid;font-size:13px;border-radius:5px;border-color:var(--like-border-color);border-width:1px;cursor:pointer}.link_item3 .content .like .heart{color:var(--heart-color)}.link_item .content .title{font-weight:550;font-size:16px;margin-top:12px}.link_item3 .content .title img{width:18px;height:18px}.link_item3 .content .description{margin-top:12px;color:var(--text-color);font-size:13px;line-height:20px}.link_item3 .content .description a{color:var(--title-text-color);font-weight:600;font-size:14px}.link_item3 .content .category{display:inline-block;overflow:visible;margin-top:16px;margin-left:0;margin-right:3px;padding:6px 14px;border-radius:20px;background-image:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7));font-weight:400;font-size:12px}


@media (max-width: 2560px){.link_item3{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1680px){.link_item3{width:15%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 1360px){.link_item3{width:24%;margin:0 auto;padding-top:20px;padding-left:0}}
@media (max-width: 830px){.link_item3{width:46%;margin:0 auto;padding-top:10px;padding-left:10}}

.link_itessw{display: block;text-align: center;
    margin: 2px 2px;
    border-radius: 4px;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    width: 22%;
    min-width:76px;
    height: auto;
    padding: 16px 4px;
    position: relative;
    pointer-events: auto;transition: all .5s ease-out;
    font-size: 11px;color:#052e71}


.link_itessc{display: block;text-align: center;
    margin: 2px 2px;
    background-image: linear-gradient(0deg, #fff, #f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);
    border-radius: 4px;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    width: 50%;
    min-width:156px;
    height: auto;
    padding: 16px 4px;
    position: relative;
    pointer-events: auto;transition: all .5s ease-out;
    font-size: 11px;}
.link_itessc:hover .link_itessa{color:#212121;}
.link_itessc:hover .link_itesst{color:#6c7a89;}
 .link_itessc:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.2);transform: scale(0.98);
}



.link_itessa{color:#51617B;font-size: 14px;font-weight:600;transition: all .5s ease-out;margin:0 0 4px 0}

    .link_itess{display: block;text-align: center;
    margin: 2px 2px;
    background-image: linear-gradient(0deg, #fff, #f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);
    border-radius: 4px;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    width: 22%;
    min-width:76px;
    height: auto;
    padding: 16px 4px;
    position: relative;
    pointer-events: auto;transition: all .5s ease-out;
    font-size: 11px;}
    
.link_itessv{display: block;text-align: center;
    margin: 2px 2px;
    background-image: linear-gradient(0deg, #fff, #f7ead9);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);
    border-radius: 4px;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    z-index: 9999;
    width: 22%;
    min-width:76px;
    height: auto;
    padding: 16px 4px;
    position: relative;
    pointer-events: auto;transition: all 1.2s ease-out;
    font-size: 11px;}    

.link_itesst{color:#6c7a89;transition: all .2s ease-out;
    overflow: hidden;
    height: 12px;text-overflow: ellipsis;}
.link_itess:hover .link_itessa{color:#212121;}
.link_itess:hover .link_itesst{color:#6c7a89;}

.link_itessc:hover .link_itesst{color:#052e71;font-weight:600;font-size:10.9px}


.link_itessc:hover{
background: #F2F4FA;border: 2px solid #f6f8fe;
    box-shadow: inset 8px 8px 20px rgba(55, 99, 170, .1), inset -8px -8px 20px #fff;}

 .link_itess:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.2);transform: scale(0.98);
}

.link_itessv:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.2);transform: scale(3.08);transition: all .2s ease-out;border: 0.3px solid #fff;border-radius: 1.5px;
}
  
.link_itex .content{text-align:center;margin: 20px 10px 0 0;width:100%;border: 2px solid #fff;min-height:260px;border-radius:8px;box-shadow:0px 0px 40px 20px rgba(104,103,103,0.05);background:var(--item-background-color);padding:20px 25px;-webkit-transition:.2s linear;transition:.2s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.link_itex .coGGGGGGGGGGntent{
position: relative;padding-top: 20px;
    box-sizing: border-box;
    height: 100%;
    padding: 24px 20px;
    background-image: linear-gradient(180deg,#f3f5f8,#fff);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px rgba(55,99,170,.1),-8px -8px 20px #fff;
    border-radius: 4px;transition: all 5s ease-out;}
    
.link_itex .content:hover{
background: #F2F4FA;border: 2px solid #f6f8fe;
    box-shadow: inset 8px 8px 20px rgba(55, 99, 170, .1), inset -8px -8px 20px #fff;}
.link_itex .coGGGGGGGGGGGGGGGGGGntent:hover{border-radius: 16px;
background: #ffffff;
box-shadow:  20px 20px 60px #d9d9d9,
             -20px -20px 60px #ffffff;transform:translate3d(0px, -2px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style:preserve-3d;-webkit-transition:.3s linear;transition:.3s linear}

.link_itex .content .logo{margin-top:22px;width:64px;height:64px;border-radius:8px;object-fit:cover}.link_itex .content .like{display:flex;width:auto;height:auto;margin-top:-3px;text-align:center;padding:4px 8px;color:var(--like-text-color);float:right;border:solid;font-size:13px;border-radius:5px;border-color:var(--like-border-color);border-width:1px;cursor:pointer}.link_itex .content .like .heart{color:var(--heart-color)}.link_itex .content .title{font-weight:550;font-size:16px;margin-top:12px}.link_itex .content .title img{width:18px;height:18px}.link_itex .content .description{margin-top:12px;color:var(--text-color);font-size:13px;line-height:20px}.link_itex .content .description a{color:var(--title-text-color);font-weight:600;font-size:14px}.link_itex .content .category{display:inline-block;overflow:visible;margin-top:16px;margin-left:0;margin-right:3px;padding:6px 14px;border-radius:20px;background-image:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7));font-weight:400;font-size:12px}
@media (max-width: 9900px){.link_itex{width:24%}}
@media (max-width: 1600px){.link_itex{width:24%}}
@media (max-width: 1024px){.link_itex{width:46%;margin:0 auto;padding-top:30px;padding-left:0}}
@media (max-width: 600px){.link_itex{width:46%;margin:0 auto;padding-top:10px;padding-left:10}}

.wrapper{width:100%}.wrapper a{color:var(--title-text-color)}.wrapper .wrapper_content{max-width:980px;margin-left:1.5rem;margin-right:1.5rem;padding-top:3rem;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}@media (max-width: 1024px){.wrapper .wrapper_content{padding-top:0}}.wrapper .wrapper_content h1{margin-bottom:30px;font-size:28px;color:var(--title-text-color)}.wrapper .wrapper_content p{color:var(--text-color);font-size:18px;line-height:38px}.wrapper .commentContent{margin-left:1.5rem;margin-right:1.5rem;margin-top:3rem;max-width:880px}img{max-width:100%}blockquote{border-left:4px solid #2a2f36;padding-left:1rem;margin-left:5px;margin-right:0;font-style:italic;padding:.2rem 1rem}blockquote p{margin-bottom:0}blockquote>p:first-of-type{margin-top:0}blockquote>p:last-of-type{margin-bottom:0}:root{--background-color: #ffffff;--item-background-color: #fff;--title-text-color: #2a2f36;--text-color: #6c7a89;--border-color: #f7f5f5;--like-text-color: #82859B;--like-border-color: #E5E6EA;--heart-color: #C1C2CD}@media (prefers-color-scheme: dark){:root{--background-color: #171514;--item-background-color: #232222;--title-text-color: #efefef;--text-color: #b8b8b8;--border-color: #262626;--like-text-color: #82859B;--like-border-color: #82859B;--heart-color: #82859B}}

.a_animation a,.a_animation a:link,.a_animation a:visited,.a_animation a:focus{text-decoration:none;color:var(--title-text-color)}.a_animation a{position:relative;color:var(--title-text-color)}.a_animation a::after{content:'';display:block;width:0;height:2px;position:absolute;left:0;bottom:-3px;background:var(--title-text-color);transition:all 0.3s ease-in-out}.a_animation a:hover::after{width:100%} 

.booxx{
    background:url() no-repeat center 0px;
    background-position: center 0px;
    background-size: cover;
    text-indent: -999px;
}





/* Articles */
#articles {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.article-item {
	position: relative;
	width: 325px;
	margin-bottom: 20px;
	padding: 30px;
	background: var(--theme-bg-main);
	box-shadow: var(--theme-shadow, none);
	border-radius: var(--theme-radius, 30px);
	transition: transform 0.2s ease;
	overflow: hidden;
}

.article-item:hover {
	transform: scale(1.01);
}

.article-item p {
	color: var(--theme-text-main);
	font-size: 0.875rem;
	z-index: 2;
	position: relative;
}

.article-banner-wrap {
	position: absolute;
	height: 100%;
	width: 50%;
	right: 0;
	top: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.1);
	background: -webkit-linear-gradient(
		left,
		transparent,
		rgba(255, 255, 255, 1)
	);
	background: linear-gradient(to left, transparent, rgba(255, 255, 255, 1));
}

.article-banner {
	visibility: hidden;
	opacity: 0.2;
	position: absolute;
	height: 100%;
	width: 50%;
	right: 0;
	top: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center center;
}

.article-title {
	position: relative;
	z-index: 2;
	font-size: 1.25rem;
	margin: 0;
	margin-bottom: 0.875rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--theme-color, #07f);
}

.article-data {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}

.article-data span {
	opacity: 0.8;
	font-weight: 600;
	font-size: 0.925rem;
}

.article-data span a:link,
.article-data span a {
	color: var(--theme-text-main);
}

.articles-switch {
	display: block;
}

.card-item {
	float: left;
	width: 100%;
	margin-bottom: 2rem;
}

.card-item article {
	color: #fff;
	background: rgb(138, 160, 255);
	background: -moz-linear-gradient(
		128deg,
		rgb(138, 160, 255) 30%,
		rgb(90, 140, 250) 70%
	);
	background: -webkit-linear-gradient(
		128deg,
		rgb(138, 160, 255) 30%,
		rgb(90, 140, 250) 70%
	);
	background: -o-linear-gradient(
		128deg,
		rgb(138, 160, 255) 30%,
		rgb(90, 140, 250) 70%
	);
	background: -ms-linear-gradient(
		128deg,
		rgb(138, 160, 255) 30%,
		rgb(90, 140, 250) 70%
	);
	background: linear-gradient(
		218deg,
		rgb(138, 160, 255) 30%,
		rgb(90, 140, 250) 70%
	);
	position: relative;
	z-index: 0;
	padding: 2rem 1.5rem;
	height: 6.5rem;
	border-radius: var(--theme-radius);
	overflow: hidden;
	word-break: break-all;
	transition: all 0.5s ease;
}

.card-item article:hover {
	transform: translateY(-5px);
}

.card-item article h2 {
	position: absolute;
	bottom: 38px;
	color: white;
	margin: 0;
	font-size: 1.25rem;
	width: 100%;
}

.card-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.2s;
	filter: brightness(90%);
}

.card-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.card-item-title {
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-item-meta {
	font-size: 0.875rem;
}

.card-item-category {
	position: absolute;
	display: inline-block;
	z-index: 2;
}

.card-item-category-link,
.card-item-date,
.card-item-picnum {
	color: white;
	border-radius: 20px;
	padding: 4px 8px;
	transition: all 0.2s ease;
	text-decoration: none;
	cursor: default;
}

a.next {
	float: right;
}

a.prev {
	float: left;
}

a.prev,
a.next {
	font-size: 0.875rem;
	background: rgba(255, 255, 255, 0.99);
	padding: 10px 20px;
	border-radius: 1000rem;
	border: 1px solid #eee;
	box-shadow: var(--theme-shadow, none);
	transition: transform 0.2s ease;
	color: var(--theme-text-main);
}

a.prev:hover,
a.next:hover {
	transform: scale(0.99);
}

h3.archive-title {
	font-weight: 400;
	text-align: center;
	margin-bottom: 2rem;
	text-shadow: 0 3px 6px rgba(255, 255, 255, 0.3);
	color: var(--theme-text-main);
	opacity: 0.8;
}

/* Page & Post */
.PAP,
#lyrics {
	background: var(--theme-bg-main);
	box-shadow: var(--theme-shadow, none);
	border-radius: var(--theme-radius, 30px);
	overflow: hidden;
	-moz-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	-webkit-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	-o-animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
	animation: opacity-in var(--theme-animation-in-duration, 1s) ease;
}

.PAP-banner {
	height: 15.5rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background: var(--theme-banner-bg);
}

.PAP-banner div {
	width: 100%;
}

.PAP-banner div h2 {
	font-size: 2rem;
	margin: 0;
	color: var(--theme-banner-title);
	font-weight: 200;
	text-align: center;
	line-height: 1.33;
	max-width: 80%;
	margin: 0 auto;
}

.PAP-banner div p {
	color: var(--theme-text-main);
	margin: 0.5rem 0 0 0;
	font-size: 0.725rem;
	text-align: center;
	opacity: 0.4;
}

.PAP-IMG-Banner {
	display: block;
	position: relative;
}

.PAP-IMG-Banner div:not(.PAP-banner-background, .PAP-banner-mask) {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
}

.PAP-IMG-Banner div h2 {
	opacity: 0.85;
	font-size: 1.5rem;
}

.PAP-IMG-Banner div h2,
.PAP-IMG-Banner div p,
.PAP-IMG-Banner div p a {
	text-align: left;
	max-width: 100%;
	color: #fff;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.PAP-banner-mask {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.25);
}

.PAP-banner-background {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 15.5rem;
	zoom: 1;
	background-color: var(--theme-banner-bg);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center center;
}

.PAP-content {
	font-size: 0.875rem;
}

.PAP-content > * {
	max-width: 100%;
}

.PAP-content p,
.PAP-content h1,
.PAP-content h2,
.PAP-content h3,
.PAP-content h4,
.PAP-content h5 {
	color: var(--theme-text-main);
	margin: 0 1.5rem 1.25rem;
	position: relative;
	font-weight: 400;
}

.PAP-content h1,
.PAP-content h2,
.PAP-content h3 {
	margin-top: 2rem;
	cursor: pointer;
	position: relative;
}

.PAP-content h1::after,
.PAP-content h2::after,
.PAP-content h3::after {
	content: " ";
	display: block;
	height: 3px;
	width: 3rem;
	background-color: #eee;
	opacity: 0.6;
	position: absolute;
	bottom: -0.5rem;
}

.PAP-content h1::before,
.PAP-content h2::before,
.PAP-content h3::before {
	content: "🔖";
	position: absolute;
	zoom: 0.8;
	right: 2rem;
	top: 0;
	opacity: 0;
	transition: opacity 0.2s;
}

.PAP-content h1:hover::before,
.PAP-content h2:hover::before,
.PAP-content h3:hover::before {
	opacity: 0.2;
}

.PAP-content h1 {
	font-size: 1.5rem;
}

.PAP-content h2 {
	font-size: 1.35rem;
}

.PAP-content h3 {
	font-size: 1.15rem;
}

.PAP-content h4 {
	font-size: 1.05rem;
}

.PAP-content h5 {
	font-size: 1rem;
}

.PAP-content > *:first-child {
	margin-top: 1.5rem;
}

.PAP-content p {
	margin-bottom: 1.25rem;
	text-align: justify;
	color: var(--theme-pap-text-main);
	word-wrap: break-word;
	line-height: 1.8;
	letter-spacing: 0.03rem;
}

.PAP-content li {
	text-align: justify;
	color: var(--theme-pap-text-main);
	word-wrap: break-word;
	line-height: 1.8;
	letter-spacing: 0.013rem;
}

.PAP-content:first {
	margin-top: 1.5rem;
}

.PAP-content:last-child {
	margin-bottom: 2rem;
}

.PAP-content blockquote {
	margin: 1.5rem 0;
	color: var(--theme-text-blockq);
	padding: 0.5rem 1.5rem;
	line-height: 1.8;
	position: relative;
	background: var(--theme-text-blockq-bg);
}

.PAP-content blockquote p {
	color: #878c93;
	margin-bottom: 0;
}

.PAP-content blockquote::before {
	content: "";
	height: 100%;
	width: 5px;
	background: #ddd;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

.PAP-content hr {
	overflow: hidden;
	margin: 1rem 0;
	padding: 0;
	height: 0.125rem;
	border: none;
	background: #e7e7e7
		repeating-linear-gradient(
			-45deg,
			#fff,
			#fff 0.25rem,
			transparent 0.25rem,
			transparent 0.5rem
		);
}

.PAP-content ul,
.PAP-content ol {
	margin: 1.5rem 1.5rem;
}

.PAP-content blockquote p {
	margin-left: 0;
}

.PAP-content strong {
	color: var(--theme-text-strong);
}

.PAP-content p img,
.PAP-content img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
	cursor: pointer;
}

.imageinfo {
	display: block;
	color: #999;
	font-size: 0.625rem;
	text-align: right;
	margin-top: 10px;
}

.PAP-content p img.lazyload-done,
.PAP-content img.lazyload-done {
	visibility: visible;
	-moz-animation: pic-show 1s;
	-webkit-animation: pic-show 1s;
	-o-animation: pic-show 1s;
	animation: pic-show 1s;
}

.PAP-content pre {
	background: #343232;
	color: rgb(240, 240, 240);
}

code:not([class*="language-"]) {
	font-family: "Jetbrains Mono", "Monaco", "Courier New", "Consolas", serif;
	margin: 0 4px;
	word-wrap: break-word;
	color: var(--theme-text-code);
	font-size: 14px;
}

code[class*="language-"],
pre[class*="language-"] {
	font-family: "Jetbrains Mono", "Monaco", "Courier New", "Consolas", serif;
}

.code-toolbar {
	margin: 1.5rem 0;
}

.PAP-content table,
.comment-content table {
	border-collapse: collapse;
	border-spacing: 0;
	display: table;
	overflow: auto;
	width: 80%;
	word-break: normal;
	margin: 1.5rem auto;
}

.PAP-content table th {
	font-weight: bold;
}

.PAP-content table th,
.PAP-content table td {
	padding: 0.375rem 0.8125rem;
	border: 0.0625rem solid var(--theme-table-td-border);
}

.PAP-content table tr {
	border-top: 0.0625rem solid var(--theme-table-tr-border);
	background-color: var(--theme-table-td-bg);
}

.PAP-content table tr:nth-child(2n),
.comment-content table tr:nth-child(2n) {
	background-color: var(--theme-table-td-bg-even);
}

.PAP-content table thead tr {
	background-color: var(--theme-table-th-bg);
}

.PAP-content .aplayer {
	box-shadow: none;
	margin: 1.5rem;
	background: var(--theme-bg-main);
	color: var(--theme-pap-text-main);
}

.PAP-content .aplayer .aplayer-lrc p {
	color: var(--theme-pap-text-main);
}

.PAP-content .aplayer .aplayer-lrc:before {
	display: none;
}

.PAP-content .aplayer .aplayer-lrc:after {
	display: none;
}

/* Post */
#post-footer {
	font-size: 0.625rem;
	display: flex;
	justify-content: space-between;
	margin: 1.5rem;
}

#post-footer p {
	color: var(--theme-text-main);
	margin: 0;
	opacity: 0.7;
}

#post-footer-tag p a {
	padding: 8px 15px;
	background-color: #f5f5f5;
	color: #777;
	border-radius: 1000rem;
}

#post-toolbar {
	margin: 1.5rem;
}

.post-toolbar-btn {
	display: inline-block;
	background: RGBA(244, 245, 245, 1);
	border: none;
	padding: 0.438rem 0.825rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 5px;
	color: var(--theme-color);
	transition: background 0.2s;
	cursor: pointer;
}

#post-sponsor {
	background: var(--theme-banner-bg);
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height 0.5s;
}

#post-sponsor img {
	display: block;
	width: 10rem;
	margin: 0 auto;
	padding: 2rem;
}

/* Archives */
#archives-content {
	margin: 1.5rem;
}

#archives-content h2 {
	text-align: center;
	font-size: 2.3rem;
	font-weight: 400;
	color: RGB(182, 177, 150);
	margin: 0;
}

#tag-cloud {
	width: 100%;
	line-height: 50px;
}

#tag-cloud li {
	list-style-type: none;
	display: inline-block;
}

#tag-cloud li a {
	font-size: 0.625rem;
	color: #777;
	padding: 8px 15px;
	margin: 0.1rem;
	transition: all 0.24s ease;
	background: rgba(241, 243, 244, 0.7);
	border-radius: 10000rem;
}

#tag-cloud li a:hover {
	background: rgba(241, 243, 244, 1);
}

#timeline {
	margin: 40px auto;
}

#timeline > * {
	color: #787878;
	font-family: "STHeiti Light", "Microsoft YaHei", "SimHei",
		"Microsoft JhengHei", "Microsoft YaHei", "Mirages Custom",
		"Merriweather", "Open Sans", "PingFang SC", "Hiragino Sans GB",
		"Microsoft Yahei", "WenQuanYi Micro Hei", "Segoe UI Emoji",
		"Segoe UI Symbol", Helvetica, Arial, sans-serif !important;
}

.archive-title h3 {
	font-size: 1.125rem;
}

.archives a {
	position: relative;
	display: block;
	padding: 0.625rem;
	color: #333;
	font-style: normal;
	line-height: 1.125rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

.archives a:hover {
	background: #eee;
}

.archives a .time {
	color: #888;
	padding-right: 0.625rem;
}

/* Lyrics */
#lyrics {
	padding: 1.5rem;
}

#lyrics p:nth-child(even) {
	color: RGB(87, 103, 104);
	margin-top: -20px;
}

#lyrics p {
	line-height: 1.7;
	font-size: 1rem;
	color: RGB(182, 177, 150);
}

#lyrics p span {
	color: RGB(87, 103, 104);
}

/* Links */

#link-list {
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin: 0 0 2rem 0;
	flex-wrap: wrap;
}

#link-liss {
	display: flex;
	justify-content: space-between;
	padding: 0;
	flex-wrap: wrap;
}

.link-wrap {
	display: block;
	width: 256px;
	height: 100px;
	margin: 0 0 1.5rem;
	padding: 0;
	overflow: hidden;
}

.link-item {
	background: var(--theme-bg-main);
	border-radius: var(--theme-radius);
	overflow: hidden;
	box-shadow: var(--theme-shadow);
	position: relative;
}

.link-item img {
	width: 100px;
	height: 100px;
	float: left;
}

.link-item-content {
	box-sizing: border-box;
	float: left;
	width: 156px;
	padding: 1rem;
}

.link-item-m-content {
	display: none;
}

.link-item-content h4 {
	margin: 0 0 5px 0;
	font-size: 1rem;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* .link-item-content p {
	margin: 0;
	font-size: 0.825rem;
	color: #222;
	opacity: 0.75;
	text-align: right;
	display: inline-block;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	max-width: 120px;
	overflow: hidden;
	text-overflow:ellipsis;    
	white-space: nowrap;
} */

.link-item-content p {
	position: absolute;
	bottom: -10px;
	right: -8px;
	margin: 0;
	font-size: 2.5rem;
	font-style: italic;
	-webkit-text-stroke: 2px var(--theme-color);
	color: transparent;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	opacity: 0.06;
}

/* Comments */
#comments-form {
	background: var(--theme-bg-main);
	border-radius: var(--theme-radius);
	box-shadow: var(--theme-shadow);
	padding: 1.5rem;
	margin: 1.5rem 0;
	position: relative;
}

.page-navigator {
    display: block;
	padding: 0;
	text-align: center;
}

.page-navigator li {
    display: none;
}

.page-navigator li.prev, .page-navigator li.next {
    list-style: none;
    display: inline-block !important;
	margin: 0 .5rem;
}

.page-navigator li a {
    font-size: 0.725rem;
	background: var(--theme-banner-bg);
	padding: .4rem .6rem;
	border-radius: 1000rem;
	border: 1px solid #eee;
	box-shadow: var(--theme-shadow, none);
	transition: transform 0.2s ease;
	color: var(--theme-text-main);
}

.page-navigator li a span {
	position: relative;
	top: -2px;
}

#comments-form h3 {
	color: var(--theme-text-main);
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.comments-Input {
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
}

.comments-Input input {
	width: 30%;
	background: #f4f5f5;
	border: 1px solid transparent;
	outline: none;
	padding: 0.438rem 0.525rem;
	border-radius: 5px;
	font-size: 0.875rem;
	color: RGBA(28, 31, 35, 1);
}

#comments-textarea {
	box-sizing: border-box;
	width: 100%;
	background: #f4f5f5;
	border: 1px solid transparent;
	outline: none;
	padding: 0.438rem 0.525rem;
	font-size: 0.875rem;
	resize: none;
	height: 7rem;
	z-index: 1;
	position: relative;
	line-height: 1.5;
}

#comments-textarea-wrap {
	height: 9.5rem;
	background: #f4f5f5;
	padding: 0;
	margin: 0.5rem 0 0 0;
	border-radius: 5px;
}

#comments-form input.submit {
	background: RGBA(244, 245, 245, 1);
	border: none;
	padding: 0.438rem 0.825rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 5px;
	color: var(--theme-color);
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	z-index: 2;
	transition: background 0.2s;
	cursor: pointer;
}

#comments-form input.submit:hover {
	background: RGBA(236, 237, 237, 1);
}

.comment-list {
	padding: 0;
}

.comment-list li {
	list-style-type: none;
}

.comment-inner {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

.comment-children {
	padding-left: 2rem;
}

.comment-children .comment-children {
	padding-left: 0;
}

.comment-inner:hover .comment-avatar span a {
	opacity: 1;
}

.comment-avatar {
	width: 50px;
	overflow: hidden;
	text-align: center;
}

.comment-avatar span a {
	display: block;
	font-size: 0.825rem;
	background-color: RGBA(244, 245, 245, 1);
	border-radius: 5px;
	padding: 3px 6px;
	margin-top: 5px;
	opacity: 0;
	transition: opacity 0.2s;
	font-weight: 600;
}

.comment-avatar img {
	height: 50px;
	width: 50px;
	border-radius: 10000rem;
}

.comment-content {
	background-color: var(--theme-bg-main);
	border-radius: 15px;
	padding: 15px;
	margin: 0 0 1rem 10px;
	font-size: 0.875rem;
	min-width: 40%;
	max-width: 85%;
	box-shadow: var(--theme-shadow);
}

.comment-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	color: var(--theme-text-main);
}

.comment-meta span:first-child {
	font-weight: 600;
	font-size: 1rem;
}

.comment-meta span:last-child {
	opacity: 0.5;
	font-size: 0.625rem;
}

.comment-content p {
	color: var(--theme-text-main);
	margin-bottom: 0;
	line-height: 1.7;
	letter-spacing: 0.03rem;
	margin-top: 0;
}

#cancel-comment-reply-link {
	display: block;
	position: absolute;
	bottom: 2rem;
	right: 6rem;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.438rem 0.825rem;
	z-index: 2;
	transition: background 0.2s;
	border-radius: 5px;
}

#cancel-comment-reply-link:hover {
	background: RGBA(236, 237, 237, 1);
}

/* OwO */
#OwO-logo {
	display: block;
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.438rem 0.825rem;
	z-index: 2;
	color: var(--theme-text-main);
	cursor: pointer;
	opacity: 0.7;
}

#OwO-container {
	height: 20rem;
	width: 40rem;
	max-width: 90%;
	border-radius: var(--theme-radius);
	overflow: hidden;
	background-color: var(--theme-bg-main);
	position: fixed;
	bottom: -35rem;
	left: calc(50%);
	transform: translateX(-50%);
	z-index: 9;
	box-shadow: var(--theme-shadow);
}

#OwO-content {
	box-sizing: border-box;
	height: 15rem;
	width: 100%;
	padding: 1.5rem;
}

#OwO-header {
	display: flex;
	justify-content: space-between;
}

#OwO-header span {
	padding: 0.438rem 0 0 0.825rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 5px;
	color: var(--theme-text-main);
	transition: color 0.2s;
	cursor: pointer;
}

#meme-selector span:hover {
	color: var(--theme-color);
}

span#toggleOwO {
	color: var(--theme-text-strong);
}

#OwO-container.OwO-in {
	bottom: -5rem;
	-moz-animation: OwO-in 0.5s;
	-webkit-animation: OwO-in 0.5s;
	-o-animation: OwO-in 0.5s;
	animation: OwO-in 0.5s;
}

#OwO-container.OwO-out {
	bottom: -35rem;
	-moz-animation: OwO-out 0.5s;
	-webkit-animation: OwO-out 0.5s;
	-o-animation: OwO-out 0.5s;
	animation: OwO-out 0.5s;
}

#meme-display {
	margin-top: 1rem;
	height: 10rem;
	overflow-y: scroll;
}

#meme-display h4 {
	margin: 0;
	font-size: 0.875rem;
	color: var(--theme-text-main);
	opacity: 0.7;
	padding-left: 0.825rem;
}

.meme-section {
	padding: 0 0.825rem;
}

.meme-section li {
	list-style-type: none;
	display: inline-block;
}

.OwO-item {
	cursor: pointer;
}

.OwO-item img {
	width: 2rem;
	height: 2rem;
	margin: 0.5rem;
}

/* Toolbar */
#toolbar {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
}

#toolbar-container {
	width: 3rem;
	height: auto;
}

.toolbar-btn {
	display: block;
	height: 2.5rem;
	width: 2.5rem;
	box-sizing: border-box;
	padding: calc(0.5rem - 2px);
	border-radius: 10000rem;
	background: var(--theme-bg-main);
	margin-top: 0.5rem;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	border: 1px solid #eee;
}

.toolbar-btn:hover {
	opacity: 1;
}

.toolbar-btn svg {
	height: 1.5rem;
	width: 1.5rem;
}

.toolbar-btn svg path {
	fill: var(--theme-text-main);
	opacity: 0.7;
}

/* TOC */
#toc {
	position: fixed;
	z-index: 3;
	right: -15rem;
	top: 0;
	width: 15rem;
	height: 100vh;
	background: var(--theme-banner-bg);
	transition: right 0.3s;
	color: var(--theme-text-main);
	box-shadow: var(--theme-shadow);
}

.toc-show {
	right: 0 !important;
}

.toc-show-main {
	right: 5rem !important;
}

#toc-container {
	box-sizing: border-box;
	padding: 1.5rem;
	margin-left: 1.5rem;
	max-height: 100%;
    overflow-y: auto;
	direction: rtl;
}

#toc-container h3{
	font-size: 1.5rem;
	margin-top: 0;
}

#toc-close {
	position: absolute;
	top: 50%;
	left: 0;
	padding: 0.5rem 0.5rem 0.5rem 0;
	border-top-right-radius: 1000rem;
	border-bottom-right-radius: 1000rem;
	background: var(--theme-bg-main);
	cursor: pointer;
}

#toc-close svg {
	width: 2rem;
	height: 2rem;
}

#toc-close svg path {
	fill: var(--theme-text-main);
	opacity: 0.8;
}

.toc-list {
	padding: 0;
	direction: ltr;
}

.toc-list li {
	font-size: 0.875rem;
	list-style-type: none;
	line-height: 2;
	border-radius: 5px;
	transition: transform .2s, font-weight .2s;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.toc-list li a{
	color: var(--theme-text-main);
}

.toc-list li:hover {
	transform: translateX(.5rem);
}

.is-active-li {
	font-weight: 600;
}

/* Sidebar */
#sliderbar {
    position: fixed;
    left: -16rem;
    top: 0;
    width: 15rem;
    z-index: 999;
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
    scrollbar-color: transparent transparent;
	transition: left .3s linear;
}

.move-left {
	left: -16rem!important;
}

.move-right {
	left: 10px!important;
}

#sliderbar::-webkit-scrollbar {
    display: none !important;
}

#sliderbar-cover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
}

.sliderbar-content {
    margin: 10px 0;
    background: var(--theme-bg-main);
    border-width: 0;
    box-shadow: var(--theme-shadow);
    border-radius: 15px;
    overflow: hidden;
	color: var(--theme-text-main);
}

.profile-content {
    position: relative;
}

.profile-cover {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    zoom: 1;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    -webkit-filter: grayscale(20%); /* Chrome, Opera */
    -moz-filter: grayscale(20%);
    filter: grayscale(20%);
    opacity: 0.5;
}

.profile-avatar-container {
    text-align: center;
    position: absolute;
    top: 50px;
    z-index: 2;
    width: 100%;
}

.profile-avatar-container img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 2px solid RGBA(255, 255, 255, 0.8);
}

.profile-content h4 {
    text-align: center;
    font-size: 1.25rem;
    margin: 70px 0 10px 0;
    opacity: 0.7;
}

.profile-content i {
    display: block;
    padding: 10px 0;
    background: var(--theme-banner-bg);
    width: 100%;
    text-align: center;
    color: #9a9a9a;
    font-size: 0.875rem;
    font-weight: 100;
}

.profile-meta {
    margin: 10px 0 15px 0;
}

.articles, .reviews, .cats {
    width: 33.3%;
    float: left;
    text-align: center;
}

.articles p, .reviews p, .cats p {
    margin: 10px 0 0 0;
    font-size: 0.875rem;
}

.articles span, .reviews span, .cats span {
    font-weight: 600;
    opacity: 0.6;
    font-size: 0.625rem;
}

#categoryList {
    width: 45%;
    float: left;
}

.category-content li a:hover {
    color: #fff !important;
    background: var(--theme-color);
}

.category-content li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}

.category-content li a {
    color: var(--theme-text-main) !important;
    display: block;
    padding: 10px 20px;
	font-size: 0.875rem;
    -webkit-transition: .2s ease all;
    -moz-transition: .2s ease all;
    -o-transition: .2s ease all;
    transition: .2s ease all;
}

#sliderbar-photo {
    width: 50%;
    float: right;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    position: relative;
}

#sliderbar-photo:hover div {
    opacity: 1;
}

#sliderbar-photo div {
    opacity: 0;
    transition: all 200ms;
    background: RGBA(255, 255, 255, 0.7);
    height: 100%;
    position: relative;
    backdrop-filter: blur(5px);
}

#sliderbar-photo div p {
    margin: 0;
    position: relative;
    top: 50%; /*偏移*/
    transform: translateY(-50%);
    text-align: center;
	font-size: 0.875rem;
}

#sliderbar-video {
    position: absolute;
}

@media (max-width: 1024px) {
	html {
		font-size: 17px;
	}

	#header-title h2 {
		font-size: 1.5rem;
	}
}

@media (max-width: 830px) {
	html {
		font-size: 16px;
	}

	#main {
		width: 95%;
		margin: 20px auto;
	}

	#container {
		width: 100%;
	}

	.article-item {
		width: 100%;
		padding: 1.5rem;
	}

	#header {
		margin-bottom: 20px;
		padding: 25px;
	}

	#header-content {
		display: block;
	}

	#header-content-right {
		margin-top: 20px;
		text-align: center;
	}

	.PAP-banner,
	.PAP-banner-background,
	.PAP-banner-mask {
		height: 13.5rem;
	}

	.PAP-banner div h2 {
		font-size: 1.2rem;
	}

	#post-footer-modified {
		display: none;
	}

	#footer-content {
		margin-bottom: 10px;
		flex-wrap: wrap;
	}

	#footer-nav {
		margin-top: 10px;
		text-align: left;
	}

	#footer-nav a {
		margin: 0 5px 0 0;
	}

	#footer-sponsor img,
	#footer-sponsor a {
		height: 1.35rem;
		margin-right: 5px;
		position: relative;
		bottom: -4px;
	}

	footer {
		padding: 15px 25px 25px 25px;
	}

	.bilibili {
		height: 10rem;
	}

	.link-wrap {
		width: 100px;
	}

	.link-item-content {
		display: none;
	}

	.link-item-m-content {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		opacity: 0;
		transition: opacity 0.2s;
	}

	.link-item-m-content span {
		display: block;
		max-width: 80%;
		color: #fff;
		text-align: center;
		line-height: 1.77;
	}

	.link-wrap:hover .link-item-m-content {
		opacity: 1;
	}

	.comment-content {
		max-width: 65%;
	}

	.comments-Input input {
		width: 26%;
	}
}



/*ys*/
.link_item .item-top-extra {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: normal;
}
.link_item .item-title a {
    display: block;
    color: #323232
}

.link_item .item-title a:hover {
    color: #ff6000
}

.link_item .item-top-extra {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: normal
}

.link_item .item-top-extra .extra-item {
    float: left;
    white-space: nowrap;
    height: .25rem;
    line-height: .25rem;
    font-size: .14rem;
    padding: 0 .1rem;
    color: #fff;
    letter-spacing: 1px
}

.link_item .item-top-extra .extra-item a {
    color: #fff
}

.link_item .item-top-extra .extra-item:last-child {
    background-color: rgba(0,0,0,0.7);
    -webkit-border-top-right-radius: .1rem;
    -moz-border-radius-topright: .1rem;
    border-top-right-radius: .1rem;
    padding-left: .08rem;
    padding-right: .08rem
}

.link_item .item-top-extra .extra-item:first-child {
    background-color: rgba(255,96,0,0.9);
    -webkit-border-bottom-left-radius: .1rem;
    -moz-border-radius-bottomleft: .1rem;
    border-bottom-left-radius: .1rem
}

.link_item .item-top-extra .extra-item.extra-term {
    padding: 0
}

.link_item .item-top-extra .extra-item.extra-term a {
    display: block;
    padding-left: .12rem;
    padding-right: .1rem
}

.link_item .item-top-extra .extra-item.extra-hot {
    background-color: rgba(252,45,80,0.9)
}