@charset 'utf-8';

/*
 * Themain CSS file for Miracles
 * Author:  Eltrac
 * License: MIT
 */
 
/* 栅格系统 from Bootstrap */
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.333333%;max-width:8.333333%}.col-2{flex:0 0 16.666667%;max-width:16.666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.333333%;max-width:33.333333%}.col-5{flex:0 0 41.666667%;max-width:41.666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.333333%;max-width:58.333333%}.col-8{flex:0 0 66.666667%;max-width:66.666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.333333%;max-width:83.333333%}.col-11{flex:0 0 91.666667%;max-width:91.666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.main-container{margin:0 auto}@media (min-width:576px){.main-container{max-width:540px}}@media (min-width:768px){.main-container{max-width:720px}}@media (min-width:992px){.main-container{max-width:920px}}@media (min-width:1200px){.main-container{max-width:1000px}}
/* Var */
:root {
	--theme-color: #4D90FE;
}
/* 全局样式 */
* {
	box-sizing: border-box
}
a {
	text-decoration: none;
	color: #000
}
html {
	font-size: 16px;
}
body,html {
	padding: 0;
	margin: 0;
	background: #fafafa;
	overflow: auto;
	transition: background 0.2s;
	width: 100%;
}
body {
	font-family: 'Noto Sans SC',sans-serif;
	transition: all 0.3s;
}
hr {
	border: none;
	border-bottom: 1px solid #ccc;
	margin: 10px 0
}
/* 滚动条 */
::-webkit-scrollbar {
	width: 6px;
	height: 5px
}
::-webkit-scrollbar-button {
	display: none
}
::-webkit-scrollbar-thumb {
	background: gray;
}
/* 框选文本色彩 */
::-moz-selection,
::-webkit-selection,
::selection {
	background-color: var(--theme-color)
}

/* For Body tag */
.body-dark {
	/* For the dark theme
	 * turn to 'dark.miracles.css' 
	 */
}
.body-gray {
	/* For the gray theme */
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
.body-serif {
	font-family: 'Noto Serif SC',serif
}
/* Html tag class for filter */
.html-filter-gray {
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
.html-filter-sepia {
	filter: sepia(30%);
    -webkit-filter: sepia(30%);
    -moz-filter: sepia(30%);
    -ms-filter: sepia(30%);
    -o-filter: sepia(30%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(sepia=0.30);
}

/* 组件 */
/* > 按钮 */
button {
	outline: none;
	cursor: pointer
}
.button {
	border: 3px solid #ccc;
	border-radius: 30px;
	padding: 8px 12px;
	transition: all .2s;
}
.button:hover {
	border-color: #000;
	background: #000;
	color: #fff
}
.button-sm {
	padding: 3px 5px;
}
.button-md {
	border: none;
	border-radius: 3px;
}
.button-md:hover {
	background: rgb(235,235,235);
	color: #fff;
}
/* > Alert */
.alert {
	background: rgb(80,80,80);
	color: #fff;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 10px 18px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	z-index: 40;
	transition: all 0.3s;
}
.alert.ready {
	top: -200px;
}
.alert-close {
	border: none;
	background: rgb(0,0,0,0);
	transform: scale(0.8);
	color: #fff;
	float: right;
	margin-top: -36px;
}

/* Large Mask */
.mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgb(70,70,70,0);
	z-index: -100;
	transition: background 0.4s;
}
.mask-open {
	background: rgb(70,70,70,0.7);
	z-index: 25;
}

/* 导航栏 */
.nav {
	background: rgba(255,255,255,0.96);
	width: 100%;
	position: absolute;
	box-shadow: 0 0 20px #ddd;
	-webkit-box-shadow: 0 0 20px #ddd;
	-moz-box-shadow: 0 0 30px #ddd;
	display: table;
	top: 0;
	z-index: 10;
	transition: all .2s;
}
.nav-content {
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	height: 80px;
	padding: 0;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative
}
.nav-content a {
	text-decoration: none;
	color: #141414;
	padding: 30px 8px;
	transition: background .2s;
	font-size: 16px
}
.nav-content a:hover,
.nav-mobile-content a:hover,
.nav-mobile-content button:hover,
.nav-sorts-content {
	background: #f0f0f0
}
.nav-title {
	color: #000;
	font-weight: 700
}
.nav-fixed {
	position: fixed!important
}
.nav-icon-button {
	border-radius: 10000px;
	border: none;
	padding: 10px 12px;
	background: rgb(240,240,240);
	transition: background .2s;
	outline: 0;
	position: absolute;
	top: 20px;
}
.nav-mobile {
	background: rgba(255,255,255,0.99);
	word-break: keep-all;
}
.nav-mobile-content {
	padding: 0 5px;
}
.nav-mobile-content a,
.nav-mobile-content button {
	margin: 0;
	padding: 16px 10px;
}
.search-button {
	right: 20px;
}
.login-button {
	right: 65px;
}
.setting-button {
	right: 110px;
}
.nav-icon-button:hover,.search-close {
	display: block;
	background: rgb(230,230,230);
	cursor: pointer
}

/* Drawer */
.drawer {
	background: rgb(246,246,246);
	border-right: 1px solid #ddd;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 30;
	left: -150vh;
	transition: all 0.8s;
	box-shadow: 0 0 30px #646464;
	-moz-box-shadow: 0 0 30px #646464;
	-webkit-box-shadow: 0 0 30px #646464;
	/* Mobile */
	width: 360px;
}
.drawer-avatar {
	margin-top: 50px;
}
.drawer-avatar img {
	display: block;
	margin: 0 auto;
	border-radius: 100%;
	/* Mobile */
	width: 150px;
	height: 150px;
}
.drawer-button {
	position: fixed;
	top: 10px;
	left: 15px;
	background: rgba(0,0,0,0);
	border-radius: 100%;
	border: none;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-shadow: 0 1px 6px #bababa;
	transform: scale(1.2);
	transition: background 0.3s;
	padding: 3px;
    outline: none;	
	transition: all 0.5s;
}
.drawer-button:hover {
	cursor: pointer;
	background: rgba(200,200,200,0.4);
}
.drawer-open .drawer {
	left: 0;
}
.drawer-open .drawer-button {
	left: 4px;
	top: 4px;
	color: rgb(80,80,80);
	text-shadow: 0 0 0 #fff;
}
#live2dcanvas {
	z-index: 0!important;
}

.drawer-search {
	background: rgb(240,240,240);
	padding: 10px 8px;
	margin-top: 20px;
}
.drawer-search-form input,
.drawer-search-form button {
	color: gray;
	border-radius: 2px;
	border: 1px solid #ccc;
	margin: 0;
	padding: 7px 3px;
}
.drawer-search-form input {
	width: 70%;
	background: #fff;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: -5px;
}
.drawer-search-form button {
	width: 28%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: #ddd;
}
.drawer-content {
	margin-top: 10px;
	overflow-y: auto;
	height: 60vh;
}
.drawer-content a {
	display: block;
	text-align: center;
	font-size: 21px;
	padding: 14px 0;
}
.drawer-content a:hover {
	background: rgb(240,240,240);
}
.drawer-main {
	height: 87vh;
}
.drawer-footer {
	background: rgb(253,253,253);
	padding: 8px 0;
	text-align: center;
	height: 13vh;
}
.drawer-icon {
	height: 6vh;
	width: 6vh;
	border-radius: 100%;
	background: rgb(246,246,246);
	transition: background: 0.2s;
	margin: 0 3px;
	border: none;
	outline: none;
}
.drawer-icon:hover {
	background: rgb(240,240,240);
}

/* 首页大图 */
.index-banner {
	margin-top: -21px;
	width: 100%;
	text-align: center;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.dark-cover,
.banner-mask {
	/* .dark-cover 是之前版本遮罩的类名 */
	width: 100%;
	height: 100%;
	background: rgba(30,30,30,.25);
	z-index: 1;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center
}
.banner-content {
	vertical-align: middle
}
.banner-content h1 {
	margin-bottom: 0
}
.banner-content p {
	margin-top: 10px
}
/* 文章 */
.post-list,
.post-body {
	margin-top: -110px
}
.post-body,.post-item {
	background: #fff;
	box-shadow: 0 0 36px #bababa;
	-moz-box-shadow: 0 0 36px #bababa;
	-webkit-box-shadow: 0 0 36px #bababa;
	transition: background .1s
}
.post-banner-box {
	margin-left: -15px;
	margin-bottom: -2px;
	max-height: 300px;
	min-height: 270px;
	overflow: hidden
}
.post-banner img {
	width: 100%;
	min-height: 270px;
	margin-right: -40px
}
.post-title {
	margin-top: 30px;
	transition: color .2s;
	overflow: hidden;
	height: 40px;
	white-space: nowrap;
	text-overflow: ellipsis
}
.post-excerpt {
	overflow: hidden;
	text-overflow: ellipsis
}
.post-meta,.post-meta a {
	color: gray
}
.post-button-box {
	margin-top: 15px
}
.post-button {
	float: right
}
.post-footer {
	color: #c8c8c8;
	font-size: 14px
}
.post-tags a {
	color: #bebebe;
	padding: 2px 4px;
	border-radius: 2px;
	background: #f0f0f0;
	transition: background .2s
}
.post-tags a:hover {
	background: #f5f5f5
}
/* >文章内容 */
.post-content {
	padding: 26px;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 2px;
	word-break: break-all
}
.post-content hr {
	display: block;
	margin: 80px auto;
	width: 150px;
	background: #f0f0f0;
	height: 5px;
	border: none
}
.post-content code {
	font-size: 0.8em;
	background: #f0f0f0;
	border-radius: 3px;
	font-family: font-family: 'Noto Sans SC',sans-serif!important;
	padding: 5px 8px;
	color: var(--theme-color);
	vertical-align: middle
}
.post-content img {
	display: block;
	margin: 20px auto;
	border-radius: 3px;
	box-shadow: 0 4px 20px #ccc;
	-moz-box-shadow: 0 4px 20px #ccc;
	-webkit-box-shadow: 0 4px 20px #ccc;
	max-width: 90%
}
.post-content blockquote p {
	margin: 0
}
.post-content blockquote {
	border-left: 6px solid #ddd;
	padding-left: 10px;
	margin-left: 0;
	color: gray
}
.post-content table {
	width: 100%;
	border-left: 1px solid #ccc;
	border-top: 2px solid #ccc;
	border-spacing: 0
}
.post-content td,.post-content th {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 6px 8px
}
.post-content th {
	background: #fff!important
}
.post-content tr:nth-child(odd) {
	background: #f5f5f5
}
.post-content a:not(.no-line) {
	position: relative;
	color: var(--theme-color)
}
.post-content a:not(.no-line)::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--theme-color);
	transform-origin: bottom right;
	transform: scaleX(0);
	transition: transform .5s ease
}
.post-content a:not(.no-line):hover::before {
	transform-origin: bottom left;
	transform: scaleX(1)
}
.post-content p {
	vertical-align: middle;
}
.post-content .owo-img {
	box-shadow: 0 0 0 #fff;
	-moz-box-shadow: 0 0 0 #fff;
	-webkit-box-shadow: 0 0 0 #fff;
	display: inline;
	height: 34px;
	vertical-align: middle
}
/* >短代码 */
.tip {
	border: 1px solid rgb(240,240,240);
	border-radius: 3px;
	padding: 15px;
	border-left: 5px solid var(--theme-color);
}
.tip-icon {
	color: var(--theme-color);
}
.tip.red {
	border-left-color: #DD4B39;
}
.tip.red .tip-icon {
	color: #DD4B39;
}
.tip.blue {
	border-left-color: #4D90FE;
}
.tip.blue .tip-icon {
	color: #4D90FE;
}
.tip.green {
	border-left-color: #2FBB4F;
}
.tip.green .tip-icon {
	color: #2FBB4F;
}
.tip.yellow {
	border-left-color: #FFDD11;
}
.tip.yellow .tip-icon {
	color: #FFDD11;
}
.post-bubble .saying-content p {
	padding: 0 20px!important;
}
/* >文章分页 */
.post-pagenav,
.comment-pagenav {
	margin-top: 40px;
	margin-bottom: 60px
}
.post-pagenav a {
	font-size: 20px;
	background: var(--theme-color);
	color: #fff;
	padding: 13px 20px;
}
.post-pagenav a,
.comment-pagenav a {
	border-radius: 10000px;
	box-shadow: 0 0 15px #ccc;
	-moz-box-shadow: 0 0 15px #ccc;
	-webkit-box-shadow: 0 0 15px #ccc
}
.post-pagenav a:hover {
	box-shadow: 0 0 15px #ccc;
	-moz-box-shadow: 0 0 15px #ccc;
	-webkit-box-shadow: 0 0 15px #ccc
}
.post-pagenav-left {
	float: left
}
.post-pagenav-right {
	float: right
}
/* -ss */
.post-banner-ss img {
	width: 100%
}
.post-banner-box-ss {
	max-height: 280px;
	overflow: hidden
}
.post-item-content-ss {
	padding: 20px
}
.post-title-ss {
	margin: 12px 0;
	margin-top: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 25px
}
/* > 文章字体大小 */
.body-contentsize-small .post-content,
.body-contentsize-small .comment-content p,
.body-contentsize-small .banner-content,
.body-contentsize-small .footer-info,
.body-contentsize-small .nav-content {
	font-size: 100%;
}
.body-contentsize-normal .post-content,
.body-contentsize-normal .comment-content p,
.body-contentsize-normal .banner-content,
.body-contentsize-normal .footer-info,
.body-contentsize-normal .nav-content {
	font-size: 125%;
}
.body-contentsize-big .post-content,
.body-contentsize-big .comment-content p,
.body-contentsize-big .banner-content,
.body-contentsize-big .footer-info,
.body-contentsize-big .nav-content {
	font-size: 140%;
}
.body-contentsize-large .post-content,
.body-contentsize-large .comment-content p,
.body-contentsize-large .banner-content,
.body-contentsize-large .footer-info,
.body-contentsize-large .nav-content {
	font-size: 160%;
}

/* 关于页面 */
.about-avatar img {
	margin: 0 auto;
	display: block;
	padding: 2px;
	border: 3px solid #ddd;
	border-radius: 100%;
	height: 200px;
	width: 200px;
}
.about-name {
	text-align: center;
	font-size: 35px;
	margin: 20px 0;
	margin-bottom: 0;
}
.about-social {
	text-align: center;
	margin-top: 15px;
}
.about-social a {
	transform: scale(1.2);
	border-radius: 100%;
	padding: 5px 10px;
}
.about-social a:hover {
	background: rgb(246,246,246);
}

/* 标签云 */
.tags-list {
	margin-left: -30px
}

.tags-item a {
	background: rgb(240,240,240);
	border-radius: 80px;
	color: rgb(60,60,60);
	padding: 6px 14px;
	font-size: 15px;
	transition: all .2s;
}
.tags-item a:hover {
	background: rgb(230,230,230);
}
.tags-item {
	position: relative;
	display: inline-block
}
/* 归档列表 */
.archives-list {
	list-style-type: none;
	margin-left: -40px
}
.archives-list a {
	display: block;
	border-radius: 3px;
	transition: background .2s;
	padding: 6px 10px
}
.archives-list a:hover {
	background: #e6e6e6
}
.archives-date {
	color: gray;
	letter-spacing: 0;
}
/* 友链 */
.links-box {
	margin: 10px;
	margin-left: 0;
	margin-top: 30px
}
.links-box h2 {
	text-align: Center;
	border-bottom: 1px solid #e6e6fa;
	padding-bottom: 20px;
	font-weight: 700;
	color: black;
}
.links-link {
	color: black!important;
}
.links-link:hover {
	opacity: 1!important
}
.links-item {
	background: #fff;
	box-shadow: 0 3px 1px #ccc;
	-webkit-box-shadow: 0 1px 3px #ccc;
	-moz-box-shadow: 0 3px 1px #ccc;
	overflow: hidden;
	transition: all .2s!important;
	margin-bottom: 5px;
	border-radius: 3px
}
.links-item:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 28px #ccc;
	-webkit-box-shadow: 0 6px 28px #ccc;
	-moz-box-shadow: 0 6px 28px #ccc;
	transform: translateY(-6px)
}
.link-box a {
	color: #000
}
.links-title {
	text-align: center
}
.links-title h4 {
	font-weight: 700;
	letter-spacing: 2px;
	white-space: nowrap;
	font-size: 15px;
	margin: 14px 0
}
.links-container {
	padding: 6px;
}
.archive-title {
	text-align: center
}
.arvchive-item-excerpt {
	color: gray;
	font-size: 17px;
	margin-top: 0
}
.archive-item-title {
	font-size: 25px;
	margin-bottom: 5px
}
/* 搜索/登录/移动端导航 */
.search,.login,.mobile-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	max-height: 100vh;
	background-color: rgba(255,255,255,0.96);
	transition: all .2s;
	z-index: 1000;
}
.search,.login {
	display: flex;
	align-items: center;
	justify-content: center;
}
.search.ready,
.login.ready,
.mobile-menu.ready {
	bottom: 120vh;
	top: -120vh;
	visibility: hidden;
}
.search-close.ready,
.login-close.ready,
.mobile-menu-close.ready {
	display: none
}
.search-close,
.login-close,
.mobile-menu-close {
	position: fixed;
	top: 20px;
	right: 20px;
	border: none;
	background: 0 0
}
.search-form input,
.login-form input,
.login-form button {
	width: 260px;
}
/* >移动端导航 */
.mobile-menu-pagelist a {
	display: block;
	border-radius: 4px;
	padding: 10px 5px;
	text-align: center;
	transition: all 0.2s;
}
.mobile-menu-pagelist a:hover {
	background: rgb(240,240,240)
}
.mobile-menu-title {
	text-align: center;
	border-bottom: 1px solid rgb(220,220,220);
	padding-bottom: 20px;
}
.mobile-menu-footer {
	position: absolute;
	text-align: center;
	bottom: 10px;
	right: 0;
	left: 0;
	border-top: 1px solid rgb(220,220,220);
	padding-top: 10px;
}
/* >搜索面板 */
.search-form input {
	border: 1px solid #bababa;
	padding: 10px 25px;
	border-radius: 80px
}
.search-form button {
	padding: 10px 15px;
	padding-top: 5px;
	background: rgba(0,0,0,0);
	border: none;
	margin-left: -100px
}
.search-close,
.search-form button,
.search-form input {
	color: gray;
	font-size: 30px;
	outline: 0
}
/* >登录 */
.login-form button,
.login-form input {
	display: block;
	margin: 10px 0;
	padding: 15px 20px;
}
.login-form input {
	border-radius: 5px;
	border: 1px solid #ccc;
}
.login-form button {
	border-radius: 5px;
	border: none;
	color: white;
	background: var(--theme-color);
}
/* >> 提示 Pjax 跳转后需要刷新登录面板 */
.login-form.need-refresh:before {
	content: "因为 Pjax 的原因，登陆之前请先刷新页面，否则会导致登陆失败！";
	background: #DD4B39;
	padding: 18px 5px;
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	color: white;
	text-align: center;
	transition: all .2s;
}

