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

header{
text-align:center;
padding:30px;
}

header h1{
margin:0;
font-size:32px;
letter-spacing:3px;
}

header p{
color:#ccc;
}

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

padding:30px;

perspective:1000px;

}

.card{

position:relative;

overflow:hidden;

border-radius:15px;

transform-style:preserve-3d;

transition:0.5s;

}

.card img{

width:100%;

display:block;

border-radius:15px;

}

.card:hover{

transform:rotateY(12deg) rotateX(8deg) scale(1.05);

box-shadow:0 25px 40px rgba(0,0,0,0.6);

}

.overlay{

position:absolute;

bottom:0;

left:0;

right:0;

background:linear-gradient(transparent,black);

padding:15px;

opacity:0;

transition:0.3s;

}

.card:hover .overlay{

opacity:1;

}

.overlay h3{

margin:0;

font-size:16px;

}

.watermark{

position:absolute;

top:10px;

left:10px;

background:rgba(0,0,0,0.6);

padding:5px 10px;

font-size:12px;

border-radius:5px;

}

footer{

text-align:center;

padding:20px;

color:#aaa;

}