.inline {
	display:inline;
}
.block {
	display:block;
}
.inline-block {
	display:inline-block;
}
.table-holder {
	overflow:auto;
}
.table {
	display:table;
}
.table-cell {
	display:table-cell;
}
.overflow-hidden {
	overflow:hidden;
}
.overflow-scroll {
	overflow:scroll;
}
.overflow-auto {
	overflow:auto;
}
.clearfix:before,.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
.left {
	float:left;
}
.right {
	float:right;
}
.fit {
	max-width:100%;
}
.truncate {
	display:inline-block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.max-width-1 {
	max-width:24rem;
}
.max-width-2 {
	max-width:32rem;
}
.max-width-3 {
	max-width:48rem;
}
.max-width-4 {
	max-width:64rem;
}
.border-box {
	box-sizing:border-box;
}
.m0 {
	margin:0;
}
.mt0 {
	margin-top:0;
}
.mr0 {
	margin-right:0;
}
.mb0 {
	margin-bottom:0;
}
.ml0 {
	margin-left:0;
}
.mx0 {
	margin-left:0;
	margin-right:0;
}
.my0 {
	margin-top:0;
	margin-bottom:0;
}
.m1 {
	margin:0.5rem;
}
.mt1 {
	margin-top:0.5rem;
}
.mr1 {
	margin-right:0.5rem;
}
.mb1 {
	margin-bottom:0.5rem;
}
.ml1 {
	margin-left:0.5rem;
}
.mx1 {
	margin-left:0.5rem;
	margin-right:0.5rem;
}
.my1 {
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}
.m2 {
	margin:1rem;
}
.mt2 {
	margin-top:1rem;
}
.mr2 {
	margin-right:1rem;
}
.mb2 {
	margin-bottom:1rem;
}
.ml2 {
	margin-left:1rem;
}
.mx2 {
	margin-left:1rem;
	margin-right:1rem;
}
.my2 {
	margin-top:1rem;
	margin-bottom:1rem;
}
.m3 {
	margin:2rem;
}
.mt3 {
	margin-top:2rem;
}
.mr3 {
	margin-right:2rem;
}
.mb3 {
	margin-bottom:2rem;
}
.ml3 {
	margin-left:2rem;
}
.mx3 {
	margin-left:2rem;
	margin-right:2rem;
}
.my3 {
	margin-top:2rem;
	margin-bottom:2rem;
}
.m4 {
	margin:4rem;
}
.mt4 {
	margin-top:4rem;
}
.mr4 {
	margin-right:4rem;
}
.mb4 {
	margin-bottom:4rem;
}
.ml4 {
	margin-left:4rem;
}
.mx4 {
	margin-left:4rem;
	margin-right:4rem;
}
.my4 {
	margin-top:4rem;
	margin-bottom:4rem;
}
.mxn1 {
	margin-left:-0.5rem;
	margin-right:-0.5rem;
}
.mxn2 {
	margin-left:-1rem;
	margin-right:-1rem;
}
.mxn3 {
	margin-left:-2rem;
	margin-right:-2rem;
}
.mxn4 {
	margin-left:-4rem;
	margin-right:-4rem;
}
.ml-auto {
	margin-left:auto;
}
.mr-auto {
	margin-right:auto;
}
.mx-auto {
	margin-left:auto;
	margin-right:auto;
}
.p0 {
	padding:0;
}
.pt0 {
	padding-top:0;
}
.pr0 {
	padding-right:0;
}
.pb0 {
	padding-bottom:0;
}
.pl0 {
	padding-left:0;
}
.px0 {
	padding-left:0;
	padding-right:0;
}
.py0 {
	padding-top:0;
	padding-bottom:0;
}
.p1 {
	padding:0.5rem;
}
.pt1 {
	padding-top:0.5rem;
}
.pr1 {
	padding-right:0.5rem;
}
.pb1 {
	padding-bottom:0.5rem;
}
.pl1 {
	padding-left:0.5rem;
}
.py1 {
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
.px1 {
	padding-left:0.5rem;
	padding-right:0.5rem;
}
.p2 {
	padding:1rem;
}
.pt2 {
	padding-top:1rem;
}
.pr2 {
	padding-right:1rem;
}
.pb2 {
	padding-bottom:1rem;
}
.pl2 {
	padding-left:1rem;
}
.py2 {
	padding-top:1rem;
	padding-bottom:1rem;
}
.px2 {
	padding-left:1rem;
	padding-right:1rem;
}
.p3 {
	padding:2rem;
}
.pt3 {
	padding-top:2rem;
}
.pr3 {
	padding-right:2rem;
}
.pb3 {
	padding-bottom:2rem;
}
.pl3 {
	padding-left:2rem;
}
.py3 {
	padding-top:2rem;
	padding-bottom:2rem;
}
.px3 {
	padding-left:2rem;
	padding-right:2rem;
}
.p4 {
	padding:4rem;
}
.pt4 {
	padding-top:4rem;
}
.pr4 {
	padding-right:4rem;
}
.pb4 {
	padding-bottom:4rem;
}
.pl4 {
	padding-left:4rem;
}
.py4 {
	padding-top:4rem;
	padding-bottom:4rem;
}
.px4 {
	padding-left:4rem;
	padding-right:4rem;
}
.content h1,.content .h1 {
	letter-spacing:0.01em;
	font-size:1.5em;
	font-style:normal;
	font-weight:700;
	color:#2bbc8a;
	margin-top:3rem;
	margin-bottom:1rem;
	display:block;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
.content h2,.content .h2 {
	position:relative;
	font-size:1rem;
	font-weight:bold;
	text-transform:none;
	letter-spacing:normal;
	margin-top:2rem;
	margin-bottom:0.5rem;
	color:#eee;
	display:block;
}
.content h3 {
	font-size:0.9rem;
	font-weight:bold;
	text-decoration:underline;
	color:#eee;
}
.content h4,.content h5,.content h6 {
	font-size:0.9rem;
	font-weight:normal;
	color:#ccc;
	border-bottom:1px dashed #ccc;
	display:inline;
	text-decoration:none;
}
.content h3,.content h4,.content h5,.content h6 {
	margin-top:0.9rem;
	margin-bottom:0.5rem;
}
.content hr {
	border:1px dashed #ccc;
}
.content strong {
	font-weight:bold;
}
.content em,.content cite {
	font-style:italic;
}
.content sup,.content sub {
	font-size:0.75em;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
.content sup {
	top:-0.5em;
}
.content sub {
	bottom:-0.2em;
}
.content small {
	font-size:0.85em;
}
.content acronym,.content abbr {
	border-bottom:1px dotted;
}
.content ul,.content ol,.content dl {
	line-height:1.725;
}
.content ul ul,.content ol ul,.content ul ol,.content ol ol {
	margin-top:0;
	margin-bottom:0;
}
.content ol {
	list-style:decimal;
}
.content dt {
	font-weight:bold;
}
.content table {
	width:100%;
	font-size:12px;
	border-collapse:collapse;
	text-align:left;
}
.content th {
	font-size:13px;
	font-weight:bold;
	color:#eee;
	border-bottom:1px dashed #ccc;
	padding:8px 8px;
}
.content td {
	border-bottom:none;
	padding:9px 8px 0px 8px;
	min-width:9em;
}
#posts .each-post h2 {
	display: inline;
	color: #2bbc8a;
	/* text-decoration: underline; */
}
#posts .setting {
	background-image: none;
}
#posts img {
	max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    margin-top: 5px;
}
#posts .moreContainer {
    text-align: center;	
}
#posts .more-btn {
    display: inline-block;
    padding: 0 20px;
    font-size: 14px;
    color: #ccc;
    background: #445561;
    border: #445561;
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;	
    margin-bottom: 0.2rem;
}
*,*:before,*:after {
	box-sizing:border-box;
}
html {
	height:100%;
	border-top:2px solid #c9cacc;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
body {
	color:#c9cacc;
	background-color:#1d1f21;
	font-size:14px;
	font-family:"Menlo","Meslo LG",monospace;
	font-weight:400;
	line-height:1.725;
	text-rendering:geometricPrecision;
	min-height:100%;
	display:flex;
	flex-direction:column;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
.content {
	flex:1;
}
.content p {
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.content pre,.content code {
	-moz-hyphens:manual;
	-ms-hyphens:manual;
	-webkit-hyphens:manual;
	hyphens:manual;
}
.content a {
	text-decoration:none;
	color:#c9cacc;
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:100% 6px;
	background-image:linear-gradient(transparent,transparent 5px,#c9cacc 5px,#c9cacc);
}
.content a:hover {
	background-image:linear-gradient(transparent,transparent 4px,#d480aa 4px,#d480aa);
}
.content a.icon {
	background:none;
}
.content a.icon:hover {
	color:#d480aa;
}
.content h1 a,.content .h1 a,.content h2 a,.content h3 a,.content h4 a,.content h5 a,.content h6 a {
	color:inherit;
	text-decoration:none;
	background:none;
}
.content h1 a:hover,.content .h1 a:hover,.content h2 a:hover,.content h3 a:hover,.content h4 a:hover,.content h5 a:hover,.content h6 a:hover {
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:100% 6px;
	background-image:linear-gradient(transparent,transparent 6px,#d480aa 6px,#d480aa);
}
.content .footnote {
	background-image: none;
}
@media (min-width:540px) {
	.image-wrap {
	flex-direction:row;
	margin-bottom:2rem;
}
.image-wrap .image-block {
	margin-right:2rem;
	flex:1 0 35%;
}
.image-wrap p {
	flex:1 0 65%;
}
}.width {
	width:100%;
	max-width:60rem;
}
@media (max-width:480px) {
	.px3 {
	padding-left:1rem;
	padding-right:1rem;
}
.my4 {
	margin-top:2rem;
	margin-bottom:2rem;
}
}@media (min-width:480px) {
	p{text-align:justify;
}
}#header {
	max-width:710px;
	width:100%;
	margin:0 auto 3rem auto;
}
#header h1,#header .h1 {
	letter-spacing:0.01em;
	font-size:1.5rem;
	line-height:2rem;
	font-style:normal;
	font-weight:700;
	color:#c9cacc;
	margin-top:0;
	margin-bottom:0;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
#header a {
	color:inherit;
	text-decoration:none;
	background:none;
}
#header #logo {
	display:inline-block;
	float:left;
	margin-right:20px;
	width:50px;
	height:50px;
	background-repeat:no-repeat;
	background-size:50px 50px;
	border-radius:5px;
}
#header #nav {
	letter-spacing:0.01em;
	font-size:0.8rem;
	font-style:normal;
	font-weight:200;
	color:#2bbc8a;
	margin-top:5px;
}
#header #nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	line-height:15px;
}
#header #nav ul a {
	margin-right:15px;
	color:color-accent;
}
#header #nav ul a:hover {
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:100% 6px;
	background-image:linear-gradient(transparent,transparent 5px,#2bbc8a 5px,#2bbc8a);
}
#header #nav ul li {
	display:inline-block;
	vertical-align:middle;
	margin-right:15px;
	border-right:1px solid #2bbc8a;
}
#header #nav ul .icon {
	display:none;
}
#header #nav ul li:last-child {
	border-right:0;
	margin-right:0;
}
#header #nav ul li:last-child a {
	margin-right:0;
}
@media screen and (max-width:480px) {
	#header #title {
	padding-top:9px;
	padding-bottom:9px;
}
#header #nav ul a:hover {
	background:none;
}
#header #nav ul li {
	display:none;
	border-right:0;
}
#header #nav ul li.icon {
	display:inline-block;
	position:absolute;
	top:55px;
	right:-1rem;
}
#header #nav ul.responsive li {
	display:block;
}
#header #nav li:not(:first-child) {
	padding-top:1rem;
	padding-left:70px;
	font-size:1rem;
}
}#header-post {
	position:fixed;
	top:2rem;
	right:2rem;
	display:inline-block;
	float:right;
}
#header-post a {
	color:inherit;
	text-decoration:none;
	background:none;
}
#header-post a.icon {
	background:none;
}
#header-post a.icon:hover {
	color:#d480aa;
}
#header-post ol {
	list-style-type:none;
}
#header-post ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:inline-block;
}
#header-post ul li {
	margin-right:15px;
	display:inline-block;
	vertical-align:middle;
}
#header-post ul li:last-child {
	margin-right:0;
}
#header-post #menu-icon {
	float:right;
	margin-left:15px;
}
#header-post #menu-icon:hover {
	color:#2bbc8a;
}
#header-post #menu-icon-tablet {
	float:right;
	margin-left:15px;
}
#header-post #menu-icon-tablet:hover {
	color:#2bbc8a;
}
#header-post #top-icon-tablet {
	margin-left:15px;
	bottom:2rem;
	right:2rem;
	position:fixed;
}
#header-post #top-icon-tablet:hover {
	color:#2bbc8a;
}
#header-post .active {
	color:#2bbc8a;
}
#header-post #menu {
	visibility:hidden;
}
#header-post #nav {
	letter-spacing:0.01em;
	font-size:0.8rem;
	font-style:normal;
	font-weight:200;
	color:#2bbc8a;
}
#header-post #nav ul {
	line-height:15px;
}
#header-post #nav ul a {
	margin-right:15px;
	color:color-accent;
}
#header-post #nav ul a:hover {
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:100% 6px;
	background-image:linear-gradient(transparent,transparent 5px,#2bbc8a 5px,#2bbc8a);
}
#header-post #nav ul li {
	border-right:1px dotted #2bbc8a;
}
#header-post #nav ul li:last-child {
	border-right:0;
	margin-right:0;
}
#header-post #nav ul li:last-child a {
	margin-right:0;
}
#header-post #actions {
	float:right;
	margin-top:2rem;
	width:100%;
	text-align:right;
}
#header-post #actions ul {
	display:block;
}
#header-post #actions .info {
	display:block;
	font-style:italic;
}
#header-post #share {
	clear:both;
	text-align:right;
	padding-top:1rem;
}
#header-post #share li {
	margin:0;
	display:block;
}
/* header toc */
#header-post #toc {
	clear:both;
	padding-top:1rem;
	max-width:20em;
	float:right;
}
#header-post #toc a:hover {
	color:#d480aa;
}
#header-post #toc ul {
	list-style-type:disc;
	padding-left:1.5rem;
	display: block;
}
#header-post #toc li {
	display:list-item;
	list-style-type:circle;
}
#header-post #toc li > ul {
	display: none;
	color: #ccc;
}
#header-post #toc .active > ul {
  display: block;
}
#header-post #toc .active-current > ul {
  display: block;
}
#header-post #toc .active-current > ul > li {
  display: block;
}
#header-post #toc .active > a {
  color: #2bbc8a;
  border-bottom-color: #2bbc8a;  
}
/* footer toc */
#footer-post #toc ul {
	list-style-type:disc;
	padding-left: 2rem;
	display: block;
}
#footer-post #toc li {
	display:list-item;
	list-style-type:circle;
}
#footer-post #toc li > ul {
	display: none;
	color: #ccc;
}
#footer-post #toc .active > ul {
  display: block;
}
#footer-post #toc .active-current > ul {
  display: block;
}
#footer-post #toc .active-current > ul > li {
  display: block;
}
#footer-post #toc .active > a {
  color: #2bbc8a;
  border-bottom-color: #2bbc8a;
}

