/* Created By Weil Jimmer
 * blog 頁面的樣式（templates/layouts/blog.html）。
 * 來源是舊站的 web_obj/css/blog_style.css，加上舊 web_blog/header.php、show_*.php 裡的 inline style：
 * CSP 不允許 inline style，所以全部搬到這裡。文章本文裡的 style 屬性另外由 CSP 放行（style-src-attr）。
 * 舊站靠 Blazy（JavaScript）把圖片從半透明縮小的狀態變正常；新版用瀏覽器原生的 lazy loading，圖片一開始就是正常樣式。
 */

/* 選單的字體。舊站從 Google Fonts 載入；CSP 不允許外部字型，所以同一個字型檔（Apache 2.0，
 * 授權見 static/fonts/calligraffitti/LICENSE.txt）放在自己的靜態檔主機上。 */
@font-face {
	font-family: Calligraffitti;
	src: url('../fonts/calligraffitti/Calligraffitti-Regular.ttf') format('truetype');
	font-display: swap;
}

hr {
	width: 95%;
	border: 1px solid #cccccc;
}
a {
	color: #00f1ff;
	text-decoration: none;
}
a:visited {
	color: #0096FF;
}
a:hover {
	color: #02ff00;
}
p, li {
	padding: 0 20px;
	text-align: left;
	color: #c1d8d9;
	line-height: 160%;
	font-family: Noto Sans TC Medium, Times New Roman, Microsoft JhengHei, serif;
}
.text_indent {
	text-indent: 2em;
}
.red_text {
	text-shadow: 1px 1px 1px #DC0408;
}
.permalink {
	width: 100%;
	border: 0 solid #C5E2FF;
	outline: 0;
	box-shadow: inset 0 1px 6px #CBF1DB;
	background: none;
	background-color: rgba(0, 0, 0, 0);
	text-shadow: 1px 1px 1px #CBF1DB;
	color: #BDFFFF;
}
img {
	max-width: 95%;
	overflow: hidden;
	margin: 10px;
	border: 0;
}
.invert {
	filter: invert(1);
}
pre {
	white-space: pre-wrap;
	overflow: auto;
}
.sub_title {
	font-size: 1.2em;
	margin-left: 25px;
	padding-left: 0;
}
.time_style {
	display: inline-block;
	font-size: 10pt;
	text-shadow: 0 0 5px #ccc;
	color: #ccc;
	text-align: left;
	margin-right: 25px;
}
.comment_count {
	display: inline-block;
	font-size: 10pt;
}
h2 {
	font-size: 1.8em;
	margin-top: 10px;
	margin-bottom: 10px;
}
h2, h3, h4, h5 {
	text-shadow: 1px 1px 20px rgba(0,200,240,0.8);
	text-align: left;
	padding: 0 20px;
	font-family: Georgia, Microsoft JhengHei, serif;
	animation: tilt-shaking 1s linear infinite;
	transition: all 1s;
}
h1 {
	text-align: left;
	margin: 0;
}
h2:hover, h3:hover, h4:hover, h5:hover {
	text-shadow: 0 0 22px #f00;
}
.scale12 {
	transition: all 1s;
}
.scale12:hover {
	scale: 1.1;
	text-shadow: 0 0 22px #f00;
}
@keyframes tilt-shaking {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(0.1deg); }
	10% { transform: rotate(0deg); }
	15% { transform: rotate(-0.1deg); }
	20% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}
