/* 選擇 body 元素 */
body {
    font-family: Arial, sans-serif; /* 設定字體為 Arial，如果使用者沒有 Arial 字體，則使用 sans-serif */
    margin: 0; /* 設定外邊距為 0 */
    background-color: #333; /* 設定背景顏色為 #333 */
    color: #fff; /* 設定文字顏色為白色 */
}

/* 選擇 header 元素 */
header {
    background-color: #ccc; /* 設定背景顏色為 #ccc */
    padding: 10px 20px; /* 設定內邊距為上下 10px、左右 20px */
    border-radius: 150px; /* 設定圓角為 999px，使其呈現圓形 */
    width: 80%; /* 設定寬度為 80% */
    position: absolute; /* 使用絕對定位 */
    top: 10px; /* 距離頂部 10px */
    left: 50%; /* 水平置中 */
    transform: translateX(-50%); /* 修正水平置中偏移 */
    display: flex; /* 使用 flexbox 排版 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 確保內容水平居中 */
    z-index: 10; /* 設定 header 的 z-index */
}

/* 選擇 class 為 header-content 的元素 */
.header-content {
    display: flex; /* 使用 flexbox 排版 */
    justify-content: space-between; /* 將 logo 和導覽列分開 */
    align-items: center; /* 垂直置中 */
    width: 100%; /* 確保 header-content 佔據 header 的整個寬度 */
}

/* 選擇 nav 元素下的 ul 元素 */
nav ul {
    list-style: none; /* 移除項目符號 */
    padding: 0; /* 設定內邊距為 0 */
    margin: 0; /* 設定外邊距為 0 */
    display: inline-flex; /* 使用 inline-flex 保持水平排列 */
    align-items: center; /* 垂直置中 */
    border-radius: 15px; /* 設定圓角為 15px */
}

/* 選擇 nav 元素下的 li 元素 */
nav li {
    margin-left: 20px; /* 調整項目之間的間距 */
}

/* 選擇 nav 元素下的 a 元素 */
nav a {
    text-decoration: none; /* 移除連結底線 */
    color: #444; /* 設定文字顏色為 #444 */
}

/* 選擇 class 為 dropdown 的元素 */
.dropdown {
    position: relative; /* 設定相對定位，以便下拉選單可以相對於它定位 */
    display: inline-block; /* 將 dropdown 項目設定為 inline-block，以便它可以包含下拉選單 */
}

/* 選擇 class 為 dropdown-content 的元素 */
.dropdown-content {
    display: none; /* 預設隱藏下拉選單 */
    position: absolute; /* 使用絕對定位 */
    background-color: #ccc; /* 設定背景顏色為 #333 */
    color: #000;
    min-width: 160px; /* 設定最小寬度為 160px */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 設定陰影效果 */
    z-index: 1; /* 確保下拉選單顯示在其他元素上方 */
}

/* 選擇 class 為 dropdown-content 的元素下的 a 元素 */
.dropdown-content a {
    color: 000; /* 設定文字顏色為白色 */
    padding: 5px 5px; /* 設定內邊距為上下 12px、左右 16px */
    text-decoration: none; /* 移除連結底線 */
    display: block; /* 將下拉選單項目設定為 block 元素，以便它們可以佔據整行 */
}

/* 滑鼠懸停在 dropdown 項目上時 */
.dropdown:hover .dropdown-content {
    display: block; /* 顯示下拉選單 */
    border-radius: 15px; /* 設定圓角為 15px */
}

/* 選擇 class 為 image-container 的元素 */
.image-container {
    position: relative; /* 設定相對定位 */
    width: 500px; /* 設定寬度為 500px */
    margin: 80px auto 20px; /* 設定外邊距為上下 100px、左右 auto，底部 20px */
    text-align: center; /* 設定文字水平居中 */
}

/* 選擇 class 為 image-container 的元素下的 img 元素 */
.image-container img {
    width: 100%; /* 設定寬度為 100% */
    height: auto; /* 設定高度為 auto，保持圖片比例 */
    border-radius: 15px; /* 設定圓角為 15px */
}

/* 選擇 class 為 text-overlay 的元素 */
.text-overlay {
    position: absolute; /* 使用絕對定位 */
    top: 50%; /* 距離頂部 50% */
    left: 50%; /* 距離左側 50% */
    transform: translate(-50%, -50%); /* 將元素的中心點移動到父元素的中心點 */
    color: white; /* 設定文字顏色為白色 */
}

/* 選擇 class 為 prev 和 next 的元素 */
.prev, .next {
    position: absolute; /* 使用絕對定位 */
    top: 50%; /* 距離頂部 50% */
    transform: translateY(-50%); /* 將元素垂直居中 */
    background-color: rgba(0, 0, 0, 0.5); /* 設定背景顏色為半透明黑色 */
    color: white; /* 設定文字顏色為白色 */
    border: none; /* 移除邊框 */
    padding: 10px 15px; /* 設定內邊距為上下 10px、左右 15px */
    font-size: 20px; /* 設定字體大小為 20px */
    cursor: pointer; /* 設定滑鼠游標為 pointer */
}

/* 選擇 class 為 prev 的元素 */
.prev {
    left: 10px; /* 距離左側 10px */
}

/* 選擇 class 為 next 的元素 */
.next {
    right: 10px; /* 距離右側 10px */
}

/* 選擇 footer 元素 */
footer {
    background-color: #222; /* 設定背景顏色為 #222 */
    text-align: center; /* 設定文字水平居中 */
    padding: 10px; /* 設定內邊距為 10px */
    position: fixed; /* 使用固定定位 */
    bottom: 0; /* 距離底部 0px */
    width: 100%; /* 設定寬度為 100% */
}

.burger {
    display: none; /* 預設隱藏 burger menu */
    cursor: pointer;
    position: relative;
    width: 30px;
    height: 20px;
  }
  
  .bar {
    background-color: #444;
    height: 3px;
    width: 100%;
    margin: 4px 0;
    border-radius: 2px;
  }
  
  @media (max-width: 1000px) {
    nav ul {
      display: block;
      position: fixed;
      top: 40px;
      right: 1px;
      width: 16.666%; /* 設定 width 為 100% */
      background-color: #ccc;
      padding: 15px 20px; /* 設定內邊距為上下 12px、左右 16px */

    }
    
    nav li {
        margin-top: 15px; /* 將項目之間的間距調整為 5px */
      }
    
    .dropdown-content {
      position: static;
      display: none;
      background-color: #ccc;
      color: #fff;
    }
  
    .burger {
      display: block;
    }
  }