:root {
    --c-black-075: rgba(0, 0, 0, .75);
    --c-blue1--075: rgb(30, 90, 150, .75);
    --c-blue---050: rgba(10, 30, 60, .5);
    --c-brown1-000: rgba(225, 180, 105, 0);
    --c-brown1-010: rgba(225, 180, 105, .1);
    --c-brown1-025: rgba(225, 180, 105, .25);
    --c-brown2-050: rgba(150, 120, 90, .5);
    --c-brown2-075: rgba(150, 120, 90, .75);
    --c-brown3-100: rgba(210, 150, 90);
    --c-gray1-100: rgba(34, 34, 34);
    --c-gray2-025: rgba(153, 153, 153, .25);
    --c-gray2-050: rgba(153, 153, 153, .5);
    --c-gray2-100: rgba(153, 153, 153);
    --c-gray3-100: rgba(204, 204, 204);
    --c-gray4-100: rgba(221, 221, 221);
    --c-green1-000: rgba(215, 230, 165, 0);
    --c-green1-025: rgba(215, 230, 165, .25);
    --c-green1-050: rgba(215, 230, 165, .5);
    --c-green1-100: rgba(215, 230, 165);
    --c-green2-000: rgba(165, 190, 125, 0);
    --c-green2-025: rgba(165, 190, 125, .25);
    --c-green2-050: rgba(165, 190, 125, .5);
    --c-green2-075: rgba(165, 190, 125, .75);
    --c-green2-100: rgba(165, 190, 125);
    --c-orange-025: rgba(255, 225, 185, .25);
    --c-orange-100: rgba(255, 225, 185);
    --c-red----100: rgba(225, 105, 105);
    --f-family-001: 'Righteous', 'Noto Sans TC', sans-serif;
    --h-header: 10vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

html {
    font-family: var(--f-family-001);
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--h-header);
    overflow-x: hidden;
    position: relative;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 100vw;
    color: var(--c-black-075);
    padding-top: var(--h-header);
    background-image: url('/images/bg.png');
}

/*header*/
header {
    height: var(--h-header);
    width: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    position: fixed;
}

#box_nav {
    background: linear-gradient(180deg, var(--c-green2-075) 0%, var(--c-green2-050) 50%, var(--c-green2-000) 100%);
    transition: background 1s ease-in-out;
}

    #box_nav:hover {
        background: linear-gradient(180deg, var(--c-green2-075) 0%, var(--c-green2-050) 50%, var(--c-green2-025) 100%);
    }

#logo {
    height: 100px;
    width: 180px;
    background-image: url('/images/logo3.png');
    background-size: cover;
    background-position: center;
    margin-left: 10vw;
}

.navbar-toggler {
    margin-right: 10vw;
}

#navbar {
    justify-content: end;
    margin-right: 10vw;
}

.link:hover, .bi:hover {
    color: var(--c-brown3-100) !important;
}

/*section*/
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90vh;
    width: 100%;
    margin-top: var(--h-header);
}

/*footer*/
footer {
    height: 20vh;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(180deg, var(--c-brown1-000) 0%, var(--c-brown1-025) 20%, var(--c-brown2-050) 60%, var(--c-brown2-075) 100%);
    text-align: center;
}

/*RWD*/
@media(max-width: 576px) {
    #box_nav {
        background: linear-gradient(180deg, var(--c-green2-075) 0%, var(--c-green2-050) 50%, var(--c-green2-025) 100%);
    }

    #navbar {
        margin-right: 15vw;
    }

    .nav-item {
        margin-right: -5vw;
    }

    .nav-link {
        text-align: end;
    }

    #box_search {
        width: auto;
        right: 5vw;
    }

    footer {
        height: 30vh;
    }
}

/*animation*/
@keyframes ani_btn {
    0% {
    }

    50% {
        transform: scale(1.1);
    }

    100% {
    }
}