*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:"Inter",sans-serif;

background:
linear-gradient(180deg,#171a22,#101216);

color:white;

min-height:100vh;

}

header{

position:sticky;

top:0;

z-index:100;

backdrop-filter:blur(16px);

background:rgba(20,20,25,.75);

padding:25px;

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

border-bottom:1px solid rgba(255,255,255,.08);

}

h1{

font-size:34px;

font-weight:700;

}

input{

width:min(450px,90vw);

padding:16px 20px;

font-size:17px;

background:#20242d;

border:1px solid #333;

color:white;

border-radius:14px;

outline:none;

transition:.25s;

}

input:focus{

border-color:#4b82ff;

box-shadow:0 0 15px rgba(75,130,255,.35);

}

#gallery{

padding:35px;

display:grid;

grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

gap:26px;

}

.card{

background:#1a1d26;

border-radius:18px;

overflow:hidden;

cursor:pointer;

transition:.25s;

box-shadow:

0 12px 30px rgba(0,0,0,.25);

}

.card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 40px rgba(0,0,0,.45);

}

.card img{

width:100%;

display:block;

transition:.35s;

}

.card:hover img{

transform:scale(1.06);

}

.name{

padding:15px;

font-size:16px;

font-weight:600;

text-align:center;

}

#viewer{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

z-index:500;

}

.overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.88);

backdrop-filter:blur(10px);

}

#viewer img{

position:relative;

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:0 30px 70px rgba(0,0,0,.7);

animation:pop .25s ease;

}

#close{

position:absolute;

top:30px;

right:45px;

font-size:60px;

cursor:pointer;

z-index:600;

transition:.2s;

}

#close:hover{

transform:scale(1.15);

}

.hidden{

display:none!important;

}

@keyframes pop{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}