/* 404 error page */
.error-title {
	text-align: center;
	font-size: 100px;
	text-shadow: 0 4px 12px #ccc;
}

/* 悬浮按钮 */
.fixed-button {
	background: #fdfdfd;
	font-size: 16px;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content:center;
	align-items:center;
	border: none;
	border-radius: 10000px;
	box-shadow: 0 1px 5px #bababa;
	-webkit-box-shadow: 0 1px 5px #bababa;
	-moz-box-shadow: 0 1px 5px #bababa;
	position: fixed;
	cursor: pointer;
	outline: 0;
	right: 6px;
	transition: all 0.3s;
}
.fixed-button:hover {
	box-shadow: 0 3px 25px #bababa;
	-webkit-box-shadow: 0 3px 25px #bababa;
	-moz-box-shadow: 0 3px 25px #bababa;
	background: rgb(248,248,248)!important;
}
.gotop-button {
	bottom: 8px;
	background: #fff!important;
	color: rgb(80,80,80)!important;
}

/* 页脚 */
.footer-info {
	background: #f0f0f0;
	color: #000;
	text-align: center;
	margin: 0;
	margin-top: 130px!important;
	padding: 25px 10px;
	line-height: 26px;
	width: 100%;
}
.footer-dark a {
	color: #000
}
.footer-info a {
	color: #1e1e1e;
	text-decoration: none;
	transition: opacity .2s
}
.footer-info a:hover {
	opacity: .9
}
/* Header Meta */
.header-meta a {
	color: #fff;
	text-decoration: none
}
/* 评论 */
.comment-title {
	text-align: center;
	margin: 50px 0;
	font-size: 26px
}
.comment-list,.comment-list li {
	list-style-type: none
}
.comment-list {
	margin-left: 0;
}
.comment-children {
	margin-left: 20px;
}
.comment-children .comment-list {
	margin: 0;
}
.comment-children .comment-body {
	margin: 15px 0;
	padding: 0;
}
.comment-body {
	margin: 28px 0;
	padding: 0;
	position: relative
}
.comment-main,
.comment-author-avatar {
	margin: 0;
	padding: 0;
}
.comment-author-avatar img {
	border-radius: 10000px;
	height: 50px;
	width: 50px
}
.comment-author-info h4,.comment-author-info p {
	margin: 0
}
.comment-author-info h4 {
	font-size: 18px
}
.comment-author-info h4 a {
	color: var(--theme-color)
}
.comment-author-info p {
	margin-top: 5px;
	color: gray;
	font-size: 15px
}
.comment-content p {
	color: #000;
	font-size: 16px;
	word-break: break-all;
	vertical-align: center;
	padding: 10px 16px;
}
.comment-content img {
	max-width: 100%
}
.comment-meta {
	font-size: 17px;
}
.comment-author {
	font-size: 0.8em;
	background: rgb(240,240,240);
	border-radius: 3px;
	padding: 2px 3px;
	letter-spacing: 2px;
	transition: all 0.2s;
}
.comment-author:hover {
	background: rgb(235,235,235);
}
.bubble.comment-content {
	background: rgb(238,238,238);
	padding: 3px 8px;
	padding-right: 12px;
	padding-top: -3px;
	border-radius: 4px;
	min-width: 10px!important;
}
.bubble.comment-content:before {
    border-right-color: rgb(238,238,238);
}
.bubble.comment-content:hover {
	transform: none;
	box-shadow: 0 0 0 #fff;
	-moz-box-shadow: 0 0 0 #fff;
	-webkit-box-shadow: 0 0 0 #fff;
}
.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content {
	background: var(--theme-color)
}
.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content p {
	color: #fff!important;
}
.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content:before {
	border-right-color: var(--theme-color)
}
.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content > .comment-reply a {
	color:#fff!important;
}
.comment-reply a {
	position: absolute;
	top: 5px;
	right: 4px;
	display: inline-block;
	font-size: 90%;
	border-radius: 2px;
	padding: 3px 4px;
	transition: color 0.2s;
	color: rgb(120,120,120);
}
.comment-reply a:hover {
	color: rgb(150,150,150)
}
.comment-submit button {
	display: block;
	margin: 10px 0;
	border-radius: 6px;
	border: none;
	background: linear-gradient(to right,#00f,var(--theme-color));
	color: #fff;
	padding: 16px 10px;
	width: 100%;
	cursor: pointer;
	transition: opacity .2s;
	margin-top: -14px
}
.comment-submit button:hover {
	opacity: .9
}
.comment-input input,.comment-textarea {
	display: block;
	resize: none;
	border: 2px solid #ddd;
	border-radius: 5px;
	width: 100%;
	padding: 14px;
	outline: none;
}
.comment-input {
	margin-top: -10px;
    margin-bottom: -20px;
}
#comment-form label {
	display: none
}
.comment-closed-alert {
	text-align: center;
}
.comment-pagenav {
	margin-left: -20px;
}
.comment-pagenav li {
	list-style-type: none;
	display: inline-block;
}
.comment-pagenav li a {
	background: #fff;
	padding: 5px 13px;
	margin-right: 5px;
	box-shadow: 0 1px 4px #ccc;
	-moz-box-shadow: 0 1px 4px #ccc;
	-webkit-box-shadow: 0 1px 4px #ccc;
	transition: all .2s;
}
.comment-pagenav li a:hover {
	background: rgb(249,249,249);
	box-shadow: 0 1px 8px #ccc;
	-moz-box-shadow: 0 1px 8px #ccc;
	-webkit-box-shadow: 0 1px 8px #ccc;
}
.comment-pagenav-icon {
	margin: 0 -3px;
}

