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

*{
    background-color: #F1E5D1;
}

body{
    font-family: Caveat,  "Not+Sans+TC", sans-serif;
    letter-spacing: 1px;
    margin: 0;
    color:white;
    line-height:1.4;
    /*animation: fade 1.5s linear forwards;*/
}

/*@keyframes fade{
    0%{opacity: 0;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}/*

/*標題*/
.wrapper-content{
    background-color: #03506F;
    border:5px solid gray;
    height: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topic{
    background-color: #03506F;
    font-size: 230%;
    margin-left: 1%;
    line-height:1;
}

.header-nav{
    background-color: #03506F;
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.nav_text{
    letter-spacing: 3px;
}

a{
    text-decoration: none;
    background-color: #03506F;
    font-weight: 800;
    color: white;
}
.pagination{
    flex:1;
    font-size: 140%;
    text-align: center;
    margin-left: 1%;
    margin-right: 1%;
}
.pagination:hover{
    transition: all 0.3s;
    color: gray;
}

/*內容*/
.section-primary{
    display: flex;
}

.wrapper-primary-text{
    color: #03506F;
    margin: 8% 5% 5% 5%;
    font-size: 250%;
    flex: 3;
}

.link-button{
    text-align: center;
    background-color: #03506F;
    color:white;
    font-size: 50%;
    padding: 1% 10% 1% 10%;
    border-radius: 20px;
    border-color: none;
}
.link-button:hover{
    background-color: gray;
    border-color: none;
}

.primary_main-img{
    margin-left: 10%;
    width: 40%;
    height: 40%;
}

footer{
    margin-top: 10%;
}
.wrapper-content-footer{
    background-color: #03506F;
    border:5px solid gray;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-list{
    display: flex;
    flex-direction: column;
    background-color: #03506F;
    color: white;
    margin-left: 3%;
    font-size: 200%;
    font-weight: 800;
}
.navigation-text-link{
    flex:1;
    text-align: left;
    background-color:#03506F;
    color:white;
    font-size: 60%;
    font-weight: 800;
}
.navigation-text-link:hover{
    transition: all 0.3s;
    color:gray
}
/*about us*/
.about-content{
    text-align: center;
    color: #03506F;
    font-size: 230%;
    font-weight: 800;
    margin-top: 12%;
    border-radius: 10px;
}

.wrapper-image-about{
    display: flex;   
    flex-wrap: wrap; 
}
.Image-about{
    flex:1;
    align-items: center;
    margin-top:2%;
    margin-left:1%;
    margin-right: 1%;
    width: 10%;
}
.teammember-about{
    text-align: center;
    display: flex;
}
.member-detail{
    flex:1;
    font-size:150%;
    background-color: #03506F;
    color: white;
    border-radius: 20px;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 2%;
    margin-right: 2%;
}