/* 基本設定：讓背景圖片鋪滿全螢幕 */
body {
    margin: 0;
    padding: 0;
    height: 100vh; /* 讓身體高度等於視窗高度 */
    display: flex;
    flex-direction: column; /* 讓內容垂直排列 */
    align-items: center;    /* 水平置中 */
    justify-content: center; /* 垂直置中 */
    
    /* 背景圖片設定 */
    background-image: url('background.jpg');
    background-size: cover;      /* 自動調整圖片大小以填滿螢幕 */
    background-position: center; /* 圖片對齊中心 */
    background-repeat: no-repeat;
    
    font-family: "Microsoft JhengHei", sans-serif; /* 設定繁體中文字體 */
}

/* 標題樣式 */
h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 加點陰影，不然背景太亮會看不清 */
    margin-bottom: 30px;
}

/* 選單樣式：移除清單預設的點點 */
.my-menu {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column; /* 讓按鈕垂直排列 */
    gap: 20px;              /* 按鈕之間的間距 */
}

/* 把連結偽裝成精緻的按鈕 */
.my-menu a {
    text-decoration: none;  /* 去掉底線 */
    color: #333;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
    padding: 15px 30px;
    border-radius: 50px;    /* 讓兩邊圓圓的 */
    font-weight: bold;
    transition: 0.3s;       /* 增加動畫效果 */
    display: inline-block;
    min-width: 200px;
    text-align: center;
}

/* 滑鼠移上去的特效 */
.my-menu a:hover {
    background-color: #ffeb3b; /* 變黃色 */
    transform: scale(1.1);     /* 稍微放大，看起來比較活潑 */
}

/* 最底下的「關於」連結 */
footer {
    position: absolute;
    bottom: 20px;
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.7;
}

footer a:hover {
    opacity: 1;
}