html {
margin: 0;
height: 100vh;
}
body {
min-height: 100vh;
margin: 0;
}
.photocollage {
display: flex;
justify-content: flex-start;
align-items: flex-start;
/* flex-flow: row wrap; */
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.noto-sans-mono-font {
font-family: "Noto Sans Mono", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.photo {
background-color: #eeeeee;
filter: drop-shadow(0px 3px 3px #888888);
display: inline-block;
padding: 1vh;
margin: 1vh;
}
.photocontent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: normal;
align-content: normal;
}
.photoimage {
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
order: 0;
}
.photoimagesrc {
max-width:40vw;
max-height:40vw;
width: auto;
height: auto;
}
.photodetails {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: flex-end;
order: 0;
text-align: right;
line-height: 70%;
font-size: 0.75rem;
}