* {
    font-family: 'Noto Sans TC', sans-serif;
}

body::before {
    display: block;
    content: ' ';
    height: 48px;
}
.navbar-brand{
    font-size: 5vh;
}
.btn-primary {
    background: #ff9800;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    transition: 0.3s;
}
.btn-close{
    display: flex;
    align-items: end;
}
.btn-close:hover{
    background-color: #ff5f56; /* 滑鼠移過去變紅色 */
    color: white;
}

.btn-primary:hover {
    background: #e68a00;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white;
}

.facebook-link {
    display: inline-block;
    margin: 0 10px;
}

.facebook-icon {
    margin-bottom: 20px;
    max-width: 40px;
    height: auto;
}

.instagram-icon {
    max-width: 40px;
    margin-bottom: 20px;
    height: auto;
}

.facebook-linkNAV {
    padding: 0;
    display: flex;
    align-items: center;
}

.facebook-iconNAV {
    margin: 0;
    max-width: 40px;
    height: auto;
}

.instagram-linkNAV {
    padding: 0;
    display: flex;
    align-items: center;
}

.instagram-iconNAV {
    margin: 0;
    max-width: 40px;
    height: auto;
    filter: grayscale(100%);
}

.vscode-background {
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.code-editor-card {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.editor-header {
    background: #323233;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    align-items: center;
}

.editor-buttons {
    display: flex;
    gap: 8px;
    margin-right: 20px;
}

.editor-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.editor-button.red {
    background: #ff5f56;
}

.editor-button.yellow {
    background: #ffbd2e;
}

.editor-button.green {
    background: #27c93f;
}

.editor-title {
    color: #858585;
    font-size: 0.9rem;
}

.editor-content {
    padding: 20px;
    display: flex;
    min-height: 200px;
}

.line-numbers {
    color: #858585;
    padding-right: 20px;
    border-right: 1px solid #404040;
    user-select: none;
}

.line-numbers span {
    display: block;
    line-height: 2;
    font-size: 1rem;
}

.code-content {
    color: #fff;
    font-family: 'Consolas', monospace;
    padding: 1rem;
    width: 100%;
}

.code-content .code-line {
    color: inherit;
    opacity: 1;
    visibility: visible;
}

@keyframes typing {
    from {
        width: 0%;
        opacity: 1;
        visibility: visible;
    }

    to {
        width: 100%;
        opacity: 1;
        visibility: visible;
        border-right: none;
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #ffffff
    }
}

.text-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ffffff;
    animation: typing 3.5s steps(42, end), blink 0.5s step-end infinite;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    font-size: 4rem;
    color: #ffffff;
}

.hidden {
    display: none;
}

.text-typing.finished {
    border-right: 2px solid #ffffff;
    animation: none;
}

.text-typing-delayed {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid gray;
    animation: typing 3.5s steps(42, end) forwards, blink 0.35s step-end infinite;
}

.text-typing-delayed:nth-child(2) {
    animation-delay: 2s;
}

.text-typing-delayed:nth-child(3) {
    animation-delay: 3s;
}

.text-typing-delayed:nth-child(4) {
    animation-delay: 4s;
}

.text-typing-delayed:nth-child(5) {
    animation-delay: 5s;
}

.text-typing-delayed:nth-child(6) {
    animation-delay: 6s;
}

.text-typing-delayed:nth-child(7) {
    animation-delay: 7s;
}

.text-typing-delayed:nth-child(8) {
    animation-delay: 8s;
}

.text-typing-delayedd {
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ffffff;
    animation: typing 3.5s steps(42, end), blink 0.5s step-end infinite;
    animation-delay: 15s;
    width: fit-content;
    font-weight: bold;
}

.text-typing-delayedd.visible {
    opacity: 1;
    visibility: visible;
}

.text-typing-delayedd.finished {
    border-right: 2px solid #ffffff;
    animation: none;
}

.huge-text {
    font-size: 5vh;
    color: #ffffff;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer {
    margin-top: 20px;
    background-color: cadetblue;
    color: #ffffff;
}

.fade-up-item {
    opacity: 0;
    transition: all 0.5s ease;
    transform: translateY(20px);
}

.fade-up-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.signup-table {
    max-width: 960px;
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
}

.signup-table th {
    background-color: cornflowerblue;
    padding: 10px;
    font-size: 24px;
    font-weight: bolder;
    border: 1px solid black;

}

.signup-table td {
    padding: 10px;
    font-size: 24px;
    border: 1px solid black;
}

.post-label {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
}

.post-text {
    font-size: 24px;
    max-width: 900px;
    text-align: start;
    margin: 5px auto;
}

.circle-container {
    position: relative;
    width: 500px;
    /* 圓的大小 */
    height: 500px;
    margin: 50px auto;
    /* 水平置中 */
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* 加點陰影比較立體 */
    background-color: #fff;
}

/* 2. 四個象限的共同設定 */
.quarter {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    /* 讓文字置中 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    /* 動畫速度 */
    cursor: pointer;
    color: white;
    padding: 20px;
    /* 避免文字貼邊 */
    box-sizing: border-box;
}

/* 3. 個別設定位置與顏色 */
/* 左上 */
.q1 {
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
    background-color: #FF6B6B;
    /* 紅色 */
}

/* 右上 */
.q2 {
    top: 0;
    right: 0;
    border-radius: 0 100% 0 0;
    background-color: #4ECDC4;
    /* 青色 */
}

/* 左下 */
.q3 {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 100%;
    background-color: #FFE66D;
    /* 黃色 */
    color: #555;
    /* 黃色背景字要深色才清楚 */
}

/* 右下 */
.q4 {
    bottom: 0;
    right: 0;
    border-radius: 0 0 100% 0;
    background-color: #1A535C;
    /* 深藍 */
}

/* 4. 滑鼠移過去的特效 (Hover) */
.quarter:hover {
    transform: scale(1.1);
    /* 稍微放大 */
    z-index: 100;
    /* 浮到最上面 */
}

/* 讓文字不要跟著放大太多，保持優雅 */
.quarter h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.quarter p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* 5. (選用) 中間的小圓圈 - 為了美觀 */
.center-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-weight: bold;
    color: #333;
}

