html {
    margin: 0px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #111;
    min-height: 100vh;
}

body {
    margin: 0px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    line-height: 2;
}

main {
    max-width: 1080px;
    width: 90vw;
    flex-grow: 1;
    text-align: justify;
}

h1 {
    font-weight: 400;
    font-size: 4rem;
    border-bottom: 1px dashed #aaa;
    line-height: 1.25;
}

.image-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}

.image-item {
    /* 3-col image grid for 1080px <main> width */
    height: calc(1080px / 3 - 15px);
    width: calc(1080px / 3 - 15px);
    cursor: pointer;

    border-radius: 3px;
    overflow: hidden;

    box-shadow:
        0.2px 0.3px 1.1px rgba(0, 0, 0, 0.022),
        0.5px 0.8px 2.8px rgba(0, 0, 0, 0.031),
        1.1px 1.6px 5.7px rgba(0, 0, 0, 0.039),
        2.2px 3.3px 11.7px rgba(0, 0, 0, 0.048),
        6px 9px 32px rgba(0, 0, 0, 0.07);
    transition: box-shadow .2s, transform .2s ;
}

.image-item:hover {
    box-shadow:
        0.5px 0.5px 0.5px rgba(0, 0, 0, 0.028),
        1.4px 1.4px 1.4px rgba(0, 0, 0, 0.04),
        2.8px 2.8px 2.8px rgba(0, 0, 0, 0.05),
        5.8px 5.8px 5.8px rgba(0, 0, 0, 0.062),
        16px 16px 16px rgba(0, 0, 0, 0.09);
    transform: translate(0, -2px);
}

.image-item > .image-item-bg {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
}

footer {
    max-width: 1080px;
    width: 90vw;
    border-top: 1px dashed #aaa;
    text-align: center;
    padding: 8px, 16px;
}

#lightbox {
    display: none;
    opacity: 0;
    transition: .3s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#lightbox.state-visible {
    display: block;
    opacity: 1;
}

.lightbox-fg {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-fg img {
    max-height: 100%;
    max-width: 100%;
    border-radius: 3px;
    transition: .15s filter;

}

.lightbox-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 1;
}


/* loading indicator */
#lightbox.state-loading img {
    filter: blur(8px) saturate(.4);
}

.license-info {
    position: absolute;
    color: #fff;
    background-color: rgba(0,0,0,0.6);
    padding: 6px 12px 4px 12px;
    line-height: 1;
    bottom: 0;
    font-size: 8px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.license-info a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.license-info a:hover {
    text-decoration: underline
}

footer p {
    margin: 8px 0;
}

@media (max-width: 1200px) {
    /* 3-col image grid for 90vw <main> width (smaller than 1080px) */
    .image-item {
        width: calc(30vw - 22px);
        height: calc(30vw - 22px);
    }
}

@media (max-width: 900px) {
    h1 {
        font-size: 3.5rem;
    }
    
    body {
        line-height: 1.5;
    }

    .lightbox-fg {
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }
    
    /* 2-col image grid for windows smaller than 900px*/
    .image-item {
        width: calc(45vw - 11px);
        height: calc(45vw - 11px);
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 2.5rem;
    }
    
    .image-container {
        gap: 10px;
    }
    
    /* 2-col image grid with smaller gaps for windows smaller than 600px*/
    .image-item {
        width: calc(45vw - 5px);
        height: calc(45vw - 5px);
    }
}