/* Created By Weil Jimmer
 * 網站頁面的外框和共用樣式（templates/layouts/site.html）。
 * 來源是舊站的 web_obj/css/main_style.css，加上舊 web_data/header.php 裡的 inline style：
 * CSP 不允許 inline style，所以全部搬到這裡。舊站靠 run.js 把 opacity:0 的區塊淡入，
 * 這裡改用 CSS 動畫（.fade_in），頁面不需要 JavaScript 也能顯示。
 */

/* 選單的字體。舊站從 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 dashed #cccccc;
}
a {
	color: #7AFFF6;
	text-decoration: none;
}
a:visited {
	color: #0096FF;
}
a:hover {
	color: #FF00FF;
}
p {
	text-shadow: 5px 5px 10px #600000;
	padding: 0 20px;
	text-align: left;
	font-family: jf-jinxuan-fresh Medium, Georgia, Microsoft JhengHei, serif;
	line-height: 160%;
}
.text_indent {
	text-indent: 2em;
}
.red_text {
	text-shadow: 1px 1px 1px #DC0408;
}
img {
	max-width: 95%;
	overflow: hidden;
	margin: 10px;
	border: 0;
}
.time_style {
	font-size: 10pt;
	text-shadow: 0 0 5px #CB1598;
	color: rgba(255,0,0,1);
	text-align: right;
	float: right;
}
li, h2, h3, h4, h5 {
	text-shadow: 0 0 25px #00CAE0;
	text-align: left;
	padding: 0 20px;
	font-family: Georgia, Microsoft JhengHei, serif;
}
h1 {
	text-align: left;
}
body {
	background: url('../images/back7.webp') no-repeat center center fixed;
	background-size: cover;
	background-color: #001A74;
	color: silver;
	margin: 0;
}
::-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: 20%;
	height: 100vh;
	pointer-events: none;
}
.side_shade_left {
	left: 0;
	background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
}
.side_shade_right {
	right: 0;
	background: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0));
}

#main_show_area {
	position: relative;
	width: 70%;
	margin: auto;
	text-align: center;
}
/* 尺寸照舊站：外框固定 60px 高，logo 和選單超出的部分靠 margin-bottom 留位置（同舊站的 main_style.css） */
#header_area {
	position: relative;
	height: 60px;
	margin-bottom: 20px;
}
.site_logo {
	height: 60px;
	width: 354px;
}

/* 舊站的選單是 <input type="button" onClick=...>；新版是一般的連結，樣式照舊 */
#menu_div {
	position: absolute;
	right: 0;
	top: 0;
}
.menu_css,
.menu_css:visited {
	display: inline-block;
	border-radius: 40%;
	font-family: Calligraffitti, cursive;
	font-size: 15pt;
	color: rgba(255,255,255,0.8);
	box-shadow: 3px 3px 1px #4C6E91;
	text-shadow: 0 0 10px #FFFFFF;
	transition: color 1s;
	margin-left: 3px;
	padding: 0 20px;
}
.menu_css:hover {
	color: rgba(255,0,0,0.8);
	text-shadow: 0 0 5px #FF0000;
}

main {
	width: 100%;
	margin-top: 10px;
}

footer {
	padding-bottom: 40px;
}
.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;
	text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px #007fff, 0 0 35px #06777c, 0 0 40px #0065ff, 0 0 50px #000d75;
}
.copyright_css:hover {
	font: normal 12px/normal Helvetica, sans-serif;
	text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}
.site_credit {
	text-align: right;
	text-shadow: 5px 5px 1px #5079A3;
	padding: 20px 40px 0 20px;
}

/* 內容頁的區塊（舊站的 main1、main2……的 inline style）：首頁、Hobby 寬 100%，其他 95% */
.site_block {
	width: 100%;
	margin-top: 10px;
}
.site_block_narrow {
	width: 95%;
}

/* 節日特效的雪花（static/js/snow.js）：舊站寫在 innerHTML 的 style 屬性裡的固定樣式 */
.snow_flake {
	position: fixed;
	z-index: 100;
	font-family: inherit;
	cursor: default;
	user-select: none;
}

