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

/* Common */

h1 {
    font-family: sans-serif;
}

html {
    height: 100%;
    width: 100%;
}

/* Album */

body.album {
    margin: 3vh;
}

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

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


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

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

/* Media */

body.media {
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

body.media h1 {
    background-color: #888888AA;
    padding: 1vh;
    margin-left: 3vh;
    margin-right: 3vh;
}

.media img, .media video {
    object-fit: contain;
    max-height: 80%;
    max-width: 100%;
    margin-top: 3vh;
    margin-left: 3vh;
    margin-right: 3vh;
}