@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

html, body {
    font-family: 'Noto Sans TC', sans-serif;
    margin: 0 auto;
    max-width: 100%;
    
}

@media (max-width: 1279px) {
    #container {
        max-width: 1279px; /*設定最大寬度以改善閱讀體驗*/
        height: 100vh;
        font-size: 4vmin;
        /*background-color: gray;*/
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    #container {
        max-width: 1919px; /*設定最大寬度以改善閱讀體驗*/
        height: 100vh;
        font-size: 6vmin;
        /*background-color: gray;*/
    }
}

@media (min-width: 1920px) {
    /* 當螢幕寬度大於或等於 769px 時應用此樣式 */
    #container {
        /*background-color: lightgreen;*/
        font-size: 8vmin;
    }
}


.header {
    /*width: 100vw;*/
    height: 10vh;
    line-height: 10vh;
    font-size: 8vmin;
    text-align: center;
    display: flex;
    align-items: center;
    color: #ffffff;
    background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%);
    /*border: 1px solid blue;*/
}

    .header img {
        max-height: 9vh;
        padding-left: 10px;
    }

.footer {
    /*max-width: 100%;*/
    max-height: 8vh;
    line-height: 8vh;
    font-size: 3vmin;
    text-align: center;
    /*border: 1px solid blue;*/
    font-weight: 500;
    background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%);
}

    .footer img {
        max-height: 6vh;
    }

.Content {
    height: calc((100vh - 10vh - 8vh));
}