@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
:root{
    --mycolor01: #7F9871;
    --mycolor02: #9795A3;
    --mycolor03: #C94F44;
    --mycolor04: #261326;
    --mycolor05: #f1b978;
    --mycolor06: #f3efb3;
    --mywhite: #e9e7df;
}
.box01{
    height: 180px;
    background-color: var(--mycolor02);
    border: 3px solid var(--mycolor03);
    line-height: 180px;
    text-align: center;
    font-size: 36px;
    font-weight: bolder;
    color: var(--mycolor06);
}
.box02{
    height: 120px;
    background-color: var(--mycolor04);
    border: 3px solid var(--mycolor03);
    line-height: 120px;
    text-align: center;
    font-size: 36px;
    font-weight: bolder;
    color: var(--mycolor01);
}

.box03{
    background-color: var(--mywhite);
}
.box03:hover{
    background-color: var(--mycolor06);
    border: 3px solid var(--mycolor04); 
}

.mybtn{
    display: block;
    border: 3px solid var(--mycolor04); 
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--mycolor06);
    color: var(--mycolor01);
}

.bg-cover{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}



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

.demo {
    margin: 10px;
    padding: 10px;
    background-color: var(--mycolor06);
    border: 2px solid var(--mycolor01);
    color: var(--mywhite);
    color: var(--mycolor04);
}
.fw-100{
    font-weight: 100;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-700{
    font-weight: 700;
}
.fw-900{
    font-weight: 900;
}