/* 基礎屬性與字體 */
body {
    font-family: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
    line-height: 1.8;
    color: #333333;
    background-color: #eaf3ff; /* 整體背景色 */
    margin: 0;
    padding: 0;
}

header {
    background-color: #7b94ac;
    color: #ffffff;
    padding: 50px 0; /* 內距 */
    text-align: center;
}

/* 區塊大小與邊距 (Box Model) */
main {
    width: 90%;          /* 寬度設定 */
    max-width: 850px;    /* 最大寬度限制 */
    margin: 30px auto;   /* 區塊置中 (上下 30px, 左右自動) */
    padding: 40px;       /* 內部留白 */
    background-color: #ffffff;
    border-radius: 12px; /* 圓角 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 區塊陰影 */
}

section {
    margin-bottom: 30px; /* 區塊間距 */
    padding-bottom: 20px;
}

/* 選擇器進階運用 */

/* ID 選擇器 */
#about {
    border-left: 6px solid #3498db; /* 左側裝飾線 */
    padding-left: 25px;
}

/* Class 選擇器 */
.profile-img {
    border-radius: 50%; /* 圓形 */
    border: 4px solid #3498db;
    margin: 20px 0;
    transition: 0.3s; /* 動畫過渡 */
}

.highlight {
    color: #e67e22; /* 強調顏色 */
    font-size: 1.25rem;
}

/* Pseudo-class (偽類) */
nav ul li a:hover {
    color: #3498db;
    text-decoration: underline;
}

.profile-img:hover {
    transform: rotate(5deg) scale(1.1); /* 移入時旋轉並放大 */
}

/* Pseudo-element (偽元素) */
h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #3498db;
    margin-top: 8px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #dee2e6;
    color: #555;
}