header {
z-index:10;
/*position : fixed ;*/
top : 0px;
display :flex ;
justify-content : space-between;
align-items : center ;
margin : 0 auto ;
width : 100%;
padding : 20px 40px ;
box-sizing : border-box;
background-color: #33000010;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

header img{
filter: brightness(0);
}




@media(max-width: 700px){
header {
z-index:10;
/*position : fixed ;*/
top : 0px;
display :flex ;
justify-content : space-between;
align-items : center ;
margin : 0 auto ;
width : 100%;
padding : 20px 20px ;
box-sizing : border-box;
background-color: #33000010;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
}





header button {
border-radius : 20px ; border: none; color : white ; padding : 6px 24px; background : var(--background-color)
}

header a {display: flex; text-decoration: none}
.logo{
width: clamp(54px, 30%, 90px)
}
style="width: 100% ; filter : brightness(0) invert(1)"}