body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
    display: flex;
    background: #ccc;
}

.main div {
    padding: 2em;
}

#photos {
    width: 30%;
    flex-shrink: 0;
    background: #eee;
}

#bio {
    background: #bbb;
}

/* #photos-inner { */
/*     position: fixed; */
/* } */

/* #photos-inner img { */
/*     position: absolute; */
/*     height: 33%; */
/*     border-color: #ddd; */
/*     border-width: 10px; */
/*     border-style: solid; */
/*     border-radius: 20%; */
/*     filter: grayscale(1); */
/*     transition: 1s; */
/* } */

/* #photos-inner img:hover { */
/*     filter: none; */
/* } */

/* /\* TODO: fix photos div height when zoomed out *\/ */
/* img:nth-of-type(1) { */
/*     left: 1%; */
/*     top: 5%; */
/* } */

/* img:nth-of-type(2) { */
/*     right: 1%; */
/*     top: 10%; */
/* } */

/* img:nth-of-type(3) { */
/*     left: 1%; */
/*     top: 30%; */
/* } */

/* img:nth-of-type(4) { */
/*     right: 1%; */
/*     top: 35%; */
/* } */

/* #bio { */
/*     width: 45%; */
/*     background: #fee; */
/* } */