/*************************************************************************/
/*              FICHIER CSS COMMUN AU DIFFÉRENTES PAGES DU SITE          */
/*************************************************************************/

/*************************************************************************/
/*                             Général                                   */
/*************************************************************************/
body{
    background-color: #AB7A44;
    font-family: "Gabriela", serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.btn{
    background-color: #5A3D21;
    color: #EAD6BF;
    font-family: "Gabriela", serif;
    text-decoration: none;
    border-radius: 25px;
    border: 2px #5A3D21 solid;

    &:hover{
        color: #5A3D21;
        border: 2px #5A3D21 solid;
        background-color: #EAD6BF;
    }
}
/*************************************************************************/
/*                              Navigation                               */
/*************************************************************************/
nav{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.logo_name{
    margin-right: -50px;
    display: flex;
    align-items: center;
    color: #D2B595;
}

.logo_name img{
    display: flex;
    width: 25%;
    height: 25%;
}

.bar{
    border-radius: 50px;
    background-color: #d2b5957a;
    width: 50%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search_bar{
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-left: 15px;
    width: 35%;
    border-radius: 50px;
    background-color: #5A3D21;
}

input{
    caret-color: #F4EDDF; /*Permet de modifier la couleur du curseur d'écriture */
    color: #F4EDDF;
    height: 30px;
    background-color: #5A3D21;
    border: none;
    border-radius: 50px;

    &::placeholder{
        color :  #F4EDDF;
        font-family: "Gabriela", serif;
    }
}

.ph-magnifying-glass{
    font-size: 1rem;
    color: #EAD6BF;
}

input:focus{
    background-color: #5A3D21;
    outline: none;
}

.right{
    display: flex;
    align-items: center;
}

.ph-list{
    color: #5A3D21;
    margin-right: 20px;
    font-size: 2.3rem;

    &:hover{
        color: #EAD6BF;
    }
}

.icons{
    display: flex;
    font-size: 2.3rem;
}

.icons > a{
    display: flex;
    align-items: center;
    color: #5A3D21;
    text-decoration: none;
    &:hover{
        color: #EAD6BF;
    }
}

/*************************************************************************/
/*                               Footer                                  */
/*************************************************************************/

footer{
    background-color: #36281A;
    padding-top: 5%;
    padding-bottom: 5%;
    color: #D2B595;
}

.end-footer{
    display: flex;
    justify-content: flex-end;
}

footer .maker{
    width: 225px;
    margin-right: 75px;
}

footer .name{
    font-size: 20px;
}

footer .follow{
    width: 225px;
    justify-self: flex-end;
    margin-right: 15px;
}

footer .link{
    display: flex;
    flex-direction: column;
}

footer a{
    font-size: 20px;
    text-decoration: none;
    color: #D2B595;
}

footer a:hover{
    text-decoration: underline;
    color: #EAD6BF;
}

footer .ph-fill {
    margin-right:  5px;
}

.legal{
    display: flex;
    justify-content: center;
}