html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;

    background: linear-gradient( 0deg, #455, #122 ) fixed;
    color: white;

    font-family: "Segoe UI";
}

div#content {
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row-reverse;
}

body.image div#content {
    height: 100%;
}

#navigation {
    flex-shrink: 0;
    width: 200px;
    justify-self: start;
    padding: 0 20px;
    box-sizing: border-box;
}

#navigation h3 {
    font-size: 12pt;
}

#footer {
    margin: 30px;
}

body.image #footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#copyright {
    text-align: right;
    color: #899;
}

#navigation ul {
    list-style-type: none;
    padding-left: 10px;
    white-space: nowrap;
}

#navigation ul.years {
    font-weight: bold;
    color: #abb;
}

#navigation ul.years li.year {
    margin-top: 20px;
}

#navigation ul.months {
    font-weight: normal;
}

a {
    color: #cff;
}

#info {
    flex-shrink: 0;
    font-size: 80%;
    padding: 10px 20px;
    align-self: flex-start;
    box-sizing: border-box;
    width: 300px;
}

#info table.details {
    border-collapse: collapse;
}

#info table.details td.title {
    color: #bbb;
    white-space: nowrap;
    padding: 4px;
}

#info table.details td.value {
    width: 100%;
    font-style: italic;
}

#info div#keywords h4 {
    color: #ddd;
}

#info div#keywords div.keyword-list {
    padding-left: 10px;
    white-space: wrap;
}

#info div#keywords div.keyword-list a {
    display: inline-block;
    margin: 0 3px;
    white-space: nowrap;
}

#list-content {
    flex-grow: 1;
    padding: 0 50px;
    justify-self: center;
}

#image {
    display: block;
    width: 0;
    max-height: 100%;
    margin: 20px;
    object-fit: contain;
    align-self: center;
    flex-grow: 1;
    flex-shrink: 1;
    cursor: pointer;
}

#caption {
    position: absolute;
    bottom: 100px;
    left: 100px;
    right: 100px;
    text-align: center;
    font-size: 125%;

}

div.list {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    margin-top: 0px;
    flex-wrap: wrap;
    justify-content: center;
}

div.list div.image {
    box-sizing: border-box;
    padding: 10px;
    width: 0;
    flex-grow: 1;
}

body.list div.image {
    max-width: 40%;
}

div.list br.break-option {
    display: none;
}

#recent p.break-option:nth-of-type(3),
#recent p.break-option:nth-of-type(7),
#recent p.break-option:nth-of-type(12),
#list p.break
{
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
}

div.flex-padding
{
}

#list p.break-option:nth-of-type(4n)
{
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
}

/*
#recent div.image:nth-of-type(-n+3) {
    width: calc(100%/3.5);
    flex-grow: 1;
}

#recent div.image:nth-of-type(n+4):nth-of-type(-n+7) {
    width: calc(100%/4);
}

#recent div.image:nth-of-type(n+8) {
    width: calc(100%/5);
}
*/

div.list div.image > a {
    display: block;
}

div.list div.image > a > img {
    display: block;
    width: 100%;
}