/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding-top: 500;

    background: #050505;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

}





/* =========================
   HEADER
========================= */


.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 35px 50px 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 1000;


    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.35) 45%,
        transparent 90%
    );

    pointer-events: none;

}



.site-header a {

    pointer-events: auto;

}



.logo {

    color: white;

    text-decoration: none;

    font-size: 24px;

    letter-spacing: 3px;

    font-weight: 500;

}




.navigation {

    display: flex;

    gap: 45px;

}




.navigation a {

    color: white;

    text-decoration: none;

    font-size: 14px;

    letter-spacing: 2px;

    opacity: 0.75;

    transition: 0.3s ease;

}




.navigation a:hover {

    opacity: 1;

}










/* =========================
   MASONRY GALLERY
========================= */




.keyart-gallery {


    columns: 4;

    column-gap: 0;


    width: 100%;

    margin: 100;

    padding: 100;


}
 



.gallery-item {


    break-inside: avoid;


    margin: 0;

    padding: 0;


    overflow: hidden;


    cursor: pointer;


}




.gallery-item img {


    width: 100%;

    height: auto;


    display: block;


    transition:

    transform .5s ease,

    filter .5s ease;


}




.gallery-item:hover img {


    transform: scale(1.02);


    filter: brightness(0.8);


}







/* =========================
   LIGHTBOX
========================= */


.lightbox {


    position: fixed;


    inset: 0;


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


    display: flex;


    align-items: center;

    justify-content: center;



    opacity: 0;


    pointer-events: none;


    transition: opacity .4s ease;


    z-index: 2000;


}





.lightbox.active {


    opacity: 1;


    pointer-events: auto;


}




.lightbox-image {


    max-width: 100%;


    max-height: 100%;


    object-fit: contain;



    transform: scale(.95);



    transition: transform .4s ease;


}





.lightbox.active .lightbox-image {


    transform: scale(1);


}





.lightbox-close {


    position: absolute;


    top: 35px;


    right: 50px;



    background: none;


    border: none;



    color: white;



    font-size: 60px;



    font-weight: 200;



    cursor: pointer;


}




.lightbox-close:hover {


    opacity: .5;


}





body.lightbox-open {


    overflow: hidden;


}







/* =========================
   RESPONSIVE
========================= */


@media(max-width:1000px){


    .keyart-gallery {


        columns: 2;


    }


}




@media(max-width:600px){


    .keyart-gallery {


        columns: 1;


    }



    .site-header {


        padding: 25px;


    }



    .navigation {


        gap: 20px;


    }



    .navigation a {


        font-size: 12px;


    }



    .logo {


        font-size: 18px;


    }


}