.detail-card {
    position: absolute;
    width: 300px;
    /* 卡片寬度 */
    background: white;
    color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
    text-align: left;

    /* 隱藏設定 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    pointer-events: none;
    /* 防止滑鼠誤觸卡片造成閃爍 */
}

.detail-card h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.detail-card p {
    margin: 0;
    line-height: 1.4;
}

.detail-card img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 8px;
}

/* --- 定義四個方位的卡片位置 --- */

/* Q1 (左上) 的卡片：出現在左邊 */
.q1 .detail-card {
    right: 120%;
    /* 貼在扇形的左邊 */
    bottom: 20%;
    /* 稍微往上 */
    transform: translateX(20px);
    /* 預備動畫位置 */
}

/* Q2 (右上) 的卡片：出現在右邊 */
.q2 .detail-card {
    left: 120%;
    bottom: 20%;
    transform: translateX(-20px);
}

/* Q3 (左下) 的卡片：出現在左邊 */
.q3 .detail-card {
    right: 120%;
    top: 10%;
    transform: translateX(20px);
}

/* Q4 (右下) 的卡片：出現在右邊 */
.q4 .detail-card {
    left: 120%;
    top: 10%;
    transform: translateX(-20px);
}

/* --- 觸發顯示 --- */
.quarter:hover .detail-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    /* 滑回原位 */
}

/* 6. 中間的小圓圈 (維持原樣) */
.center-circle {
    position: absolute;
    width: 140px;
    height: 140px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    /* 最高層級 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
@keyframes shining {
    0%{
        border-color:rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);}
    50%{
        border-color:rgb(255, 255, 255);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
                    0 0 20px rgba(255, 255, 255, 0.3);}
    100%{
        border-color:rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
}
.countdown-item {
    background: rgba(0, 0, 0, 0.6); /* 半透明黑底 */
    border: 2px solid #00d2ff;       /* 科技藍邊框 (可改成你的橘色 #ff9800) */
    border-radius: 10px;
    padding: 15px 20px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3); /* 發光效果 */
    backdrop-filter: blur(5px);
}

/* 數字樣式 */
.countdown-item .number {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Consolas', monospace; /* 用等寬字體比較像計時器 */
    line-height: 1;
}

/* 文字標籤 (天/時/分/秒) */
.countdown-item .label {
    font-size: 1rem;
    color: #ccc;
    margin-top: 5px;
}
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f2027; /* 深藍黑色背景 */
    z-index: 99999; /* 確保蓋住所有東西 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s; /* 淡出動畫 */
}

/* 2. 信件容器 (負責進場動畫) */
.letter-container {
    cursor: pointer;
    animation: flyIn 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* 飛入特效 */
}

