body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #000;
}

#scroller {
    height: 2000vh;
    width: 100%;
}

#fixed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transition: transform 0.8s ease-out;
}

#bg-video {
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 0;
    transition: opacity 1.5s ease-in-out;
}

#bg-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-out;
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.7);
    color: #101010;
    padding: 2em;
    max-width: 600px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.8s ease-out;
    opacity: 0;
    z-index: 10;
}

.card.active {
    opacity: 1;
}

.card p {
    font-family: 'Noto Serif TC', serif;
    font-weight: 460;
    font-size: 1.25em;
    line-height: 1.6;
}

#main-content-container {
    position: relative;
    top: 500vh;
    padding: 5vh 10vw;
    color: #000;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    max-width: 800px;
    margin: 0 auto;
}

#main-title {
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    font-size: 2.8em;
    text-align: center;
    margin-bottom: 2em;
}


#main-article p {
    font-family: 'Noto Serif TC', serif;
    font-weight: 460;
    font-size: 1.1em;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1.5em;
    color: #000;
}

#main-article video {
    display: block; /* 确保视频是一个块级元素，可以设置外边距 */
    max-width: 100%; /* 限制视频最大宽度为父容器的 100% */
    height: auto; /* 保持视频的原始宽高比 */
    margin: 2em auto; /* 设置上下外边距为 2em，并左右自动居中 */
    border-radius: 8px; /* 添加圆角效果 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影，让视频看起来更突出 */
}

.article-image {
    display: block;
    max-width: 90%;
    margin: 2em auto; /* 设置上下外边距，并左右居中 */
    text-align: center; /* 确保 caption 文本居中 */
}
.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 添加圆角效果 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    transition: transform 0.3s ease-in-out; /* 添加 hover 动画 */
}

.article-image figcaption {
    font-family: 'Noto Serif TC', serif;
    font-weight: 460;
    font-size: 1em;
    color: #555;
    margin-top: 0.9em; /* 在图片和说明之间创建空间 */
    line-height: 1.5;
}

/* 設定影片與文字的並排容器 */
.video-text-container {
    display: flex; /* 啟用彈性盒佈局 */
    flex-direction: row; /* 讓子元素橫向排列（預設值）*/
    align-items: center; /* 讓子元素從頂部對齊 */
    gap: 2em; /* 在影片和文字之間增加間距 */
    max-width: 100%; /* 確保容器不會超出父容器的寬度 */
    margin: 2em auto; /* 設置上下外邊距並居中 */
}

/* 影片樣式 */
.grandma-video {
    width: 45%; /* 影片佔據容器的 40% 寬度 */
    height: 50%; /* 保持影片原始比例 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 文字容器樣式 */
.grandma-text-box {
    width: 60%; /* 文字容器佔據容器的 60% 寬度 */
    padding-top: 1em; /* 增加頂部內邊距以對齊文字和影片 */
}

/* 確保文字容器內的段落樣式正確 */
.grandma-text-box p {
    font-family: 'Noto Serif TC', serif;
    font-weight: 460;
    font-size: 1.1em;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
    margin: 0;
}

/* 響應式設計：在小螢幕上將影片和文字改為垂直排列 */
@media (max-width: 768px) {
    .video-text-container {
        flex-direction: column; /* 將子元素改為垂直排列 */
        gap: 1em; /* 調整間距 */
    }
    .grandma-video,
    .grandma-text-box {
        width: 100%; /* 讓影片和文字都佔滿螢幕寬度 */
    }
    .grandma-text-box {
        padding-top: 0; /* 在垂直排列時移除頂部內邊距 */
    }
}

footer {
    width: 55%;
    height: auto;

    margin: 0 auto;
    margin-bottom: 50px;
}

a {
    color: #E2B277; /* 這個顏色值就是米黃色 */
    text-decoration: underline; /* 保持超連結下劃線，增加可讀性 */
    transition: color 0.3s ease; /* 添加顏色變化的過渡效果 */
}

a:hover {
    color: #CDB78C; /* 鼠標懸停時，顏色可以稍微變深，增加互動性 */
}

#progress-container {
    position: fixed; /* 固定在視窗中 */
    top: 0;
    left: 0;
    width: 6px; /* 設置進度條的寬度 */
    height: 100vh; /* 讓它佔滿整個視窗高度 */
    background-color: rgba(255, 255, 255, 0.2); /* 容器的半透明背景 */
    z-index: 9999; /* 確保它在所有內容上方 */
}

#progress-bar {
    width: 100%;
    height: 0; /* 初始高度為0，之後會由JavaScript改變 */
    background-color: #E2B277; /* 設置進度條的顏色為米黃色 */
    transition: height 0.1s linear; /* 添加平滑過渡效果 */
}