/* OwO */
.owo-img {
	height: 34px;
	vertical-align: middle;
	margin: 0 3px;
}
.OwO {
	margin-left: 15px;
	margin-top: 0;
}
.owo-para {
	margin-top: 0;
}
/* 说说动态 */
.saying-form {
	margin-bottom: 20px;
}
.saying-OwO {
	float: left;
	margin-left: 0
}
.saying-submit {
	float: right;
	background: var(--theme-color);
	border-radius: 5px;
	color: white;
	padding: 10px 20px;
	border: none;
	font-size: 15px;
	cursor: pointer;
}
.saying-content p {
	padding: 10px 20px;
}
.saying-content a {
	color: white;
}
.saying-author,
.saying-meta,
.saying-author a {
	position: absolute;
	color: rgb(250,250,250)!important;
	font-size: 12px;
}
.saying-meta {
	bottom: 3px;
	right: 10px;
}
.saying-author {
	top: 3px;
	left: 20px;
}
.saying-meta i {
	font-size: 12px;
}
/* 气泡 */
.bubble {
    position: relative;
    background: var(--theme-color);
	border-radius: 2px;
	padding: 0;
	color: white;
	display: inline-block;
	min-width: 180px;
	transition: all 0.3s;
}
.bubble:before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 8px;
    border-top: 8px solid transparent;
    border-right: 16px solid var(--theme-color);
    border-bottom: 8px solid transparent;
}
.bubble:hover {
	transform: translateY(-6px);
	box-shadow: 2px 8px 17px #bababa;
}