#main_area h3, #main_area h4, #main_area h5 {
	margin-left: 20px;
	padding-left: 0;
}
#main1 h3::before, #main1 h4::before, #main1 h5::before {
	content: "§";
	margin-right: 8px;
}
#main_area h3 {
	font-size: 1.6em;
}
#main_area h4 {
	font-size: 1.4em;
}
#main_area h5 {
	font-size: 1.2em;
}
body {
	background-color: #060b12;
	color: silver;
	margin: 0;
}
iframe {
	max-width: 100%;
}
@keyframes hueRotate {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}
body::after {
	content: "";
	position: fixed;
	z-index: -9999;
	background: url('../images/back8.webp') repeat repeat;
	background-size: cover;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: flicker 10s infinite;
	transform-origin: 50% 50%;
}
@keyframes flicker {
	0% { filter: brightness(100%); }
	45% { filter: brightness(100%); }
	50% { filter: brightness(150%); }
	55% { filter: brightness(100%); }
	100% { filter: brightness(100%); }
}
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 1em;
}
::-webkit-scrollbar-thumb {
	background-color: #B80000;
	outline: 1px solid #2E002B;
	box-shadow: inset 0 0 6px #000000;
	border-radius: 10px;
	border: 2px solid #010057;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: #000000;
	box-shadow: inset 0 0 8px #2E002B;
}
::selection {
	background-color: #680057;
	color: #deef00;
}

/* 舊 header.php 的 left_black、right_black */
.side_shade {
	position: fixed;
	top: 0;
	width: 10%;
	height: 100vh;
	pointer-events: none;
}
.side_shade_left {
	left: 0;
	background: linear-gradient(90deg, rgba(32,40,40,0.7), rgba(0,0,0,0));
}
.side_shade_right {
	right: 0;
	background: linear-gradient(270deg, rgba(32,40,40,0.7), rgba(0,0,0,0));
}

#main_show_area {
	width: 1200px;
	margin: auto;
}
#header_area {
	width: 100%;
	height: 290px;
	margin-bottom: 0;
	background: url('../images/header_background3.webp');
	animation: hueRotate 10s linear infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
/* logo 用一般 img 的 10px 外距（同舊站），選單的位置是照這個高度排的 */
.blog_logo_row {
	text-align: left;
}
.blog_logo {
	height: 60px;
	width: 354px;
}
/* 舊站的選單是 <input type="button" onClick=...>；新版是一般的連結，樣式照舊 */
#menu_div {
	width: 100%;
	height: 40px;
	margin-top: 128px;
	text-align: center;
	background: url('../images/link_back.png');
}
.header_css,
.header_css:visited {
	display: inline-block;
	/* 舊站是 <input type=button>，瀏覽器預設 border-box：90px 已經包含左右 padding */
	box-sizing: border-box;
	text-align: center;
	width: 90px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: Calligraffitti, cursive;
	height: 30px;
	line-height: 30px;
	padding: 0 9px;
	color: rgba(255,255,255,0.8);
	text-shadow: 1px 1px 1px #5079A3;
	font-size: 12pt;
	transition: all 1s;
	border-radius: 40%;
}
.header_css:hover {
	color: rgba(168,168,3,1);
	font-weight: bold;
	box-shadow: 0 0 2px #fff;
	background: rgba(64,128,128,0.4);
	scale: 1.2;
}

table {
	table-layout: auto;
	word-wrap: break-word;
	word-break: break-word;
}
.table_css {
	position: relative;
	background-color: rgba(0,0,0,0.4);
	margin: 10px auto 0;
	padding: 0;
	width: 100%;
	text-align: left;
	border: 1px solid #ccc;
	border-radius: 13px;
	word-wrap: break-word;
}
.table_css table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
@keyframes hueRotateShadow {
	from { filter: hue-rotate(0deg); }
	to { filter: hue-rotate(360deg); }
}
.table_css::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 0 15px rgb(40 106 255);
	animation: hueRotateShadow 10s linear infinite;
	border-radius: 13px;
	z-index: -1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

