* {
    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: #FFFCF9; 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;}
.rule{border-top: thin solid;}

/*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;}

img+h2{margin-top: 0.5em;}

/*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: #FFFCFC; min-height: 100vh; border-top: 1px solid whitesmoke}
.gallery-group{flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; flex-wrap: wrap; padding: 1em; flex-direction: column;}
 

.bg{background-color: whitesmoke;}

@media only screen and (min-width: 600px) { 
    .gallery-group{flex-direction: row;}
}