/* Options Pannel */
.options {
	transition: all 0.3s;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 8px #bababa;
	-moz-box-shadow: 0 1px 8px #bababa;
	-webkit-box-shadow: 0 1px 8px #bababa;
	position: fixed;
	top: 50px;
	right: 0;
	left: 0;
	z-index: 20;
	width: 100%;
}
.options hr {
	border-color: rgb(245,245,245);
	margin: 0;
}
.options.ready {
	display: none;
	top: 40px;
}
.options-content {
	padding: 8px;
	font-size: 15px;
}
.options-content h4 {
	margin: 0;
	margin-bottom: 8px;
}
.options-family {
	text-align: center;
}
.options-family button,
.options-contentsize-button {
	display: block;
	width: 100%;
	border: none;
	background: rgb(254,254,254,0);
	font-size: 20px;
	padding: 8px 0;
	transition: all 0.3s;
	outline: none;
	cursor: pointer;
	border-radius: 3px;
}
.options-contentsize-button {
	font-size: 14px;
}
.options-family button:hover {
	background: rgb(244,244,244,0.96);
}
.options-button-active {
	color: #fff;
	background: var(--theme-color)!important;
}
.options-theme-button.options-button-active {
	border: 2px solid var(-theme-color);
}
.options-themes {
	text-align: center;
	margin-top: 20px;
}
.options-theme-label {
	color: #fff;
	font-size: 12px;
	transition: color 0.3s;
}
.options-theme-item:hover .options-theme-label {
	color: #bababa;
}
.options-theme-button {
	height: 50px;
	width: 50px;
	border-radius: 100%;
	border: none;
	outline: none;
	display: block;
	margin: 0 auto;
	cursor: pointer
}
.options-theme-normal {
	background: rgb(240,240,240);
}
.options-theme-dark {
	background: rgb(80,80,80)
}
.options-theme-sepia {
	background: rgb(255,255,200)
}