#main_area {
	float: left;
	width: 900px;
}
.post_heading {
	overflow: hidden;
}
/* 舊站文章裡的圖片帶 class="b-lazy"：維持置中的版面，但不再需要 JavaScript 把它變清楚 */
.b-lazy {
	display: block;
	margin: auto;
}
.page_button {
	display: block;
	margin: 10px auto;
	text-align: center;
}
.page_button a {
	word-break: keep-all;
	border: solid 1px rgba(255,255,255,0.4);
	background-color: rgba(20,20,20,0.85);
	padding: 4px 8px;
	line-height: 40px;
	font-size: 10pt;
}
.page_button a:hover {
	border: solid 1px rgba(255,255,255,1);
}
/* 搜尋的頁碼是 POST 表單的按鈕，外觀和一般頁碼連結一樣 */
.page_form {
	display: inline;
}
.page_form button {
	word-break: keep-all;
	border: solid 1px rgba(255,255,255,0.4);
	background-color: rgba(20,20,20,0.85);
	color: #00f1ff;
	padding: 4px 8px;
	line-height: 20px;
	font-size: 10pt;
	font-family: inherit;
	cursor: pointer;
}
.page_form button:hover {
	border: solid 1px rgba(255,255,255,1);
	color: #02ff00;
}
.page_button span {
	background-color: rgba(0,19,77,0.1);
	padding: 4px 5px;
	font-size: 13pt;
	font-weight: bold;
	color: #FF0000;
}

.author_box {
	display: flex;
	align-items: flex-start;
}
.author_avatar {
	flex: none;
}
/* 一則留言。不叫 .comment：Prism 的註解是 <span class="token comment">，會吃到這條變成一塊、多出空行（2026-10-29） */
.comment_item {
	display: flex;
	align-items: flex-start;
}
.comment_avatar {
	flex: none;
	width: 100px;
}
.comment_body {
	flex: 1;
	min-width: 0;
}
.msg_style {
	color: #95d7db;
	margin-left: 20px;
}
/* 留言存的是純文字，換行靠這裡顯示（舊站是把換行換成 <br>） */
.comment_content {
	white-space: pre-line;
	overflow-wrap: anywhere;
	padding-right: 20px;
}
.comment_private .comment_content {
	font-style: italic;
}
.verified_icon {
	vertical-align: text-bottom;
	margin: 0 0 0 5px;
	width: 1em;
	height: 1em;
}

