/* 懶加載的圖片設定其高度爲自動 */
/* 只能用在填滿左右兩側寬度的圖片！！！ */
/* 意思是文字圖片左右擺在一起的別亂用，，， */
img.img-lazy {
    width: 100%;
    height: auto;
    min-height: 100px;
    min-width: 100px;
    background-color: transparent;
    background-image: url('../image/mona-loading.webp');
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center
}

/* 給圖層描邊，僅限用在透明背景的圖片！！請抄襲這裏的代碼手動設定不是直接用 class */
img.layer-border {
     -webkit-filter: drop-shadow(5px 5px 0px #aaa) drop-shadow(-5px -5px 0px #aaa) drop-shadow(5px -5px 0px #aaa) drop-shadow(-5px 5px 0px #aaa);
    filter: drop-shadow(5px 5px 0px #aaa) drop-shadow(-5px -5px 0px #aaa) drop-shadow(5px -5px 0px #aaa) drop-shadow(-5px 5px 0px #aaa);
}

/* Steam 嵌入式控件美化 */
.markdown-body .steam-warp {
  /* background-color: #282e39;
  overflow: hidden;
  box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
  border-radius: 10px; */
  margin: 1rem 0;
}

/* 文章 video */ 
.markdown-body video {
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    border-radius: 10px;
    overflow: hidden;
}

.box-shadow {
  box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

/* 圖片輪播 */
.carousel.slide {
  box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
  border-radius: 10px;
  overflow: hidden;
}

/* 電腦版 文章標題不要省略截斷 */
.index-header {
  white-space: inherit;
}
/* 手機版 文章標題不要限制兩行 */
@media (max-width: 767px){
  .index-header {
    -webkit-line-clamp: inherit;
  }
}
/* 文章摘要 不要限制三行 */
.index-excerpt {
  max-height: unset;
}

/* 文章內圖片 最大寬度 太小 */
.markdown-body p>a>img, .markdown-body p>img {
  max-width: 96%;
}

article {
  line-break: loose;
}

/* 配色 */
:root {
  /* 網頁背景色: 0; */
  --body-bg-color: #eee;
  /* 中央版面背景色: 0; */
  --board-bg-color: #fff;
  /* 文字顏色: 0; */
  --text-color: #405b55;
  /* 二級文字顏色: 0; */
  --sec-text-color: #484646;
  /* 文章正文顏色: 0; */
  --post-text-color: #13201f;
  /* 文章標題顏色: 0; */
  --post-heading-color: #1a202c;
  /* 鼠標指向的文章連結顏色: 0; */
  --post-link-color: #0366d6;
  /* 頁面頂端連結 和文章連結 鼠標指向顏色: 0; */
  --link-hover-color: #90b44b;
  --link-hover-bg-color: #f8f9fa;
  /* 頂欄顏色: 0; */
  --navbar-bg-color: #66bab7;
  /* 頂欄文字顏色: 0; */
  --navbar-text-color: #fff;
  /* 網站頭圖默認值 */
  --home-bg-url: url("/image/main/key.webp");
}

/* 夜間配色 */
[data-user-color-scheme='dark'] {
  --body-bg-color: #1c1c1c;
  --board-bg-color: #333333;
  --text-color: #e3e3e3;
  --sec-text-color: #bfbfbf;
  --post-text-color: #e3e3e3;
  --post-heading-color: #d1d1d1;
  --post-link-color: #73befc;
  --link-hover-color: #a5dee4;
  --link-hover-bg-color: #364151;
  --navbar-bg-color: #333334;
  --navbar-text-color: #f1f1f1;
}

/* 網站 navbar 標題爲 serif 斜體 */
.navbar-brand {
  font-style: italic!important;
}


.navbar.navbar-dark .navbar-brand, .navbar.navbar-dark .nav-item .nav-link {
  color: #eee;
}

.navbar.navbar-dark .navbar-toggler .animated-icon span {
  background-color: #eee;
}

.navbar.navbar-col-show .navbar-brand, .navbar.navbar-col-show .nav-item .nav-link {
  color: var(--navbar-text-color);
}

.navbar.navbar-col-show .navbar-toggler .animated-icon span {
  background-color: var(--navbar-text-color);
}

/* 修補代碼行下方的空白 */
.markdown-body pre {
  margin-bottom: unset;
} 

#banner {
  transition: background-image 0.3s ease-in-out;
}

/* for toast */
.toast-top {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 1030;
  margin-top: 5rem!important;
  margin-bottom: 0.5rem!important;
}
.toast-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  margin-top: .5rem!important;
  margin-bottom: 3rem!important;
}

/* 去除最頂上時 navbar 的陰影 */
#navbar:not(.top-nav-collapse) {
  box-shadow: none;
}


/* footer */

footer {
  margin: 2rem 0 0 0;
}

.footer-inner {
  padding: 20px 0 0 0;
}

#footer {
  background-color: var(--board-bg-color);
  color: var(--text-color);
  /* margin-top: 50px; */
  /* min-height: 300px; */
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: start;
}

.footerLogo {
  font-size: 1.8rem;
  margin-bottom: 12px;

}

.ourLinks ul {
  list-style-type: none;
  padding-left: 0; 
}

.ourLinks li {
  margin-bottom: 8px;
}

.ourLinks a {
  text-decoration: none;
}

.ourLinks h5 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.footerRow > div {
  margin-bottom: 20px;
}