/* === 宇宙背景圖 === */
body {
    background-image: url('/img/odust.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #0a0a1a;
    /* 圖片載入前的底色 */
}

/* 讓主容器有半透明深色背景，文字依然清晰 */
.container--outer {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* 保持內容區域白色但稍微透明 */
.wrapper {
    background: rgba(255, 255, 255, 0.95);
}

/* Header 區域白底 */
.header {
    background: #fff;
}

/* Footer 深紫色 */
.footer {
    background: #4a148c;
    color: #fff;
}

/* Read more 按鈕深紫色 */
.btn {
    background: #4a148c;
}

.btn:hover {
    background: #311b92;
}

/* 導覽列（關於我那條）深紫色 */
.menu__btn {
    background: #4a148c;
}

.menu__list {
    background: #4a148c;
}

.menu__item:hover {
    background: #311b92;
}

.menu__item--active {
    background: #311b92;
}

/* 桌面版選單底線也改成深紫 */
@media screen and (min-width: 767px) {
    .menu {
        border-bottom-color: #4a148c;
    }
}

/* 手機裝置上使用 scroll 取代 fixed (iOS 相容) */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}