@media screen and (max-width:500px) {
	#header-post {
	display:none;
}
}@media screen and (max-width:900px) {
	#header-post #menu-icon {
	display:none;
}
#header-post #actions {
	display:none;
}
}@media screen and (max-width:1199px) {
	#header-post #toc {
/* 	display:none; */
}
}@media screen and (min-width:900px) {
	#header-post #menu-icon-tablet {
	display:none !important;
}
#header-post #top-icon-tablet {
	display:none !important;
}
}@media screen and (min-width:1199px) {
	#header-post #actions {
	width:auto;
}
#header-post #actions ul {
	display:inline-block;
	float:right;
}
#header-post #actions .info {
	float:left;
	margin-right:2rem;
	font-style:italic;
	display:inline;
}
}#footer-post {
	bottom:0;
	left:0;
	right:0;
	position:fixed;
	transition:opacity 0.2s;
	width:100%;
	z-index:5000000;
	background:#212326;
	border-top:1px solid #666673;
}
#footer-post a {
	color:inherit;
	text-decoration:none;
	background:none;
}
#footer-post a.icon {
	background:none;
}
#footer-post a.icon:hover {
	color:#d480aa;
}
#footer-post #nav-footer {
	margin-left:1rem;
	margin-right:1rem;
	text-align:center;
}
#footer-post #nav-footer a {
	color:#2bbc8a;
	font-size:1rem;
}
#footer-post #nav-footer a:hover {
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:100% 6px;
	background-image:linear-gradient(transparent,transparent 5px,#2bbc8a 5px,#2bbc8a);
}
#footer-post #nav-footer ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:table;
	width:100%;
}
#footer-post #nav-footer ul li {
	display:inline-table;
	width:20%;
	padding:10px;
	vertical-align:middle;
}
#footer-post #actions-footer {
	text-align:center;
	margin-top:1rem;
	margin-bottom:1rem;
	width:100%;
}
#footer-post #actions-footer a {
	color:#2bbc8a;
}
#footer-post #actions-footer ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:table;
	width:100%;
}
#footer-post #actions-footer ul li {
	display:table-cell;
	vertical-align:middle;
}
#footer-post #share-footer {
	margin-left:1rem;
	margin-right:1rem;
	text-align:center;
}
#footer-post #share-footer ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:table;
	width:100%;
}
#footer-post #share-footer ul li {
	display:inline-table;
	width:20%;
	padding:10px;
	vertical-align:middle;
}
#footer-post #toc-footer {
	clear:both;
	text-align:left;
	padding-top:1rem;
}
#footer-post #toc-footer ol {
	list-style-type:none;
	padding-left:20px;
}
#footer-post #toc-footer ol li {
	line-height:30px;
}
#footer-post #toc-footer a:hover {
	color:#d480aa;
}
#footer-post #toc-footer .toc-level-1 > .toc-link {
	display:none;
}
#footer-post #toc-footer .toc-level-2 {
	font-size:0.8rem;
	color:#c9cacc;
}
#footer-post #toc-footer .toc-level-2:before {
	content:"#";
	color:#2bbc8a;
}
#footer-post #toc-footer .toc-level-3 {
	font-size:0.7rem;
	color:#b3b3b3;
	color:#666;
	line-height:15px;
}
#footer-post #toc-footer .toc-level-4 {
	display:none;
}
#footer-post #toc-footer .toc-level-5 {
	display:none;
}
#footer-post #toc-footer .toc-level-6 {
	display:none;
}
#footer-post #toc-footer .toc-number {
	display:none;
}
@media screen and (min-width:500px) {
	#footer-post-container {
	display:none;
}
}#sociallinks {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
}
#sociallinks li {
	display:inline-block;
}
#sociallinks li:after {
	content:",";
}
#sociallinks li:last-child:after {
	content:"";
}
#sociallinks li:nth-last-child(2):after {
	content:" and ";
}
.post-list {
	padding:0;
}
.post-list .post-item {
	list-style-type:none;
	margin-left:0;
	margin-bottom:1rem;
}
.post-list .post-item .meta {
	display:block;
	font-size:14px;
	color:#666;
	min-width:100px;
	margin-right:16px;
}
@media (min-width:480px) {
	.post-list .post-item {
	display:flex;
	margin-bottom:5px;
}
.post-list .post-item .meta {
	text-align:left;
}
}.post-nav {
	display:table;
	margin-top:60px;
	width:100%;
	border-top:1px solid #2a2e2e;
}
.post-nav-divider {
	display:table-cell;
	width:10%;
}
.post-nav-item {
	display:table-cell;
	padding:10px 0 0 0;
	width:45%;
	vertical-align:top;
}
.post-nav-item a {
	position:relative;
	display:block;
	line-height:25px;
	font-size:14px;
	background-image:none;
}
.post-nav-item a:hover {
	color:#ebeef2;
	linear-gradient(transparent,transparent 4px,#d480aa 4px,#d480aa):darkcyan;
}
.post-nav-item a:active {
	top:2px;
}
.post-nav-item .fa {
	position:absolute;
	top:8px;
	left:0;
	font-size:12px;
}
.post-nav-next a {
	padding-left:15px;
}
.post-nav-prev {
	text-align:right;
}
.post-nav-prev a {
	padding-right:15px;
}
.post-nav-prev .fa {
	right:0;
	left:auto;
}
.project-list {
	padding:0;
	list-style:none;
}
.project-list .project-item {
	margin-bottom:5px;
}
article .setting {
	background-image: none;
}
article header .posttitle {
	margin-top:0;
	margin-bottom:0;
	text-transform:none;
	font-size:1.5em;
	line-height:1.25;
}
article header .meta {
	margin-top:0;
	margin-bottom:1rem;
}
article header .meta * {
	color:#ccc;
	font-size:0.85rem;
}
article header .author {
	text-transform:uppercase;
	letter-spacing:0.01em;
	font-weight:700;
}
article header .postdate {
	display:inline;
}
article .content h2:before {
	content:"#";
	color:#2bbc8a;
	position:absolute;
	left:-1rem;
	top:-4px;
	font-size:1.2rem;
	font-weight:bold;
}
article .content img,article .content video {
	max-width:100%;
	height:auto;
	display:block;
	margin:auto;
	margin-top:5px;
	background-color: white;
}
article .content .video-container {
	position:relative;
	padding-top:56.25%;
	height:0;
	overflow:hidden;
}
article .content .video-container iframe,article .content .video-container object,article .content .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin-top:0;
}
article .content blockquote {
	background:inherit;
	color:#ccffb6;
	border-left:0px solid #ccc;
	margin:1rem 10px;
	padding:0.5em 10px;
	quotes:"\201C" "\201D" "\2018" "\2019";
}
article .content blockquote p {
	margin:0;
}
article .content blockquote:before {
	color:#ccffb6;
	content:"\201C";
	font-size:2em;
	line-height:0.1em;
	margin-right:0.25em;
	vertical-align:-0.4em;
}
article .content blockquote footer {
	color:#666;
	font-size:11px;
	margin:line-height 0;
}
article .content blockquote footer a {
	color:#666;
	background-image:linear-gradient(transparent,transparent 5px,#666 5px,#666);
}
article .content blockquote footer a:hover {
	color:#999;
	background-image:linear-gradient(transparent,transparent 4px,#999 4px,#999);
}
article .content blockquote footer cite:before {
	content: "—";
	padding:0 0.5em;
}
article .content .pullquote {
	text-align:left;
	width:45%;
	margin:0;
}
article .content .pullquote.left {
	margin-left:0.5em;
	margin-right:1em;
}
article .content .pullquote.right {
	margin-right:0.5em;
	margin-left:1em;
}
article .content .caption {
	color:color-grey;
	display:block;
	font-size:0.9em;
	margin-top:0.5em;
	position:relative;
	text-align:center;
}
.posttitle {
	text-transform:none;
	font-size:1.5em;
	line-height:1.25;
}
.article-tag .label:before {
	content:"#";
}
@media (min-width:480px) {
	.article-tag {
	display:inline;
}
.article-tag:before {
	content:"|";
}
}#archive .post-list {
	padding:0;
}
#archive .post-list .post-item {
	list-style-type:none;
	margin-left:0;
	margin-bottom:1rem;
}
#archive .post-list .post-item .meta {
	display:block;
	font-size:14px;
	color:#666;
	min-width:100px;
	margin-right:16px;
}
@media (min-width:480px) {
	#archive .post-list .post-item {
	display:flex;
	margin-left:1rem;
	margin-bottom:5px;
}
#archive .post-list .post-item .meta {
	text-align:left;
}
}.blog-post-comments {
	margin-top:4rem;
}
#footer {
	padding-top:10px;
	padding-bottom:10px;
	color:#666;
	font-size:11px;
	max-width:700px;
	width:100%;
	margin:0 auto 1rem auto;
	vertical-align:top;
	text-align:center;
}
#footer ul {
	margin:0;
	padding:0;
	list-style:none;
}
#footer li {
	display:inline-block;
	vertical-align:middle;
	margin-right:15px;
	border-right:1px solid #4a4a4a;
}
#footer li a {
	margin-right:15px;
}
#footer li:last-child {
	border-right:0;
	margin-right:0;
}
#footer li:last-child a {
	margin-right:0;
}
#footer a {
	color:#666;
}
#footer a:hover {
	color:#999;
}
#footer .footer-left {
	height:20px;
	line-height:20px;
	vertical-align:middle;
}
@media (min-width:39rem) {
	#footer {
	padding-top:20px;
	padding-bottom:20px;
}
#footer .footer-left {
	float:left;
}
#footer .footer-right {
	float:right;
}
}.pagination {
	display:inline-block;
	margin-top:2rem;
	text-align:center;
	width:100%;
}
.pagination .page-number {
	color:#c9cacc;
	font-size:0.8rem;
}
.pagination a {
	color:#c9cacc;
	padding:4px 6px;
	text-decoration:none;
	border-radius:5px;
	background-color:#2bbc8a;
	background-image:none;
}
.pagination a:hover {
	background-image:none;
}
.pagination a:hover:not(.active) {
	color:#eee;
}
.highlight {
	color:#d1d9e1;
	background:#474949;
}
.highlight .code .comment,.highlight .code .quote {
	color:#969896;
	font-style:italic;
}
.highlight .code .keyword,.highlight .code .selector-tag,.highlight .code .literal,.highlight .code .type,.highlight .code .addition {
	color:#c9c;
}
.highlight .code .number,.highlight .code .selector-attr,.highlight .code .selector-pseudo {
	color:#f99157;
}
.highlight .code .string,.highlight .code .doctag,.highlight .code .regexp {
	color:#8abeb7;
}
.highlight .code .title,.highlight .code .name,.highlight .code .section,.highlight .code .built_in {
	color:#b5bd68;
}
.highlight .code .variable,.highlight .code .template-variable,.highlight .code .selector-id,.highlight .code .class .title {
	color:#fc6;
}
.highlight .code .section,.highlight .code .name,.highlight .code .strong {
	font-weight:bold;
}
.highlight .code .symbol,.highlight .code .bullet,.highlight .code .subst,.highlight .code .meta,.highlight .code .link {
	color:#f99157;
}
.highlight .code .deletion {
	color:#dc322f;
}
.highlight .code .formula {
	background:#eee8d5;
}
.highlight .code .attr,.highlight .code .attribute {
	color:#81a2be;
}
.highlight .code .emphasis {
	font-style:italic;
}
pre {
	font-family:"Menlo","Meslo LG",monospace;
	font-size:13px;
	padding:10px 15px;
	padding-bottom:0;
	line-height:22px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px dotted #666;
	overflow-x:auto;
}
code {
	-webkit-border-radius:2px;
	border-radius:2px;
	padding:0 5px;
	background-color:darkslategrey;
}
pre code {
	border:none;
	/* display: inline-block; */
	 padding:0; 
}
.highlight {
	font-family:"Menlo","Meslo LG",monospace;
	background:#212326;
	-webkit-border-radius:4px;
	border-radius:4px;
	padding:10px 15px;
	overflow-x:auto;
	margin:1rem 0 1rem 0;
}
.highlight figcaption {
	zoom:1;
	margin:-5px 0 5px;
	font-size:0.9em;
	color:#999;
}
.highlight figcaption a {
	float:right;
}
.highlight figcaption:before,.highlight figcaption content:"" {
	display:table;
}
.highlight figcaption:after {
	clear:both;
}
.highlight pre {
	padding:0;
	border:none;
	background:none;
}
.highlight table {
	width:auto;
}
.highlight td.gutter {
	text-align:right;
	padding-right:20px;
	display:none;
}
.fancybox-close,.fancybox-close:hover {
	border:none;
}
#rewardButton {
	cursor:pointer;
	border:0;
	outline:0;
	border-radius:100%;
	padding:0;
	margin:0;
	letter-spacing:normal;
	text-transform:none;
	text-indent:0px;
	text-shadow:none;
}
#rewardButton span {
	display:inline-block;
	width:80px;
	height:25px;
	border-radius:0.5rem;
	color:#fff;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	font-stretch:normal;
	font-size:18px;
	font-family:"Microsoft Yahei";
	background:#2bbc8a;
}
#rewardButton span:hover {
	background:#f7877f;
}
#QR {
	padding-top:20px;
}
#QR a {
	border:0;
	background-image:none;
}
#QR img {
	width:180px;
	max-width:100%;
	display:inline-block;
	margin:0.8em 2em 0 2em;
}
#wechat:hover p {
	animation:roll 0.1s infinite linear;
	-webkit-animation:roll 0.1s infinite linear;
	-moz-animation:roll 0.1s infinite linear;
}
#alipay:hover p {
	animation:roll 0.1s infinite linear;
	-webkit-animation:roll 0.1s infinite linear;
	-moz-animation:roll 0.1s infinite linear;
}
/* ==========================
   Search Box
   ========================== */

