/* page */

body {
    background: #5b5c5c;
    color: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


/* page spacing */

.sketchbook-container {
    width: 92%;
    max-width: 1500px;
    margin: 120px auto;
}


/* masonry gallery */

.gallery {
    column-count: 4;
    column-gap: 28px;
}


/* images */

.sketch {
    width: 100%;
    margin-bottom: 28px;

    border-radius: 10px;

    break-inside: avoid;

    cursor: pointer;

    background: #111;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.5);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}


/* hover effect */

.sketch:hover {
    transform: scale(1.035);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 6px 12px rgba(0, 0, 0, 0.6);

    filter: brightness(1.05);
}



/* responsive columns */

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

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

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



/* lightbox */

#lightbox {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(107, 102, 102, 0.96);

    display: none;

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

    z-index: 2000;

    backdrop-filter: blur(6px);
}


#lightbox img {
    max-width: 92%;
    max-height: 92%;

    border-radius: 8px;

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.8);
}