/* CSS inspired by https://css-tricks.com/adaptive-photo-layout-with-flexbox/ */

/* Common */

h1 {
    font-family: sans-serif;
}

/* Album */

body {
    margin: 3vh;
}

ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

li {
    height: 20vh;
    flex-grow: 0.5;
    list-style-type: none;
}


li img, li video {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

li:last-child {
    flex-grow: 10;
}

/* Album */

div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center
}

html, body.media {
    height: 100%;
    margin: 0
}

body.media h1 {
    position: fixed;
    bottom: 0px;
    left: 10%;
    right: 10%;
    background-color: #888888AA;
    padding: 1vh;
    
}

div img, div video {
    object-fit: contain;
}