/* 3. 信封卡片設計 */
.envelope {
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    border: 1px solid #ddd;
    transform: rotate(-5deg); /* 稍微歪一點比較像丟進來的 */
    transition: transform 0.3s;
}

.envelope:hover {
    transform: rotate(0deg) scale(1.05); /* 滑鼠移上去轉正放大 */
}

/* 5. 內容文字 */
.letter-content h2 {
    font-family: 'Impact', sans-serif; /* 比較有張力的字體 */
    color: #333;
    margin-bottom: 15px;
}

.letter-content p {
    color: #555;
    font-family: 'Noto Sans TC', serif; /* 手寫感字體更好，如果有的話 */
    font-size: 1.1rem;
}

.click-hint {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #aaa;
    letter-spacing: 2px;
    animation: blink 1.5s infinite;
}

/* --- 動畫定義 --- */
/* 從右上角飛進來 */
@keyframes flyIn {
    0% {
        transform: translate(100vw, -100vh) rotate(45deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) rotate(-5deg) scale(1);
        opacity: 1;
    }
}



@media (max-width:1500px) {
    .navbar-brand{
        font-size: 2vh;
    }
}
/* --- 手機版專用設定 (美化版) --- */
@media (max-width: 768px) {
    .letter-content p {
        font-size: 0.95rem;
    }
    .envelope {
        max-width: 400px;
    }
    .countdown-item {
        min-width: 70px;
        padding: 10px;
    }
    .countdown-item .number {
        font-size: 2rem;
    }
    /* 1. 外框：改成 Grid 網格排版 (田字型) */
    .circle-container {
        width: 100% !important;
        height: auto !important;
        border-radius: 0;
        background: transparent;
        margin: 0;
        
        /* 關鍵：使用 Grid 排出 2x2 */
        display: grid;
        grid-template-columns: 1fr 1fr; /* 切成兩欄 */
        gap: 15px; /* 方塊之間的間距 */
        padding: 15px;
        z-index: 0;
    }

    /* 2. 四個區塊：變成可愛的圓角方塊 */
    .quarter {
        position: relative !important; /* 取消絕對定位，讓它乖乖排隊 */
        width: 100% !important;
        height: 160px !important;      /* 固定高度，讓四個一樣大 */
        top: auto !important;     /* 歸零 */
        bottom: auto !important;  /* 歸零 */
        left: auto !important;    /* 歸零 */
        right: auto !important;   /* 歸零 */
        transform: none !important; /* 把原本的旋轉或位移拿掉 */
        /* 四個角都變圓，像 APP 圖示 */
        border-radius: 10px !important; 
        
        /* 內容置中 */
        display: flex;
        
        z-index: 1;
        opacity: 1;
        visibility: visible;
        border: 2px solid white;
        animation: shining 2s infinite ease-in-out;;
    }

    /* 3. 中間的小圓圈 (LOGO) */
    /* 因為變田字型了，中間的圓圈會擋住，我們把它移到最上面或是縮小放中間 */
    .center-circle {
        display: none; /* 手機版建議隱藏，因為上面的標題已經有寫「活動特色」了 */
    }

    /* =========================================
       4. 手機版的詳細卡片 (變成螢幕正中央的彈窗)
       ========================================= */
    .detail-card {
        /* 改成固定在螢幕正中間 */
        position: fixed !important;
        width: 85% !important;   /* 寬度 */
        height: auto !important; /* 高度自動長大 */
        max-height: 80vh;        /* 最多佔螢幕 80% 高，避免超出畫面 */
        top: 20% !important;
        left: 10% !important;
        z-index: 100 !important; /* 保證在最最最上層 */
        
        /* 加強陰影，讓它看起來真的浮起來 */
        background-color: white;
        
        /* 預設還是隱藏 */
        opacity: 0 !important;
        visibility: hidden;
        
    }


    /* 5. 手機版觸發效果：點擊(或按著)時顯示 */
    /* 這裡用 :active 來模擬點擊，或是保留 :hover (手機點一下也會觸發 hover) */
    .quarter:active .detail-card,
    .quarter:focus .detail-card ,
    .quarter.show .detail-card{
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important; /* 彈出來的效果 */
        pointer-events: auto;
    }
    .quarter:hover,
    .quarter:focus,
    .quarter:active{
        z-index: 5;
    }
    .carousel-caption h1{
        font-size: 24px;
    }
    .carousel-caption p{
        font-size: 16px !important;
    }
    .feature-item{
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .huge-text{
        font-size: 3vh;
    }
    .envelope {
        width: 500px; /* 電腦版大一點 */
        padding: 50px;
    }
}