* {
    box-sizing: border-box;
}
html, body {
}
img {max-width: 100%; max-height: 100%; display: flex;}
body{background-color: mistyrose;}
main{margin-left: 3em; background-color: white; min-height: 100vh}

/*Typography*/
nav > ul{line-height: 1;}
h1{font-weight:700; margin-bottom: 0.5em;}
p+p{margin-top: 0.5em;}
ol+ol{margin-top: 0.5em;}
span{font-style: italic;}

/*Navigation*/
nav{width: 100vh; position: fixed; bottom: -3em; left: 0; padding: 0em 1em; transform: rotate(-90deg); transform-origin: top left; display: flex; justify-content: center; background-color: white; border-bottom: 1px solid whitesmoke;}
nav > ul{display: flex; flex-direction: row;}
nav > ul > li{padding: 1em;}

/*Links*/
a:link{text-decoration: none; color: #808080;}
a:visited{text-decoration: none; color: #808080;}
a:active{text-decoration: none; color: #808080;}
a:hover{text-decoration: none; color: #000000; -webkit-transition: all 0.5s; transition: all 0.5s;}
a.current{text-decoration: none; color: #000000;}

/*Gallery*/
.gallery-section{display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; background-color: whitesmoke; min-height: 100vh;}
.gallery-group{flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; flex-wrap: wrap; padding: 1em;}