#sider_area {
	float: right;
	width: 230px;
	padding-right: 40px;
}
.sider_bar {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
/* 舊站表單用的樣式（搜尋框、之後的留言表單） */
.style1 {
	color: #00FF00;
	background-color: rgba(0,0,0,0.3);
	font-family: monospace;
	font-size: 15pt;
	margin: 0 0 0 5px;
}
.style2 {
	width: 100%;
	height: 50px;
	color: #00FF00;
	background-color: rgba(0,0,0,0.3);
	font-family: monospace;
	font-size: 15pt;
	margin: 5px 5px 0 0;
}
.text_input {
	color: rgba(255,255,255,0.7);
	width: 95%;
	border: 1px solid #C5E2FF;
	background: rgba(255,255,255,0);
	outline: 0;
	font: 200 12px/25px monospace;
	height: 30px;
	line-height: 15px;
	margin: 2px 6px 16px 6px;
}
/* 留言表單（舊站寫在 show_article.php 的 inline style） */
.comment_form_section {
	padding-bottom: 10px;
}
.form_field {
	width: 95%;
	box-sizing: border-box;
}
.comment_textarea {
	height: 120px;
	resize: vertical;
}
.privacy_option {
	white-space: nowrap;
	margin-right: 12px;
}
.privacy_option input {
	height: 20px;
	width: 20px;
	vertical-align: middle;
	margin: 7px;
}
.recaptcha_box {
	margin: 24px;
}
.required {
	color: red;
}
.comment_notice {
	color: #FFFF00;
	font-weight: bold;
}
/* 留言送出的結果（static/js/blog_comment.js 填入）：成功的字同上面的提示，失敗是紅字 */
.comment_result {
	min-height: 1.6em;
	font-weight: bold;
}
.comment_result_ok {
	color: #FFFF00;
}
.comment_result_error {
	color: #FF4D4D;
}
.own_private_notice {
	color: red;
	font-weight: bold;
}
.search_box {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}
.journey {
	text-align: center;
	font-size: 10pt;
}
.journey_days {
	color: #cee;
	font-size: 40pt;
	font-family: Georgia, Tahoma, Geneva, sans-serif;
	animation: 10s linear infinite hueRotateShadow;
}
/* 側欄「Note」最後那一句：春節、端午、中秋用黃字（舊站的 style="color:yellow"） */
.note_festival {
	color: yellow;
}
/* 側欄「Words Quiz」：按「看答案」後框起對的選項（舊站的 1px dotted #FF0） */
.words_quiz_answer {
	border: 1px dotted #FF0;
}
/* 側欄「Life Counter」的沙漏（/static/js/blog_sidebar.js 依時間算沙的形狀、畫落下的沙粒） */
.life_counter {
	text-align: center;
}
.hourglass {
	display: block;
	width: 120px;
	height: 200px;
	margin: 10px auto 0;
	overflow: visible;
}
.hourglass_glass {
	fill: url(#hourglass_glass_color);
}
.hourglass_outline {
	fill: none;
	stroke: #cee;
	stroke-width: 2;
	filter: drop-shadow(0 0 4px rgb(40 106 255));
	animation: 10s linear infinite hueRotateShadow;
}
/* 沙（連同沙粒、百分比的字）跟著主題一起轉色：和外框、標題用同一個 10 秒的 hueRotateShadow，頁面載入時一起開始，所以同步 */
.hourglass_sand_layer {
	animation: 10s linear infinite hueRotateShadow;
}
.hourglass_sand {
	fill: url(#hourglass_sand_color);
}
.hourglass_grain {
	fill: #ffe2a0;
}
.hourglass_stream {
	stroke: #f3c46b;
	stroke-width: 1.2;
	stroke-dasharray: 2 3;
	opacity: 0.7;
	animation: hourglass_fall 0.4s linear infinite;
}
.hourglass_stream_done {
	display: none;
}
@keyframes hourglass_fall {
	from { stroke-dashoffset: 5; }
	to { stroke-dashoffset: 0; }
}
.hourglass_cap {
	fill: #3a1d4e;
	stroke: #cee;
	stroke-width: 1.5;
}
.hourglass_post {
	stroke: #cee;
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0.6;
}
.life_percent {
	color: #f3c46b;
	display: block;
	font-size: 15pt;
	margin: 8px 0 4px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* 側欄「Music」的播放器（舊站的 web_obj/css/player.css，選擇器限定在 #audio_player 裡） */
#audio_player {
	display: block;
	width: 90%;
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	padding: 2px 5px;
	margin: 30px auto 0;
	background-color: black;
	border: 2px solid darkgreen;
	border-radius: 9px;
}
#audio_player .progress_box {
	position: relative;
}
#audio_player .progress_label {
	position: absolute;
	left: 15px;
	top: 3px;
	overflow: hidden;
	white-space: nowrap;
	max-width: 85%;
	font-size: 0.8em;
	color: #00FFFF;
	pointer-events: none;
}
#audio_player progress {
	width: 100%;
	height: 20px;
	border: none;
	margin-right: 10px;
	color: #00FFFF;
	font-size: 12px;
	background: #646464;
	border-radius: 9px;
	cursor: pointer;
}
#audio_player progress::-moz-progress-bar {
	background: #008000;
	border-radius: 9px;
}
#audio_player progress[value]::-webkit-progress-bar {
	background-color: #646464;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