/* 相簿（/cgi/photo/templates/photo.html）：分類列置中、目前的頁碼紅色加大，同舊站 photo_show.php 的 inline style */
.photo_categories {
	text-align: center;
}
.photo_pages {
	margin-top: 20px;
	text-align: center;
}
.photo_current_page {
	color: #FF0000;
	font-size: 15pt;
	font-weight: bold;
}
/* 聯絡頁和留言板（/cgi/contact/templates/contact.html）。舊站的表單是 elegant-aero 樣式加 inline style，重新設計（維護者 2026-10-26 同意） */
.pgp_key {
	margin: 0 20px 10px;
	text-align: left;
}
.pgp_key summary {
	cursor: pointer;
	color: #7AFFF6;
}
.pgp_key textarea {
	height: 400px;
	resize: vertical;
	font-family: Consolas, monospace;
	font-size: 10pt;
}
/* 外框的 #main_show_area 是置中的，表單要靠左 */
.guestbook_form {
	padding: 0 20px 20px;
	max-width: 640px;
	text-align: left;
}
.guestbook_note {
	padding: 0;
	color: #FF6E6E;
}
.guestbook_field {
	display: block;
	margin: 12px 0;
}
.guestbook_field input,
.guestbook_field textarea,
.pgp_key textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 4px;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #E8E8E8;
	border: 1px solid #3A5A8C;
	border-radius: 4px;
}
.guestbook_field input:focus,
.guestbook_field textarea:focus {
	outline: none;
	border-color: #7AFFF6;
}
.guestbook_count {
	padding: 0;
	margin: 0;
	font-size: 10pt;
	color: rgba(255, 0, 0, 0.7);
	text-align: right;
}
.guestbook_visibility {
	margin: 12px 0;
	border: 1px dashed #3A5A8C;
	border-radius: 4px;
}
.guestbook_visibility label {
	display: block;
	margin: 4px 0;
}
.guestbook_recaptcha {
	margin: 12px 0;
}
.guestbook_submit {
	padding: 8px 28px;
	background: #0A2A6E;
	color: #FFFFFF;
	border: 1px solid #7AFFF6;
	border-radius: 4px;
	cursor: pointer;
}
.guestbook_submit:hover {
	background: #680057;
}
.guestbook_submit:disabled {
	opacity: 0.5;
	cursor: wait;
}
.guestbook_result {
	padding: 0;
	min-height: 1.6em;
}
.guestbook_ok {
	color: #7AFFF6;
}
.guestbook_error {
	color: #FF4D4D;
}
.guestbook_banned {
	padding: 20px 20px 40px;
}
.guestbook_message {
	margin: 0 20px 18px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.45);
	border-left: 3px solid #9900FF;
	border-radius: 4px;
	color: #CC99FF;
}
.guestbook_message p {
	padding: 0;
	margin: 4px 0;
}
.guestbook_mine {
	color: #FF4D4D;
	font-weight: bold;
}
.guestbook_meta {
	font-size: 10pt;
	color: #9C9CC8;
}
.guestbook_text {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* 舊站的 style5：回覆是右對齊的黃字 */
.guestbook_reply {
	text-align: right;
	color: #FFD800;
}
.guestbook_pages p {
	text-align: center;
}
.guestbook_current_page {
	color: #FF0000;
	font-weight: bold;
	font-style: italic;
}
.error_page h2 {
	font-size: 48pt;
	margin: 20px 0 0;
}

/* 取代舊站 run.js 的淡入效果 */
.fade_in {
	animation: fade_in 1s ease-in both;
}
@keyframes fade_in {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* 舊站是一塊接一塊淡入（main1、main2……每塊晚 0.5 秒，run.js 的 run_opacity_effect）。不用 JavaScript：第 N 塊晚 0.5×(N-1) 秒，第 21 塊以後都是 10 秒 */
main > .fade_in:nth-child(2) { animation-delay: 0.5s; }
main > .fade_in:nth-child(3) { animation-delay: 1s; }
main > .fade_in:nth-child(4) { animation-delay: 1.5s; }
main > .fade_in:nth-child(5) { animation-delay: 2s; }
main > .fade_in:nth-child(6) { animation-delay: 2.5s; }
main > .fade_in:nth-child(7) { animation-delay: 3s; }
main > .fade_in:nth-child(8) { animation-delay: 3.5s; }
main > .fade_in:nth-child(9) { animation-delay: 4s; }
main > .fade_in:nth-child(10) { animation-delay: 4.5s; }
main > .fade_in:nth-child(11) { animation-delay: 5s; }
main > .fade_in:nth-child(12) { animation-delay: 5.5s; }
main > .fade_in:nth-child(13) { animation-delay: 6s; }
main > .fade_in:nth-child(14) { animation-delay: 6.5s; }
main > .fade_in:nth-child(15) { animation-delay: 7s; }
main > .fade_in:nth-child(16) { animation-delay: 7.5s; }
main > .fade_in:nth-child(17) { animation-delay: 8s; }
main > .fade_in:nth-child(18) { animation-delay: 8.5s; }
main > .fade_in:nth-child(19) { animation-delay: 9s; }
main > .fade_in:nth-child(20) { animation-delay: 9.5s; }
main > .fade_in:nth-child(n+21) { animation-delay: 10s; }
/* 舊站依 User-Agent 判斷手機，再輸出不同寬度；新版改用螢幕寬度 */
@media screen and (max-width: 1900px) {
	#menu_div {
		position: static;
	}
	.menu_css {
		padding: 5px;
	}
	#header_area {
		margin-bottom: 120px;
	}
}
@media screen and (max-width: 940px) {
	.menu_css {
		padding: 0 20px;
	}
	#header_area {
		margin-bottom: 150px;
	}
}
@media screen and (max-width: 710px) {
	#main_show_area {
		width: 90%;
	}
	.menu_css {
		padding: 0;
	}
	.site_logo {
		width: 100%;
		max-width: 354px;
		height: auto;
	}
}