/* 針對包含中文的標題設定微軟正黑體 */
body {
  background-color:#F2EFE9;
  color: #c8b39e; /* 設定內文顏色為黑色 */
  font-family: "NotoSerifTC-VF", sans-serif !important; /* 將dutcheb字體放在最前面 */
  font-weight: bold; /* 內文字體不加粗 */
  line-height: 1.8;
  
}

p {
  color: #1d1c1c; /* 設定內文顏色為黑色 */
  font-weight: normal; /* 內文字體不加粗 */
  font-family: "msjhl","dutch" , sans-serif !important;
  line-height: 1.8;
}

/* 修正後的 H1 和 H2 標題樣式 */
h1 {
  color: #1F3A5F; /* 將標題顏色設為藍色 */
  font-family: "dutchbi", "NotoSerifTC-VF", sans-serif !important; /* 將dutcheb字體放在最前面 */
  font-weight: bold; /* 設定為粗體 */
  font-size: 1.6rem; /* 使用正確的屬性名稱，並根據需要調整大小 */
}

/* 修正後的 H3 和 H4 標題樣式 */
 h2  {
  color: #1F3A5F; /* 將次標題顏色設為綠色 */
  font-family: "dutchbi", "NotoSerifTC-VF", sans-serif !important; /* 將dutcheb字體放在最前面 */
  font-weight: bold; /* 設定為正常粗細 */
  font-size: 1.4rem; /* 使用正確的屬性名稱，並根據需要調整大小 */
}

  h3, h4 {
  color: #1F3A5F; /* 將次標題顏色設為綠色 */
  font-family: "dutchbi", "NotoSerifTC-VF", sans-serif !important; /* 將dutcheb字體放在最前面 */
  font-weight: bold; /* 設定為正常粗細 */
  font-size: 1.2rem; /* 使用正確的屬性名稱，並根據需要調整大小 */
}
/* 載入字體的正確方式 */
@font-face {
  font-family: 'ChenYuluoyan-Thin';
  src: url('./font/ChenYuluoyan-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'dutch';
  src: url('./font/dutch.ttf') format('truetype');
}
@font-face {
  font-family: 'dutchbi';
  src: url('./font/dutchbi.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSerifTC-VF';
  src: url('./font/NotoSerifTC-VF.ttf') format('truetype');
}
@font-face {
  font-family: 'OLDENGL';
  src: url('./font/OLDENGL.ttf') format('truetype');
}
.navbar {
  background-color: #bfbdb7; /* 設定 Navbar 的背景顏色，這裡是深藍色 */
}

.navbar-brand, .navbar a {
  color: #232121 !important; /* 設定 Navbar 上的品牌文字與連結顏色為白色 */
  font-family: "dutchbi", sans-serif !important; /* 將dutcheb字體放在最前面 */
  font-size: 1rem; /* 使用正確的屬性名稱，並根據需要調整大小 */
}
.navbar-brand:hover, .navbar a:hover {
  color: #A68B5B !important; /* 設定 Navbar 上的品牌文字與連結懸停顏色為淺藍色 */
}
/* 設定 iframe 容器樣式 */
.iframe-container {
  position: relative; /* 讓子元素可以相對於此容器定位 */
  width: 100%;
  padding-top: 56.25%; /* 16:9 的寬高比 (9 / 16 = 0.5625) */
  height: 0; /* 高度設為 0 */
  overflow: hidden; /* 確保簡報不會超出容器 */
}

/* 確保 iframe 填滿整個容器 */
.iframe-container iframe {
  position: absolute; /* 相對於容器定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.float-left {
  float: left; /* 讓圖片浮動在左側 */
  margin-right: 20px; /* 在圖片右側增加間距，避免文字緊貼圖片 */
  margin-bottom: 0px; /* 在圖片下方增加間距 */
  border-radius: 50%; /* 新增：讓圖片變成圓形 */
  /* 確保圖片是正方形才能完美圓形，或至少寬高接近 */
  /* 如果圖片本身不是正方形，它會變成橢圓形 */
  object-fit: cover; /* 讓圖片填滿圓形區域，可能裁切邊緣 */
    /* 新增：邊框樣式 */
  border: 0 px solid #232121; /* 3px 寬度，實線，淺灰色 */
  /* 您可以根據喜好調整邊框的寬度、樣式（solid, dashed, dotted）和顏色 */
    /* 新增：陰影樣式 */
  box-shadow: 0 4px 8px #8B4513; /* 這裡是一個柔和的陰影範例 */
  /* 您可以根據喜好調整陰影的參數 */
}

/* 設定每個專案區塊的樣式 */
.talk-item {
  background-color: #FFFFFF;
  border-left: 5px solid var(--quarto-link-color); /* 左側的垂直色塊 */
  padding: 20px;
  margin-bottom: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 懸停時的效果 */
.talk-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 確保圖片填滿容器且比例不變 */
.talk-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

#Q:我要把版面拉寬
.even {
  width: 80% !important; /* 設定寬度為20% */
  height: 1000px !important; /* 根據需要調整高度 */
  overflow-y: auto; /* 內容過多時啟用滾動條 */
  box-sizing: border-box; /* 包括padding和border在內的寬度計算 */
}

/* 移除 listing 卡片的邊框與陰影 */
.card,
.card-body,
.card-img-top {
  border: none !important;
  box-shadow: none !important;
}

/* 如果還有殘留的外框 */
.quarto-listing .card {
  border: none !important;
  box-shadow: none !important;
}

/* 圖片調整 */
.card-img-top {
  border-radius: 8px;
  overflow: hidden;
}


/* 修改 listing title 樣式 */
.listing-title {
  color: #1F3A5F !important;      /* 藍色 */
  font-family: "NotoSerifTC-VF", sans-serif !important; /* 自訂字體 */
  font-size: 1.2rem;              /* 可調整大小 */
  font-weight: bold;            /* 避免太粗 */
  margin-bottom: 1.5rem; /* 新增此行以增加標題與內文的間隙 */
}



/* 新增的分類標籤樣式 */
.listing-category {
  display: inline-block;
  background-color: #f7f3ed; /* 淺灰色背景 */
  color: #000000!important; /* 深灰色文字 */
  font-family: "NotoSerifTC-VF", sans-serif !important; /* 自訂字體 */
  padding: 4px 10px;
  margin-right: 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: normal;
  margin-bottom: 1.5rem; /* 新增此行以增加標題與內文的間隙 */
}
/* 新增：針對 listing 排序連結（Order）的樣式 */
body .quarto-listing-header .listing-sort a {
  color: #1F3A5F !important;
  font-family: "dutchbi", "NotoSerifTC-VF", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  margin-left: 20px !important;
  transition: all 0.3s ease !important;
}

body .quarto-listing-header .listing-sort a.active {
  color: #333333 !important;
  font-weight: bolder !important;
}

body .quarto-listing-header .listing-sort a:hover {
  color: #A68B5B !important;
}

/* 新增：調整 listing-grid 樣式以符合 fluid syndicate 的排版 */
.listing-grid {
  /* 使用 CSS Grid 排版 */
  display: grid !important;
  /* 設定欄與欄之間的間距為 0 */
  gap: 0 !important;
  /* 根據視窗寬度自動調整欄位數量，確保每個卡片最小寬度為 300px */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

/* 調整 listing-card 的樣式 */
.listing-card {
  /* 移除卡片內邊距 */
  padding: 0 !important;
  /* 將卡片內容設為 flexbox 容器，並以垂直方向排列 */
  display: flex;
  flex-direction: column;
}

/* 調整圖片容器的樣式 */
.listing-image {
  /* 讓圖片容器填滿可用空間 */
  flex-grow: 1 !important;
  width: 100% !important;
  height: 100% !important;
  /* 移除圖片容器內邊距 */
  padding: 0 !important;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* 確保圖片本身填滿其父容器並裁切 */
.listing-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* 移除圓角和陰影 */
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s ease;
}

/* 設定滑鼠懸停時圖片的放大效果 */
.listing-card:hover .listing-image img {
  transform: scale(1.05);
}

/* 調整 listing 內容區塊的樣式 */
.listing-content {
  /* 設定一個最小高度，讓所有卡片看起來高度一致 */
  min-height: 5rem;
  /* 移除內邊距 */
  padding: 0 !important;
  /* 使用 flexbox 在內容區塊內垂直和水平居中對齊 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}


/* 1. 調整整個程式碼區塊的容器樣式 (包含程式碼和輸出) */
/* 使用圖片中柔和的淺紫色/淺粉色作為背景，並增加大圓角 */
.cell {
  /* 使用一個柔和的淺色背景 */
  background-color: #f7f3ed; /* 使用您現有 listing-category 的顏色，或自訂一個柔和的淺紫色 */
  /* background-color: #e6e0f8; */ /* 另一個淺紫色的選擇 */
  background-color: #F7F0F7; /* 接近圖片的淺淡紫 */
  
  /* 設置一個較大的圓角 */
  border-radius: 15px; 
  
  /* 移除邊框和多餘的陰影，讓它看起來像浮在頁面上 */
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 輕微柔和的陰影 */
  
  margin-bottom: 25px; /* 確保與其他內容有間距 */
  position: relative; /* 用於定位模擬的視窗按鈕 */
  padding-top: 30px; /* 為頂部的圓點留出空間 */
}


/* 2. 模擬頂部視窗控制按鈕 */
/* 使用 ::before 偽元素來創建按鈕 */
.cell::before {
  content: '•••'; /* 使用 Unicode 圓點，或三個單獨的圓點 */
  font-size: 1.2rem;
  line-height: 1;
  color: #c4c4c4; /* 圓點的顏色 */
  
  /* 定位在容器頂部中心 */
  position: absolute;
  top: 10px;
  left: 20px;
  
  /* 可以使用自定義的圓點，例如：
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background-color: #ff605c; 
  border-radius: 50%;
  box-shadow: 20px 0 0 #ffbd44, 40px 0 0 #00ca4e; 
  */
}


/* 3. 程式碼內容的樣式（code input / 程式碼輸入區） */
/* 程式碼和輸出使用相同的背景，所以這裡只需要設置內邊距和字體顏色 */
.cell-code {
  background-color: transparent !important; /* 確保透明 */
  padding: 0 20px 5px 20px; /* 調整左右邊距和底部間距 */
  border: none; /* 移除任何邊框 */
}

/* 針對程式碼區塊內的程式碼文字 */
.cell-code code {
  font-family: monospace, "dutchbi", sans-serif !important; 
  background-color: transparent !important; 
  color: #333333 !important; /* 深灰色文字，模仿圖片中的深色文字 */
  font-weight: normal !important; 
  font-size: 1rem !important;
  text-shadow: none !important; 
}


/* 4. 程式碼輸出內容的樣式（code output / 程式碼輸出區） */
/* 輸出內容與程式碼輸入內容保持一致的背景和字體風格 */
.cell-output {
  padding: 5px 20px 20px 20px; /* 調整頂部和底部間距 */
  background-color: transparent !important; /* 確保透明 */
}

/* 針對標準輸出（例如 print() 的內容） */
.cell-output-stdout {
  color: #333333; /* 輸出文字使用深灰色 */
  font-family: monospace, sans-serif !important; /* 讓輸出結果也使用等寬字體 */
  line-height: 1.6;
  font-size: 1rem;
}

code {
  font-family: "dutchbi", sans-serif !important; /* 設定字體 */
  background-color: #FFFFFF !important; /* 深色背景 */
  color: #4d425f !important; /* 設定顏色 */
  font-weight: bold !important; /* 內文字體不加粗 */
  font-size: 1.1rem !important; /* 調整字體大小 */
}

.cell {
  background-color: #F7F0F7; 
  
  border-radius: 15px; 
  border: none; /* << 確保這裡沒有邊框 */
  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  
  margin-bottom: 25px; 
  position: relative; 
  padding-top: 30px; 
}