/* =========================
   DAME SRAZ GALLERY
========================= */

body{

    background:
    radial-gradient(circle at top,
    #220014 0%,
    #090010 40%,
    #000000 100%);

    color:white;

    font-family:'Alata',sans-serif;

    margin:0;

    overflow-x:hidden;
}

/* HERO */

h1{

    font-size:72px;

    text-align:center;

    margin-top:120px;

    margin-bottom:20px;

    color:#ff4fd8;

    text-shadow:
    0 0 20px rgba(255,0,180,.7),
    0 0 50px rgba(255,0,180,.3);
}

h2{

    font-size:38px;

    text-align:center;

    margin-bottom:40px;

    color:#ff7ae6;
}

/* BACK */

.back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:16px;

    background:
    linear-gradient(
    180deg,
    #ff4fd8,
    #c40084);

    color:white;

    text-decoration:none;

    font-weight:700;

    margin:20px auto;

    box-shadow:
    0 0 25px rgba(255,0,170,.35);

    transition:.25s;
}

.back-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 35px rgba(255,0,170,.6);
}

/* GRID */

.grid{

    width:100%;

    max-width:1600px;

    margin:0 auto 80px;

    padding:20px 40px;

    display:grid;

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

    gap:30px;
}

/* CARDS */

.folder,
.photo{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    transition:.35s;

    box-shadow:
    0 0 30px rgba(255,0,170,.08);
}

.folder:hover,
.photo:hover{

    transform:
    translateY(-6px)
    scale(1.02);

    box-shadow:
    0 0 40px rgba(255,0,170,.28);
}

/* IMAGES */

.folder img,
.photo img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    transition:.4s;
}

.folder:hover img,
.photo:hover img{

    transform:scale(1.06);
}

/* FOLDER TITLE */

.folder div{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px;

    background:
    linear-gradient(
    180deg,
    transparent,
    rgba(0,0,0,.88));

    font-size:26px;

    font-weight:700;

    text-align:left;

    color:white;
}

/* LIGHTBOX */

#lightbox{

    display:none;

    position:fixed;

    inset:0;

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

    justify-content:center;

    align-items:center;

    z-index:99999;

    backdrop-filter:blur(10px);
}

#lightbox img{

    max-width:92%;

    max-height:92vh;

    border-radius:24px;

    box-shadow:
    0 0 60px rgba(255,0,170,.35);
}

/* CONTROLS */

#lightbox span{

    position:absolute;

    color:#ff4fd8;

    cursor:pointer;

    transition:.2s;

    user-select:none;
}

#close{

    top:25px;

    right:40px;

    font-size:56px;
}

#prev,
#next{

    top:50%;

    transform:translateY(-50%);

    font-size:70px;

    padding:20px;
}

#prev{

    left:30px;
}

#next{

    right:30px;
}

#close:hover,
#prev:hover,
#next:hover{

    color:white;

    transform:
    translateY(-50%)
    scale(1.08);
}

/* MOBILE */

@media(max-width:900px){

    h1{

        font-size:46px;

        margin-top:90px;
    }

    .grid{

        padding:20px;

        gap:20px;
    }

    .folder img,
    .photo img{

        height:280px;
    }

    #prev,
    #next{

        font-size:42px;
    }
}