#audio_player progress[value]::-webkit-progress-value {
	background-color: #008000;
}
#audio_player .player_button {
	text-indent: -9999px;
	overflow: hidden;
	outline: 0;
	width: 16px;
	height: 18px;
	border: none;
	cursor: pointer;
	background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
}
#audio_player .pause { background-position: -19px 0; }
#audio_player .stop { background-position: -38px 0; }
#audio_player .mute { background-position: -95px 0; }
#audio_player .unmute { background-position: -114px 0; }
#audio_player input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	float: right;
	width: 90px;
	height: 10px;
	margin: 6.8px 25px 0 0;
	background-color: black;
	vertical-align: middle;
}
#audio_player input[type=range]:focus {
	outline: none;
}
#audio_player input[type=range]::-webkit-slider-runnable-track {
	height: 4.4px;
	cursor: pointer;
	box-shadow: 0.9px 0.9px 1.7px #002200, 0 0 0.9px #003c00;
	background: #205928;
	border-radius: 1px;
	border: 1.1px solid #18d501;
}
#audio_player input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-shadow: 2.6px 2.6px 3.7px #00aa00, 0 0 2.6px #00c300;
	border: 2.5px solid #83e584;
	height: 18px;
	width: 9px;
	border-radius: 3px;
	background: #439643;
	cursor: pointer;
	margin-top: -7.9px;
}
#audio_player input[type=range]::-moz-range-track {
	height: 4.4px;
	cursor: pointer;
	box-shadow: 0.9px 0.9px 1.7px #002200, 0 0 0.9px #003c00;
	background: #205928;
	border-radius: 1px;
	border: 1.1px solid #18d501;
}
#audio_player input[type=range]::-moz-range-thumb {
	box-shadow: 2.6px 2.6px 3.7px #00aa00, 0 0 2.6px #00c300;
	border: 2.5px solid #83e584;
	height: 18px;
	width: 9px;
	border-radius: 3px;
	background: #439643;
	cursor: pointer;
}
/* 側欄「Visitor Count」（站點資料 sider_data.txt 裡的 HTML 用的） */
.visitor_counter_image {
	display: block;
	width: 160px;
	height: 200px;
	margin: 0 auto;
}
/* 「Looking for Detail」：平常看不見，滑鼠移過去才出現（舊站用 onmousemove 改字的顏色） */
.visitor_detail {
	margin-top: 20px;
	padding-left: 20px;
}
.visitor_detail a {
	color: transparent;
}
.visitor_detail:hover a,
.visitor_detail a:focus {
	color: #0000FF;
}
/* 文章底下的分享按鈕（舊站的 web_obj/css/share_button.css，只留用到的七種） */
.share_buttons {
	padding: 0 10px 10px 10px;
}
.resp-sharing-button__link,
.resp-sharing-button__icon {
	display: inline-block;
}
.resp-sharing-button__link {
	text-decoration: none;
	color: #fff;
	margin: 0.5em;
}
.resp-sharing-button {
	display: inline-block;
	border-radius: 5px;
	transition: 25ms ease-out;
	padding: 0.5em 0.75em;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.resp-sharing-button__icon {
	fill: #fff;
	stroke: none;
}
.resp-sharing-button__icon svg {
	width: 2em;
	height: 1em;
	margin: 0;
	vertical-align: middle;
}
.resp-sharing-button--telegram { background-color: #54A9EB; }
.resp-sharing-button--telegram:hover { background-color: #4B97D1; }
.resp-sharing-button--facebook { background-color: #3b5998; }
.resp-sharing-button--facebook:hover { background-color: #2d4373; }
.resp-sharing-button--twitter { background-color: #55acee; }
.resp-sharing-button--twitter:hover { background-color: #2795e9; }
.resp-sharing-button--tumblr { background-color: #35465C; }
.resp-sharing-button--tumblr:hover { background-color: #222d3c; }
.resp-sharing-button--email { background-color: #777; }
.resp-sharing-button--email:hover { background-color: #5e5e5e; }
.resp-sharing-button--pinterest { background-color: #bd081c; }
.resp-sharing-button--pinterest:hover { background-color: #8c0615; }
.resp-sharing-button--linkedin { background-color: #0077b5; }
.resp-sharing-button--linkedin:hover { background-color: #046293; }
/* 頁面最上方的公告（站點資料的 announcement_data.txt，舊站的 web_blog/header.php） */
.announcement {
	position: relative;
	z-index: 1;
}
.clear_float {
	clear: both;
}

/* 頁尾：跟網站其他頁面共用 templates/partials/site_footer.html */
footer {
	padding-bottom: 40px;
	text-align: center;
}
.copyright_css {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	font: normal 11px/normal Helvetica, sans-serif;
	color: rgba(255,255,255,1);
	text-align: center;
	white-space: pre-line;
}
.copyright_css:hover {
	font: normal 12px/normal Helvetica, sans-serif;
}
.site_credit {
	text-align: right;
	text-shadow: 5px 5px 1px #5079A3;
	padding: 20px 40px 0 20px;
}
.fade_in {
	animation: fade_in 1s ease-in both;
}
@keyframes fade_in {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* 舊站的 blog 也是一篇接一篇淡入（main1、main2……每篇晚 0.5 秒，run.js）。第 N 塊晚 0.5×(N-1) 秒；單篇文章頁的文章包在 #main1 裡，是第 1 塊 */
#main_area > .fade_in:nth-child(2) { animation-delay: 0.5s; }
#main_area > .fade_in:nth-child(3) { animation-delay: 1s; }
#main_area > .fade_in:nth-child(4) { animation-delay: 1.5s; }
#main_area > .fade_in:nth-child(5) { animation-delay: 2s; }
#main_area > .fade_in:nth-child(6) { animation-delay: 2.5s; }
#main_area > .fade_in:nth-child(7) { animation-delay: 3s; }
#main_area > .fade_in:nth-child(8) { animation-delay: 3.5s; }
#main_area > .fade_in:nth-child(9) { animation-delay: 4s; }
#main_area > .fade_in:nth-child(10) { animation-delay: 4.5s; }
#main_area > .fade_in:nth-child(11) { animation-delay: 5s; }
#main_area > .fade_in:nth-child(12) { animation-delay: 5.5s; }
#main_area > .fade_in:nth-child(13) { animation-delay: 6s; }
#main_area > .fade_in:nth-child(14) { animation-delay: 6.5s; }
#main_area > .fade_in:nth-child(15) { animation-delay: 7s; }
#main_area > .fade_in:nth-child(16) { animation-delay: 7.5s; }
#main_area > .fade_in:nth-child(17) { animation-delay: 8s; }
#main_area > .fade_in:nth-child(18) { animation-delay: 8.5s; }
#main_area > .fade_in:nth-child(19) { animation-delay: 9s; }
#main_area > .fade_in:nth-child(20) { animation-delay: 9.5s; }
#main_area > .fade_in:nth-child(n+21) { animation-delay: 10s; }
@media screen and (max-width: 1318px) {
	#main_show_area {
		width: 1000px;
	}
	#main_area {
		width: 700px;
	}
	.header_css {
		width: 70px;
	}
}
@media screen and (max-width: 1050px) {
	#main_show_area {
		width: 750px;
	}
	#main_area {
		width: 735px;
		float: none;
		margin: auto;
	}
	#sider_area {
		float: none;
		width: 93%;
		padding-right: 0;
		margin: auto;
		column-width: 200px;
	}
	.sider_bar {
		width: 200px;
		display: inline-block;
	}
}
@media screen and (max-width: 810px) {
	#main_show_area {
		width: 380px;
	}
	#main_area {
		width: 365px;
	}
	#menu_div {
		height: 95px;
		margin-top: 104px;
	}
	#header_area {
		margin-bottom: 20px;
	}
	#sider_area {
		width: 340px;
		column-width: auto;
	}
	.sider_bar {
		width: 95%;
	}
	.comment_avatar {
		width: 60px;
	}
	.comment_avatar img {
		width: 48px;
		height: 48px;
	}
}
@media screen and (max-width: 500px) {
	#main_show_area {
		width: 90%;
	}
	#main_area {
		width: 95%;
	}
	#sider_area {
		width: 90%;
	}
	.header_css {
		width: 18%;
	}
	.blog_logo {
		width: 100%;
		height: auto;
	}
}
@media print {
	body, p, li {
		color: #000;
		background: #fff;
	}
}