.searchTerm:focus {
	width:175px;
	background-color:#fff;
	color:#000;
	opacity:1;
	-webkit-box-shadow:1px 1px 9px rgba(0,0,0,0.85);
	-moz-box-shadow:1px 1px 9px rgba(0,0,0,0.85);
	box-shadow:1px 1px 9px rgba(0,0,0,0.85);
	font-weight:800;
}
.searchTerm {
	padding:5px 10px;
	background:#ccc;
	color:#444;
	border:0;
	width:150px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
	-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
	box-shadow:1px 1px 5px rgba(0,0,0,0.65);
	outline:0;
}
.searchBtn {
	border:0;
	width:38px;
	cursor:pointer;
	margin:2px -38PX;
	border-left:2px solid skyblue;
	height:1.8rem;
	font-weight:900;
	font-size:12px;
	background-color:#f6f5ef;
	color:#009F8A;
	-webkit-border-radius:0px 5px 5px 0px;
	border-radius:0px 5px 5px 0px;
}
/* ==========================
   tooltip/hover popup
   ========================== */

.suggestionBox {
	display:none;
	background-color:white;
	color:#3b3835;
	border:1px solid rgba(0,0,0,0.3);
	border-top:0;
	float:left;
	left:0;
	list-style:none;
	margin:20px;
	padding:8px;
	position:absolute;
	top:31px;
	width:180px;
	z-index:1000;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
	box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.suggestionBox:before {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #fff;
	position:absolute;
	top:-7px;
	left:9px;
}
.searchForm:nth-child(2) {
	background-color:#fff;
}
.searchForm:nth-child(2) .suggestionBox {
	background:skyblue;
	color:white;
}
.searchForm:nth-child(2) .suggestionBox::before {
	border-bottom:7px solid skyblue;
}
.searchForm:nth-child(3) {
	background-color:gray;
}
.searchForm:nth-child(3) .suggestionBox {
	background:beige;
	color:black;
}
searchForm:nth-child(3) .suggestionBox::before {
	border-bottom:7px solid beige;
}
.searchForm:nth-child(4) {
	background-color:#333;
}
.searchForm:nth-child(4) .suggestionBox {
	background:#859ce6;
	color:white;
}
.searchForm:nth-child(4) .suggestionBox::before {
	border-bottom:7px solid #859ce6;
}