body{
margin:0;
font-family:sans-serif;
background:radial-gradient(circle at top,#161b22,#0d1117 70%);
color:white;
transition:background .35s,color .35s;
}

/* header */

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

header h1{
margin:0;
font-size:34px;
}

header p{
opacity:.7;
margin-top:6px;
}

/* gallery */

.gallery{
column-count:5;
column-gap:20px;
padding:30px;
max-width:1500px;
margin:auto;
}

/* card */

.card{
break-inside:avoid;
margin-bottom:20px;
border-radius:18px;
overflow:hidden;
position:relative;
cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.3s;
}

.card:hover{
transform:translateY(-8px) scale(1.01);
box-shadow:0 25px 50px rgba(0,0,0,.45);
}

.card img{
width:100%;
height:auto;
display:block;
opacity:0;
transition:opacity .4s;
}

.card img.loaded{
opacity:1;
}

/* tag */

.tag{
position:absolute;
top:12px;
left:12px;

background:rgba(0,0,0,.55);
backdrop-filter:blur(8px);

padding:6px 12px;
border-radius:20px;
font-size:12px;

color:#fff;
}

/* overlay */

.overlay{
position:absolute;
bottom:0;
left:0;
width:100%;

padding:18px;

background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));

font-size:12px;
color:#fff;

text-shadow:0 2px 8px rgba(0,0,0,.9);
}

/* lightbox */

#lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);

display:none;
align-items:center;
justify-content:center;
flex-direction:column;

z-index:999;
}

#lightbox img{
max-width:90%;
max-height:80%;
border-radius:10px;
}

/* arrows */

#prev,#next{
position:absolute;
top:50%;
transform:translateY(-50%);

background:none;
border:none;

font-size:60px;
color:white;

cursor:pointer;
}

#prev{left:20px;}
#next{right:20px;}

/* download */

#download{
margin-top:20px;

background:#238636;
padding:12px 26px;

border-radius:10px;
text-decoration:none;
color:white;

font-weight:500;

box-shadow:0 6px 18px rgba(0,0,0,.35);

transition:.25s;
}

#download:hover{
background:#2ea043;
transform:translateY(-2px);
}

/* top button */

#topBtn{
position:fixed;
bottom:30px;
right:30px;

width:46px;
height:46px;

font-size:20px;
border:none;
border-radius:50%;

background:rgba(35,134,54,.85);
backdrop-filter:blur(10px);

color:white;
cursor:pointer;
display:none;

align-items:center;
justify-content:center;

box-shadow:0 8px 25px rgba(0,0,0,.35);
}

/* theme button */

#themeBtn{
position:fixed;
bottom:30px;
right:90px;

width:46px;
height:46px;

font-size:18px;
border:none;
border-radius:50%;

background:rgba(48,54,61,.9);
backdrop-filter:blur(10px);

color:white;
cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 8px 25px rgba(0,0,0,.35);
}

/* light mode */

body.light{
background:radial-gradient(circle at top,#e6edf3,#ffffff 70%);
color:#111;
}

body.light .overlay{
color:#000;
background:linear-gradient(to top,rgba(255,255,255,.95),rgba(255,255,255,0));
}

body.light .tag{
background:rgba(0,0,0,.15);
color:#000;
}

body.light #download{
background:#2da44e;
}

/* responsive */

@media (max-width:1200px){
.gallery{column-count:4;}
}

@media (max-width:900px){
.gallery{column-count:3;}
}

@media (max-width:600px){
.gallery{column-count:2;padding:15px;}
}

@media (max-width:400px){
.gallery{column-count:1;}
}

/* theme button light mode */

body.light #themeBtn{
background:rgba(200,200,200,.8);
color:#000;
}

body.light #topBtn{
background:#2da44e;
}

/* hover effect */

#themeBtn:hover{
transform:scale(1.1) rotate(15deg);
transition:.25s;
}

body.light #themeBtn:hover{
background:#ddd;
}