/* 傳統 CSS：避免 Flexbox、Grid、CSS 變數及動畫，照顧舊瀏覽器。 */
html, body { margin:0; padding:0; }
body {
  background:#dceef7;
  color:#263849;
  font-family:Arial, "Microsoft JhengHei", sans-serif;
  font-size:14px;
  line-height:1.7;
}
a { color:#167ca5; text-decoration:none; }
a:hover { color:#064d70; text-decoration:underline; }
#page { width:920px; margin:0 auto; }
#header {
  height:62px;
  background:#eaf6fb;
  border-bottom:1px solid #b8d7e5;
  padding:0 22px;
}
.brand { float:left; padding-top:12px; font-size:21px; font-weight:bold; }
.brand a { color:#20394b; }
.mark { color:#269ec2; font-size:27px; letter-spacing:-7px; margin-right:12px; }
.nav { float:right; padding-top:19px; }
.nav a { color:#29475a; margin-left:16px; }
.clear { clear:both; }

/*
 * 自訂首頁大圖：
 * 將圖片放在 assets 資料夾，命名為 hero.jpg。
 * 例如：assets/hero.jpg
 * 若沒有圖片，區塊會顯示淺藍色底色。
 */
#hero {
  height:570px;
  position:relative;
  overflow:hidden;
  background:#8fc9df;
  text-align:center;
  border-bottom:1px solid #b8d7e5;
}
/* 使用普通 img 尺寸拉伸，舊瀏覽器也能顯示；圖片會填滿整個首頁橫幅。 */
#hero .hero-bg {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border:0;
  z-index:1;
}
.hero-inner {
  position:relative;
  z-index:2;
  padding-top:175px;
}
#hero h1 { color:#fff; font-size:54px; line-height:1.2; margin:0 0 12px 0; text-shadow:1px 1px 3px #345; }
#hero p { color:#fff; font-size:20px; margin:8px 0 25px 0; text-shadow:1px 1px 3px #345; }
.button {
  display:inline-block;
  background:#f4fbff;
  color:#172f40;
  padding:10px 22px;
  font-size:14px;
  font-weight:bold;
  border:1px solid #fff;
}
.button:hover { background:#d5edf7; color:#172f40; text-decoration:none; }
.content { min-height:300px; padding:25px 30px 45px 30px; }
.content h1 { font-size:34px; color:#20394b; border-bottom:1px solid #b8d7e5; padding-bottom:14px; margin:0 0 25px 0; }
.post-row { padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:1px solid #c2dce8; }
.post-row h2 { font-size:22px; margin:2px 0; }
.post-date, .tags { color:#607b8c; font-size:12px; }
.tags { color:#167ca5; }
.about-box { width:520px; margin:25px auto; text-align:center; }
.avatar { width:120px; height:120px; line-height:120px; margin:0 auto; background:#c2e3f0; border:4px solid #a6d1e2; color:#167ca5; font-size:48px; font-weight:bold; overflow:hidden; }
.avatar img { display:block; width:120px; height:120px; border:0; }
.about-box h2 { color:#20394b; }
#about-description { color:#607b8c; }
#about-social { margin-top:20px; }
#footer { text-align:center; padding:25px 10px 18px 10px; color:#607b8c; font-size:12px; }
#footer a { color:#29475a; margin:0 5px; }
.article { width:760px; margin:0 auto; }
.article h1 { text-align:center; }
.back { margin-bottom:20px; }
.markdown { color:#263849; font-size:15px; }
.markdown h1, .markdown h2, .markdown h3 { color:#20394b; border:0; text-align:left; }
.markdown p { margin:16px 0; }
.markdown ul, .markdown ol { margin:10px 0 10px 28px; }
.markdown blockquote { margin:15px 0; padding:5px 15px; border-left:4px solid #269ec2; background:#edf7fb; color:#496577; }
.markdown pre { overflow:auto; padding:12px; background:#eaf3f8; border:1px solid #c2dce8; color:#263849; font-family:monospace; }
.markdown code { background:#eaf3f8; padding:2px 4px; font-family:monospace; }
.markdown img { max-width:100%; border:0; }
.markdown hr { border:0; border-top:1px solid #b8d7e5; }
@media screen and (max-width: 940px) {
  #page { width:94%; }
  .article { width:auto; }
}
@media screen and (max-width: 600px) {
  #hero { height:400px; }
  .hero-inner { padding-top:110px; }
  #hero h1 { font-size:36px; }
  #hero p { font-size:16px; }
  .about-box { width:auto; }
  #header { padding:0 12px; }
  .brand { font-size:17px; }
}