h3::first-letter, div::first-letter {
    text-transform: uppercase;
}
.showborder {
    border:0px solid gray;
}

.wraptable {
    display:block;
}


header {
    width: 100%;
    height: 16em;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
    /* pink #ef85a1 */
    border-bottom: 10px solid #72eab2; 
}

header>h1 {
    opacity: 0.4;
    font-size: 5vw;
    letter-spacing:0.5em;
    text-align: center;
}

h2 {
    opacity: 0.7;
    font-size: 2em;
    letter-spacing:0.2em;
    font-weight: 700;
    text-align: center;
}

.backgroundfade {
    background: rgba(255, 255, 255, 0.2);
    position:absolute;
    width: 100%;
    height: 100%;
}

.centerouter {
    /* Although vertical centering does
    not work without this elsewhere,
    it does nothing here. */
    display:table;
}

.centerinner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.list-group-item {
    width:16em;
    height:16em;
    margin: 4px;
    border: 2px solid lightgray;
    border-radius: 4px;
    padding:1em 1em 0 1em;
    float:left;
}

/* Not using percentages because of
struggles with display:table, centering,
and aligning caption to bottom. */

.cellcontentwidth {
    width:14em;
}

.cellcontentheight {
    /* Push the caption to
    the bottom of the cell. */
    height:13em;
}