/* ---------------------------------------------- */
/*    By Jeffrey Bissel                           */
/*        bissel@uni-bremen.de                    */
/*        jeffrey@bissel-art.de                   */
/* ---------------------------------------------- */

html, body {
    width: 100%;
    height: 100%;

    font-family: "Liberation Serif", Liberation, serif;
    font-size: 1em;
    font-weight: 400;

    color: #CCC;
} 

body {
    padding: 0; margin: 0; border: 0;
    background-color: rgb(40, 40, 40);

    display: grid;
    grid-template-columns: 1fr [content-start] auto [content-end] 1fr;
    grid-template-rows: 2em [content-start] auto [content-end] 1fr;
    grid-gap: 1em;
} 

h1 {
    color: #FEFEFE;
    text-shadow: 0px 0px 2px black;
}

content {
    grid-area: content;

    max-width: 40em;
    width: 40em;
}

footer {
    grid-row: -1;
    grid-column: 2 / -2;

    border-top: 1px #CCC solid;
    padding-top: 1em;
    padding-bottom: 1em;

    line-height: 1.5em;
    vertical-align: middle;

    text-align: center;
}

.tagline {
    font-style: italic;
    padding-left: 2em;
    color: #999;
}

a {
    color: inherit;
}

a:hover {
    filter: brightness(150%);
}

a.back-arrow {
    float: right;
    text-decoration: none;
    font-size: 3em;
}

a.image-link {
    display: block; 
    position: relative; 
    width: 100%; 
    height: 8em; 

    margin-top: 1em: 
    margin-bottom: 1em; 
    overflow: hidden;
    border-radius: 1em;
}

a.image-link > img {
    display: block; 
    position: absolute; 
    width: 60em; 
    height: 60em; 
    left: 50%; 
    top: 50%; 
    margin-left: -30em; 
    margin-top: -30em;
}

.images {
    display: grid;


    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
}

.images > div {
    width: 100%;
    padding-top: 110%;
    position: relative;
    margin-bottom: 1.5em;
}

.images > div > img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 10%;
    right: 0;
}

.images > div > span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 100%;
    left: 0;
    bottom: 10%;
    right: 0;
}