.showmenu {
    display: none;
  }

.flex-direction-column {
    flex-direction: column;
}

aside {
    width: 200px !important;
    padding: 0 20px;
}
article {
    width: calc(100% - 300px) !important;
}

/*Bootstrap Grid LG*/
@media (max-width:1200px){
    .flex-direction-column-1200 {
        flex-direction: column;
    }
}

@media (max-width:1200px) {
    .showmenu {
        display: block;
        padding: 1em;
        text-decoration: none;
        font-size: 1.5rem; /* 增大選單按鈕字體 */
    }

    .navcs {
        display: none;
    }

    .navcs li {
        border-right: 0px solid #83643866;
    }

    .navcsPhone li {
        justify-content: center;
        text-align: center;
        margin: 0;
        font-size: 1.25rem; /* 增大手機導航選項字體 */
        padding: 0.5rem 0;
    }

    .navcsPhone {
        display: block;
        flex-direction: column !important;
        margin-top: 70px;
    }

    .had {
        flex-direction: column;
    }

    #menu {
        display: block !important;
    }
    #HeadTitle_1{
        display: block;
    }
    .HeadTitle{
        font-size: 2.5rem;
    }
    aside,.menu-content {
        width: 100% !important;
        padding: 0;
    }

    article {
        width: 100% !important;
    }
    MenuImg{
        width:75% !important;
    }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .menuButtonOutSide{
        position:relative;
    }
    .HomeURLImage {
        flex: 1 1 calc(50% - 10px);
    }
    
    /* 改善小螢幕上的讀取性 */
    .navcsPhone li {
        font-size: 1.5rem; /* 在中等手機上進一步增大導航字體 */
        padding: 0.75rem 0; /* 增加點擊區域 */
    }
    
    /* 確保標題在手機上易讀 */
    .HeadTitle {
        font-size: 2.75rem; /* 增大標題尺寸 */
    }
    
    /* 確保手機選單按鈕夠大且清晰可見 */
    .showmenu {
        padding: 0.9em;
        font-size: 1.6rem; /* 增大選單圖標尺寸 */
    }

    /* 確保頁面上的按鈕有足夠大的觸控區域 */
    .btn, button {
        padding: 0.8em 1.2em;
        min-height: 44px; /* 確保觸控目標足夠大 */
    }
}

@media (max-width: 576px) {
    .HomeURLImage {
        flex: 1 1 100%;
    }
    
    .HeadTitle {
        font-size: 2.5rem;
    }
    
    /* 增強在超小螢幕上選單的可讀性，保持大字體 */
    .navcsPhone li {
        font-size: 1.4rem; /* 在小手機上仍保持大字體 */
        padding: 0.75rem 0;
        margin-bottom: 0.25rem;
    }
    
    /* 縮小超小螢幕上的導航文字間距並增加清晰度 */
    .navcs a {
        letter-spacing: 0.02em;
        font-weight: 600;
    }
    
    /* 增加導航選項間的間距，便於點擊 */
    .navcs li, .navcsPhone li {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 0.5rem;
    }
}

/* 調整暗模式下的文字色彩對比 */
@media (prefers-color-scheme: dark) {
    .navcs a, .navcsPhone a {
        color: rgba(255, 255, 255, 0.95);
    }
    
    .navcs a:hover, .navcsPhone a:hover {
        color: #fff;
    }
}