/* Google字體連結 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');

        html, body {
            height: 95vh; /* 設定頁面高度為視窗高度的95% */
            margin: 0; /* 移除預設邊距 */
            overflow: hidden; /* 不允許滾動軸 */
            font-family: 'Noto Sans TC', sans-serif; /* 使用Noto Sans TC字體 */
            background: url('backgroud.jpg') no-repeat center center fixed; 
            background-size: cover;
            color: #f0f0f0;
        }
        

        .image-placeholder {

            display: flex; /* 啟用 Flexbox */
            justify-content: center; /* 水平置中 */
            align-items: center; /* 垂直置中 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            width: 171px;
            height: 300px;
            object-fit: contain; /* 確保圖片不會被拉伸或壓縮 */
        }

        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        select, button {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        button {
            background-color: #6a5acd; /* 深紫色按鈕背景 */
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #7b68ee; /* 滑鼠懸停時的顏色 */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        }

        .container {
            min-height: calc(100vh - 150px); 
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            backdrop-filter: blur(5px); /* 背景模糊效果 */
        }

        .section-title {
            text-align: center;
            font-size: 2em;
            color: #fff;
            margin: 20px 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 文字陰影 */
        }

        .image-placeholder {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }

        #tarotDescription {
            height: 100%;
            overflow-y: auto; /* 啟用垂直滾動條 */
            background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
            color: #333;
            border-radius: 5px;
            padding: 15px; /* 增加內距以避免文字與邊緣太接近 */
            text-align: left;
            flex-grow: 1; /* 新增，使 tarotDescription 佔據所有可用空間 */
        }

        /* 電腦上的樣式 */
        @media screen and (min-width: 769px) {
            .flex-container {
                display: flex;
                align-items: flex-start;
            }

            .image-placeholder {
                flex: 1; /* 圖片占用剩餘空間的一部分 */
                margin-right: 20px; /* 圖片和右側內容的間隔 */
            }

            .text-content {
                flex: 2; /* 文字內容占用剩餘空間的兩部分 */
                display: flex;
                flex-direction: column; /* 讓 Cards 和文字區域垂直排列 */
                height: 100%; /* 新增，使 text-content 佔滿父容器的高度 */
            }
        }

        /* 行動裝置的樣式 */
        @media screen and (max-width: 768px) {

            html, body {
                font-size: 16px; /* 縮小字體大小 */
            }

            select, button {
                padding: 8px 10px; /* 減少填充 */
                font-size: 0.9em; /* 縮小字體大小 */
            }

            .section-title {
                font-size: 1.5em; /* 縮小標題字體 */
            }

            .container {
                padding: 10px; /* 減少容器的填充 */
            }

            .links-container {
                padding: 5px; /* 減少連結容器的填充 */
            }

            .language-link {
                padding: 3px 7px; /* 減少語言連結的填充 */
            }

            .image-placeholder {
                width: 120px; /* 調整圖片佔位符的寬度 */
                height: 210px; /* 調整圖片佔位符的高度 */
            }

            .flex-container {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .text-content {
                width: 100%; /* 元素寬度為100% */
            }

            .hidden-on-divination {
                display: none; /* 在占卜後隱藏元素 */
            }

        }

        /* 新增的 CSS 樣式 */
        .links-container {
            position: absolute; /* 設定為絕對定位 */
            bottom: 3vh; /* 置底 */
            width: 100vw;
            text-align: center;
            padding: 10px;
            margin-top: 30px;
            border-radius: 5px;
            backdrop-filter: blur(5px);
        }

        .language-link {
            color: #f0f0f0;
            text-decoration: none;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            transition: background-color 0.3s ease;
        }

        .language-link:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .link-separator {
            color: #f0f0f0;
            margin: 0 10px;
        }