header{
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: var(--white);

    box-shadow: 0 30px 30px var(--white);
    /*border-bottom: var(--border) solid var(--black);*/

    z-index: 999; 
    position: fixed; 
}

.header,
.header-nav{
    box-sizing: border-box;
}

.header{
    margin: 0;
    padding-inline: var(--main-padding);
    background-color: var(--white);

    width: 100vw;
    height: var(--height-header);

    display: flex;
    justify-content: space-between;

}

.header a{
    display: flex;
    align-items: center;
}
 
.main-logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-logo img{
    height: calc(var(--height-header) * 0.7);
    width: auto;
    cursor: pointer;
}


button.main-contact{
    width: 200px;
}


.header-nav{
    margin: 0;
    padding-inline: var(--main-padding);

    width: 100%;
    height: var(--height-header);

    display: flex;
    justify-content: flex-end;
    gap: 0;
    align-items: center;

    position: relative;
}


.header-nav a:hover{
    font-family: "BOURRASQUE EST";
}

button.nav span{
    width: auto;
    cursor: pointer;
    transition: 0.2s;


    color: var(--black);
    font-size: calc(var(--font-size) / 2);
}

.active{
    font-family: "BOURRASQUE EST";
    transform: rotate(45deg);
}