/* =========================================
   基本設定 (背景色、字的顏色、字體樣式、邊距)
   ========================================= */
body {
    font-family: Arial, Helvetica, sans-serif; /* 字體樣式 */
    background-color: #e6f7ff; /* 背景色：淡淡的藍色 */
    color: #333333; /* 字的顏色 */
    margin: 20px; /* 邊距 */
}

/* =========================================
   Header 區塊
   ========================================= */
header {
    background-color: #ffff99; /* 亮黃色背景，很有初學者的活力感 */
    padding: 15px; /* 內距 */
    border: 3px solid #ffcc00; /* 明顯的實線邊框 */
    text-align: center;
    border-radius: 10px;;
}

header h1 {
    font-size: 36px; /* 字體大小 */
    color: #0000cc; 
}

/* =========================================
   導覽列 (Class 選擇器)
   ========================================= */
.nav-bar ul {
    list-style-type: none;
    background-color: #cccccc;
    padding: 10px; /* 內距 */
    text-align: center;
}

.nav-bar ul li {
    display: inline-block; /* 新手最常用的橫向排列方式 */
    margin-right: 15px; /* 邊距 */
    background-color: white;
    border: 1px solid black;
    padding: 5px;
}

.nav-bar ul li a {
    text-decoration: none;
    color: black;
    font-size: 18px; /* 字體大小 */
}

/* =========================================
   Pseudo-class (虛擬類別選擇器)
   ========================================= */
/* 當滑鼠移到連結上時，改變背景色和字色 */
.nav-bar ul li a:hover {
    background-color: #ff9999; /* 變粉紅色 */
    color: white;
}

/* 控制圖示的區塊大小 */
.social-icon {
    width: 30px; 
}

/* =========================================
   Main 區塊 (Class 選擇器、區塊大小、邊距、內距)
   ========================================= */
.info-box {
    background-color: white; /* 背景色 */
    border: 2px solid #666666; /* 虛線邊框，展現學過不同 border 樣式 */
    padding: 20px; /* 內距 */
    margin-bottom: 20px; /* 邊距 */
    width: 80%; /* 區塊大小：寬度佔螢幕 80% */
}

.profile-pic {
    width: 200px; /* 區塊大小 */
    border: 2px solid black;
}

.school-name {
    color: blue;
    font-size: 20px;
}

.my-class {
    font-style: italic; /* 字體樣式：斜體 */
    color: green;
}

/* =========================================
   ID 選擇器
   ========================================= */
#experience {
    background-color: #ccffcc; /* 淺綠色背景 */
    border: 3px solid #009900; /* 點狀邊框 */
    padding: 20px;
    width: 80%; /* 區塊大小 */
}

/* =========================================
   Footer
   ========================================= */
footer {
    text-align: center;
    margin-top: 30px;
}