/* 1. 元素選擇器 (Element Selector) */
body {
    font-family: "Microsoft JhengHei", sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; 
}

/* 2. ID 選擇器 (ID Selector) - 應用在 Header 並結合背景屬性 */
#main-header {
    color: #ffffff;
    padding: 100px 0;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

    /* --- 二、Lesson 8 背景相關 6 個屬性 --- */
    background-color: #2c3e50;                              /* 1. 背景顏色 (底色) */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1497215728101-856f4ea42174'); /* 2. 背景圖片 */
    background-repeat: no-repeat;                           /* 3. 不重複 */
    background-position: center center;                     /* 4. 置中 */
    background-attachment: fixed;                            /* 5. 固定背景 (視差效果) */
    background-size: cover;                                 /* 6. 覆蓋整個區塊 */
}

/* 3. Class 選擇器 (Class Selector) */
.nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.highlight {
    color: #e67e22;
    background-color: #fff3e0;
    padding: 2px 5px;
    border-radius: 4px;
}

/* 4. 虛擬類別 (Pseudo-class) */
.nav-link:hover {
    color: #f1c40f;
    transform: scale(1.1);
    transition: 0.3s;
}

.skill-list li:first-child {
    color: #00233a; /* 第一個技能項目變色 */
    font-weight: bold;
}

/* 5. 虛擬元素 (Pseudo-element) */
h2::before {
    content: "📍 "; /* 在標題前加入圖示 */
}

h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #3498db;
    margin-top: 10px;
    border-radius: 2px;
}

/* =========================================
   其他樣式優化
   ========================================= */

main {
    width: 90%;
    max-width: 900px;
    margin: -50px auto 50px; /* 向上偏移產生重疊感 */
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative; /* 確保在背景之上 */
}

.profile-img {
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.5s ease;
}

.profile-img:hover {
    transform: rotate(360deg); /* 碰觸時旋轉一圈 */
}

footer {
    background-color: #333;
    color: #ccc;
    text-align: center;
    padding: 30px;
    font-size: 0.9rem;
}

/* 連結基本設定 */
a {
    text-decoration: none;
    color: #0000ff;
}

.corner-decoration {
    /* 使用多重背景：分別放入四個角落圖示 (這裡以 icon 網址示意) */
    background-image: 
        url('https://cdn-icons-png.flaticon.com/512/1046/1046774.png'), /* 左上 */
        url('https://cdn-icons-png.flaticon.com/512/1046/1046774.png'), /* 右上 */
        url('https://cdn-icons-png.flaticon.com/512/1046/1046774.png'), /* 左下 */
        url('https://cdn-icons-png.flaticon.com/512/1046/1046774.png'), /* 右下 */
        url('https://www.transparenttextures.com/patterns/cubes.png');  /* 底圖小圖裝飾 */

    background-position: 
        top left, 
        top right, 
        bottom left, 
        bottom right, 
        center; /* 底圖置中 */

    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat, 
        no-repeat, 
        repeat; /* 底圖裝飾重複鋪滿 */

    background-size: 
        50px, 
        50px, 
        50px, 
        50px, 
        auto;

    padding: 60px; /* 留出空間給花邊 */
}

/* 1. LOGO 設計 */
#my-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 2rem;
    color: white;

    /* 漸層背景 */
    background: linear-gradient(135deg, #ff0008 0%, #401633 99%, #fecfef 100%);
    
    /* 圓角 */
    border-radius: 50px;
    
    /* 盒子陰影：x軸, y軸, 模糊距離, 顏色 */
    box-shadow: 0 8px 15px rgba(17, 0, 255, 0.3);
    
    /* 文字陰影 */
    text-shadow: 1px 1px 2px rgb(255, 221, 0);
    
    border: 2px solid #fff;
}

/* 2. 標題美化 */
.fancy-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 2.5rem;
    background: linear-gradient(to right, #ffffff, #ffcc00);
    
    /* 1. 先寫廠商前綴 (針對 Chrome, Safari) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 2. 加上標準屬性 (解決你的警告訊息) */
    background-clip: text; 
}