@charset "utf-8";
/* CSS Document */
html, body {
      height: 100%;
      margin: 0;
      font-family: 'Noto Sans TC', 'Roboto', sans-serif;
      background-color: #e5e5d7;
      font-size:18px;
}

body {
    display: flex;
    flex-direction: column;   
 }
a{
    text-decoration: none;
}
.content {
    flex: 1;
    padding: 2rem;    
 }
.bg-eed{
   background-color: #e5e5d7;
}
.bg-cfdd89 {
      background-color: #cfdd89;
}
.bg-C848E4{
     background-color: #848E4C;
}
.bg-dfdbbf {
      background-color: #DFDBBF;
}
.bg-e7f2b2{
    background-color: #e7f2b2;
}
.text-bg-e7f2b2{
    background-color: #e7f2b2;
    color:#A6B860;
}
#hero h1{
    font-size:1.8rem;
    color:#848E4C;
    padding: 0.8rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
}
.hero-image {
      background: url('https://via.placeholder.com/1200x400?text=Lectures+%26+Awards') center center / cover no-repeat;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
.btn-outline-cfdd89{
    border-color: #848E4C;
    color: #848E4C;
}
.btn-outline-cfdd89:hover{
   background-color: #A6B860;
}
.btn-cfdd89{
    background: #848E4C;
    color: #FFFFFF;
}
.btn-cfdd89:hover{
   background-color: #A6B860;
   color: #848E4C;
}
/*時間軸*/
.timeline { 
   position: relative; padding: 2rem 0; 
  
}
.timeline::before {
   content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
   margin-left: -2px; background-color: #cfdd89;
}
.timeline-event {
   position: relative; width: 50%; padding: 1rem 2rem;
   
}
.timeline-event.left { left: 0; text-align: right; }
.timeline-event.right { left: 50%; }
.timeline-event::before {
   content: ''; position: absolute; top: 1rem; width: 12px; height: 12px;
   background-color: #848E4C; border-radius: 50%; z-index: 1;
}
.timeline-event.left::before { right: -6px; }
.timeline-event.right::before { left: -6px; }

  /* 語言選單客製樣式 */
 .custom-lang-select {
      width: auto;
      max-width: 200px;
      padding-right: 2.5rem;
      font-size: 1rem;
      border-radius: 8px;
      background-color: #e5e5d7;
      border: 2px solid #ccc;
      color: #333;
      background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 1rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .custom-lang-select:focus {
      border-color: #666;
      box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.2);
      outline: none;
    }

    .custom-lang-select:hover {
      border-color: #999;
    }

footer {
     background-color: #cfdd89;
     text-align: center;
     padding: 1rem 0;
     border-top: 1px solid #ccc;
}
/* 交錯列底色 */
.table{
    border:1px solid #cfdd89;
}
.table thead tr th{
    color:#848E4C;
}
.table-striped tbody tr:nth-of-type(odd) td {
  background-color: #F1F7DD !important;
}
.table-hover tbody tr:hover td {
  background-color: #e7f2b2 !important;
}
/* 自訂下拉選單背景與邊框 */
.dropdown-menu.custom-dropdown {
  background-color: #e7f2b2;
  border: 1px solid #cfdd89;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}
.list-group-item {
  border: 1px solid #cfdd89;
  border-left: none;
  border-right: none;
  background-color: #fff;
  transition: background-color 0.3s;
}

/* 奇數條目背景色 */
.list-group-item:nth-of-type(odd) {
  background-color: #F1F7DD;
}

/* 滑鼠懸停效果 */
.list-group-item:hover {
  background-color: #e7f2b2;
  text-decoration: none;
}
/* 下拉選單項目文字樣式 */
.dropdown-menu.custom-dropdown .dropdown-item {
  color: #444;
  padding: 0.5rem 1.5rem;
  transition: background-color 0.2s ease;
}

/* hover 效果 */
.dropdown-menu.custom-dropdown .dropdown-item:hover,
.dropdown-menu.custom-dropdown .dropdown-item:focus {
  background-color: #cfdd89;
  color: #222;
}

.navbar .nav-link.active,
.navbar .dropdown-item.active {  
  background-color: #848E4C;
  color: #e7f2b2;
}