/* ---- VARIABLES CSS */
:root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --black-color: hsl(220, 24%, 12%);
    --black-color-light: hsl(220, 24%, 15%);
    --black-color-lighten: hsl(220, 20%, 18%);
    --white-color: #fff;
    --body-color: hsl(220, 100%, 97%);
    --nav-bg-color: rgba(255, 255, 255);
    --nav-bg-color-hover: rgb(190, 232, 252);
    --nav-font-color: rgba(0, 0, 0);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: .938rem;

    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --nav-font-size: 0.81rem;
    }
}

html,
body {
    background-color: rgb(245, 243, 240);
    overflow-x: hidden;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    height: 100%;
    margin: 0;
}


.header * {
    z-index: 10;
}

/* ----BASE---- */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.body_content {
    min-height: calc(100% - 50px);
    /*減去footer高度*/
}

.footer {
    height: 50px;
    /*設定footer本身高度*/
    width: 100%;
    background-color: rgba(51, 51, 51, 1);
    color: var(--white-color);
    text-align: center;
}