/* Pio Plugin */
.pio-container .pio-dialog {
	margin-bottom: -60px;
	border-color: rgba(255,255,255,.9);
	border-radius: 4px;
	text-shadow: 0 0 1px #bababa;
	border: none;
	background: rgba(255,255,255,.9);
	box-shadow: 1px 1px 5px #bababa;
	-moz-box-shadow: 1px 1px 5px #bababa;
	-webkit-box-shadow: 1px 1px 5px #bababa
}
.pio-container {
	display: none
}
/* Bilibili iframe */
iframe[src*="//player.bilibili.com/player.html"] {
	width: 100%;
	height: 150px;
	position: relative
}
/* Live2D */
#live2dcanvas {
	display: none;
	transition: all 0.3s;
}
/* 响应式相关 */
.large-screen {
	display: none
}
.small-screen {
	display: block
}

/* Mobile phone */
@media (max-width:320) {
	.drawer {
		width: 100vw;
	}
}
/* > Pad and up */
@media (min-width:768px) {
	.alert {
		min-width: 300px;
	    max-width: 700px
	}
	.drawer-avatar img {
		height: 220px;
		width: 220px;
	}
	.drawer {
		width: 360px;
	}
	
	.fixed-button {
		height: 60px;
		width: 60px;
	}
	
	.options {
	    width: 300px!important;
		left: auto!important;
		top: 90px;
		right: 10px;
    }

    .options:before {
    	border-right: 8px solid transparent;
        border-top: 16px solid rgb(254,254,254,0.96);
        border-left: 8px solid transparent;
        position: absolute;
        top: 80px;
        right: 40px;
    }

	.comment-content p {
		font-size: 18px;
	}
	
	.nav-content a {
		font-size: 19px;
		padding: 27.5px 8px
	}

	.index-banner {
		text-align: left
	}

	.banner-content h1 {
		font-size: 40px
	}

	.index-content {
		margin: 10px 80px
	}

	.post-title {
		margin: 16px 0;
		margin-bottom: 10px
	}

	.post-excerpt {
		height: 56px
	}

	.large-screen {
		display: block
	}

	.small-screen {
		display: none
	}

	.post-content {
		padding: 36px;
		font-size: 18px;
		line-height: 26px;
		letter-spacing: 2px
	}

	.fixed-button {
		padding: 15px 20px;
		right: 28px
	}

	.gotop-button {
		bottom: 20px
	}

	.options-button {
		bottom: 90px
	}

	.pio-container {
		display: block
	}

	iframe[src*="//player.bilibili.com/player.html"] {
		height: 390px
	}
	.search-form input,
    .login-form input,
    .login-form button	{
		width: 350px;
	}
	.post-list,
    .post-body {
	    margin-top: -130px
    }
	.links-container {
	    padding: 10px;
    }
}
/* Desktop and up */
@media (min-width:992px) {
	.comment-content p {
		font-size: 19px;
	}
	
	.nav-content a {
		font-size: 20px;
		padding: 28px 8px
	}

	.index-banner {
		text-align: left
	}

	.banner-content h1 {
		font-size: 50px
	}

	.index-content {
		margin: 10px 80px
	}

	.comment-children,.comment-children li,.comment-children li>li {
		margin: 5px -40px
	}

	.post-title {
		margin: 30px 0;
		margin-bottom: 25px
	}

	.post-excerpt {
		height: 65px
	}

	.large-screen {
		display: block
	}

	.small-screen {
		display: none
	}

	.post-content {
		padding: 48px;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 2px
	}

	.fixed-button {
		padding: 18px 23px;
		right: 38px
	}

	.gotop-button {
		bottom: 40px
	}

	.options-button {
		bottom: 120px
	}

	.pio-container {
		display: block
	}

	iframe[src*="//player.bilibili.com/player.html"] {
		height: 480px
	}
	
	.search-form input,
    .login-form input,
    .login-form button	{
		width: 400px;
	}
	.post-list,
    .post-body {
	    margin-top: -134px
    }
	.links-container {
	    padding: 12px;
    }
	#live2dcanvas {
		display: block;
		transform: scale(0.8);
	}
}
/* Computer screen and up */
@media (min-width:1200px) {
	.comment-content p {
		font-size: 21px;
	}
	
	.nav-content a {
		font-size: 20px;
		padding: 28px 8px
	}

	.index-banner {
		text-align: left
	}

	.banner-content h1 {
		font-size: 50px
	}

	.index-content {
		margin: 10px 100px
	}

	.comment-children,.comment-children li,.comment-children li>li {
		margin: 15px -35px
	}

	.post-title {
		margin: 30px 0;
		margin-bottom: 25px
	}

	.post-excerpt {
		height: 72px
	}

	.large-screen {
		display: block
	}

	.small-screen {
		display: none
	}

	.post-content {
		padding: 50px;
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 2px
	}
	.fixed-button {
		padding: 18px 23px;
		right: 38px
	}

	.gotop-button {
		bottom: 40px
	}

	.options-button {
		bottom: 120px
	}

	.pio-container {
		display: block
	}

	iframe[src*="//player.bilibili.com/player.html"] {
		height: 550px
	}
	.search-form input,
    .login-form input,
    .login-form button	{
		width: 550px;
	}
	.post-list,
    .post-body {
	    margin-top: -140px
    }
	.links-container {
	    padding: 15px;
    }
	#live2dcanvas {
		transform: scale(1);
	}
}
/* 有 Drawer 时的设置面板 */
.options-with-drawer {
	background: rgb(246,246,246);
	box-shadow: 0 0 0 #fff;
	-moz-box-shadow: 0 0 0 #fff;
	-webkit-box-shadow: 0 0 0 #fff;
	width: 360px!important;
	height: 210px!important;
	top: auto!important;
	right: auto!important;
	bottom: 10vh!important;
	z-index: 40!important;
}