body{
        color: white;
        background: black;
}
h1, h2, h3 {
        color: white;
        text-align: center;
}
p {
        text-align: center;
}
.left {
        margin-left: 1em;
        float: center;
        padding: 0 0 0 0;

}
.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}
a {
        color: white;
}
.clear {
        clear: both; /* Clear the float */
}
/* For all the unique stuff.*/
.gallery {
        /* (B1) GRID LAYOUT - 3 IMAGES PER ROW */
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 10px;

        /* (B2) OPTIONAL WIDTH RESTRICT */
        max-width: 1000px;
        margin: 0 auto;
        overflow: hidden;
}
/* (C) GALLERY IMAGES */
.gallery img {
        /* (C1) DIMENSION */
        width: 100%;
         /* optional */
        padding: 10px;

        /* (C3) IMAGE RESIZE */
        /* cover | contain | fill | scale-down */
        object-fit: fill;

/* (D) ON SMALL SCREENS - 2 IMAGES PER ROW */
@media only screen and (max-width: 600px) {
        .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}