body{

    margin:20px;
    font-family:Arial, sans-serif;
	background-color : #500000;
    text-align:center;

}

/* Thumbnail rows */

h1{
	color : white;
}

.gallery{
    display:grid;
    grid-template-columns:
    repeat(auto-fit, minmax(170px, max-content));
    justify-content:center;
    gap:25px;
}

/* Thumbnail container */

.thumb{
    background:white;
    padding:10px;
    cursor:pointer;
    border-radius:8px;
    box-shadow:
    0 2px 8px rgba(0,0,0,.3);
    transition:.25s;

}

.thumb:hover{
    transform:scale(1.05);
}

/* Keep original image proportions */

.thumb img{
    width:auto;
    height:140px;
    max-width:170px;
    object-fit:contain;
}

/* Signature */

.thumb p{
    margin:10px 0 0;
    font-weight:bold;
    font-size:15px;
}

/* Lightbox */

#lightbox{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.92);
    z-index:1000;
    align-items:center;
    justify-content:center;
}

/* Large image area */

.viewer{
    text-align:center;
}

.viewer img{
    max-width:90vw;
    max-height:80vh;
}

#caption{
    color:white;
    font-size:22px;
    margin-top:15px;
}

/* Close button */

.close{
    position:absolute;
    right:30px;
    top:20px;
    font-size:40px;
    color:white;
    background:none;
    border:none;
    cursor:pointer;
}

/* Previous and next buttons */

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:white;
    font-size:55px;
    cursor:pointer;
}

.prev{
    left:30px;
}

.next{
    right:30px;
}

/* Mobile */

@media(max-width:600px){
    .prev,
    .next{
        font-size:35px;
    }

    .close{
        font-size:30px;
    }

}