html{
    width: 100%;
    height: 100%;
}

body{
    height: calc(100% - var(--headerSize) - var(--footerSize));
    margin: 0;
    color: var(--primaryfontColor);
    font-family: var(--primaryfontFamily);
}

a{
    text-decoration: none;
    color: var(--primaryfontColor);
}

:root{
    --backgroundColor: #0c2a13;
    --secondaryColor: #143e1d;

    --footerColor: #0c2a13;

    --buttonColor: #195527;
    --buttonHoverColor: #247537;

    --primaryPageColor: rgba(0, 0, 0, 0.46);
    --secondaryPageColor: #fdf7ed;

    --backgroundColorRecette: rgba(0, 0, 0, 0.32);
    --bordercolorRecette: #10130b;
    --backgroundColorRecetteText: #faffeb;

    --primaryfontColor: #ffffff;
    --secondaryfontColor: #000000;
    --primaryfontFamily: "BIZ UDPMincho Medium", serif;

    --borderColorButton: black;

    --headerSize: 10vh;
    --footerSize: 8vh;
    /*#3c5110*/
}

#backgroundSite{
    position: fixed;
    width: 100%;
    height: 100%;

    object-fit: cover;
    z-index: -10;
}


#header{
    width: 100%;
    height: var(--headerSize);

    margin-top: calc(var(--headerSize)*-1);

    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--backgroundColor);

    z-index: 20;

    border-bottom: black solid 1px;
}

#headerLogo{
    width: 15vh;
    position: relative;
}

#headerTitle{
    margin-left: 20px;

    color: #ffffff;

    font-size: 2.5vh;
    text-decoration: none;
}

#headerTitle:hover{
    color: #c5c5c5;
}

#headerLinks{
    align-items: center;
    /*margin-right: 30px;*/
    display: flex;

}

#linkdivh
{
    display: flex;
    justify-content: center;
    align-items: center;

    border: 10px solid transparent;

    font-size: 2vh;
}

#linkdivh:hover{
    font-weight: bold;
    background-color: var(--secondaryColor);

    border: 10px solid var(--secondaryColor);
    border-radius: 50px;
}

#search-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

#headerSearch{
    width: 20vw;
    max-width: 500px;
    height: 3vh;
    min-height: 25px;

    margin-left: 10px; /* Pour le responsive*/

    padding-right: 5px;
    padding-left: 7px;

    font-size: 2vh;

    border: solid 1px black;
    border-radius: 50px;
    box-sizing: border-box;
}
#headerSearch::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background: url("data:image/svg+xml;utf8,<svg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 7.066 5.652a1 1 0 0 0-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 1 0 1.414 1.414L10 11.414l2.934 2.934a1 1 0 0 0 1.414-1.414L11.414 10l2.934-2.934a1 1 0 0 0 0-1.414z'/></svg>") no-repeat center;
    background-size: contain;
    height: max(1.6vh, 16px);
    width: max(1.6vh, 16px);
    position: relative;
}

#headerSearchsubmit{
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

#headerSearchsubmit:hover{
    background-color: var(--secondaryColor);
}

#headerSvg{
    width: max(2.4vh, 24px);
    height: max(2.4vh, 24px);
}



/*RESPONSIVE MEDIA*/

@media screen and (max-width: 930px)
{
    #linkdivh{ /* Enleve les links du header*/
        display: none;
    }
}

@media screen and (max-width: 580px)
{
    .hideSearch{ /* Enleve la barre search quand la sideBar est activée*/
        display: none !important;
    }
}