body{
margin:0;
font-family:Arial;
background:#111;
color:white;
}

header{
display:flex;
justify-content:space-between;
padding:15px;
background:black;
}

nav{
display:flex;
gap:20px;
}

nav a{color:white;text-decoration:none;}

#menu-toggle{display:none;}

.hero{text-align:center;padding:60px;}

.filters{text-align:center;margin:20px;}
.filters button{
margin:5px;
padding:10px;
border:none;
cursor:pointer;
}

/* Pinterest style */
.galerie{
column-count:4;
column-gap:15px;
padding:20px;
}

.card{
break-inside:avoid;
margin-bottom:15px;
}

.card img{
width:100%;
border-radius:8px;
cursor:pointer;
}

/* Lightbox */

#lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
flex-direction:column;
align-items:center;
justify-content:center;
}

#lightbox-img{
max-width:90%;
max-height:60%;
}

.lightbox-text{
text-align:center;
padding:20px;
}

/* responsive */

@media(max-width:1000px){.galerie{column-count:3;}}
@media(max-width:700px){.galerie{column-count:2;}}
@media(max-width:500px){.galerie{column-count:1;}}

@media(max-width:768px){
nav{display:none;}
#menu-toggle{display:block;}
nav.active{display:flex;flex-direction:column;}
}