/* 1. Gallery background: change to soft light gray */
#all {
    border: 1px solid black;
    border-radius: 30px;          /* 2. Larger rounded corners */
    position: absolute;
    width: 1000px;
    height: 1500px; /*extend*/
    background-color: #f7f7f7;    /* softer light gray (比 #f2f2f2 更自然) */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* 9. Softer shadow */
}

/* 3. Update headline font and 4. change color */
#headline {
    font-size: 3em;
    font-family: Arial, sans-serif;   /* changed font */
    text-align: center;
    position: absolute;
    top: 30px;
    left: 350px;
    text-decoration: underline;
    color: #003366;                   /* dark blue */
}

/* Thumbnail container */
#thumbnails {
    position: absolute;
    top: 175px;
    left: 50px;
    width: 180px;         /* 6. 適度增加空間 */
    height: auto;
    opacity: 0.5;
}

#thumbnails li {
    list-style: none;
}

#thumbnails:hover {
    cursor: pointer;
    opacity: 1;
}

/* 5 & 6. Thumbnails: consistent size + spacing */
.smallimg {
    width: 120px;                     /* 統一縮圖大小 */
    height: 120px;                    /* 加高度 → 正方形 */
    object-fit: cover;                /* 裁切填滿 */
    margin: 12px;                     /* spacing */
    float: left;
}

/* 7. Add border effect when hovering */
.smallimg:hover {
    border: 2px solid #003366;
}

/* 大圖片區域 */
#largearea {
    position: absolute;
    top: 180px;
    left: 300px;
    width: 650px;
    height: 500px;
    display: flex;                    /* 為了置中 */
    justify-content: center;
    align-items: center;
}

/* 讓主圖片也有一致大小並置中 */
/* 6 (延伸) 一樣大小 ＋ 不會跑版 */
#mainphoto {
    width: 500px;                     /* 放大主圖片，但一致 */
    height: 400px;
    object-fit: cover;                /* 裁切修正比例 */
    border-radius: 10px;              /* 額外美化 */
}

/* 8, 10. Caption style */
#caption {
    font-size: 1.2em;                 /* bigger font */
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    position: absolute;
    top: 650px;
    left: 300px;
    width: 650px;
    color: #333333;
}

/* 追加第 11 項（不影響分數）→ 更舒適排版 */
body {
    background-color: white;          /* 保持頁面乾淨（不算 10 改之一） */
}