body{
margin:0;
font-family:Segoe UI, Arial;
background:linear-gradient(120deg,#0f0f14,#1b1b2a);
color:white;
}
header{
background:linear-gradient(90deg,#ff4fa3,#7a5cff);
padding:25px;
text-align:center;
}
nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
background:#141420;
padding:14px;
}
nav a{
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}
nav a:hover{color:#ff4fa3;transform:scale(1.1);}
.container{padding:50px 10%;}
.hero{text-align:center;padding:70px 20px;}
.hero img{width:320px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.gallery img{
width:100%;
border-radius:12px;
transition:.4s;
}
.gallery img:hover{transform:scale(1.05);}
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.card{
background:#1d1d2f;
padding:20px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}
button{
padding:10px 18px;
border:none;
border-radius:8px;
background:#ff4fa3;
color:white;
cursor:pointer;
margin-top:10px;
}
.generator{
text-align:center;
}
canvas{
background:white;
margin-top:20px;
max-width:100%;
border:4px solid #333;
}
footer{
text-align:center;
padding:30px;
background:#111;
margin-top:40px;
}