/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

body{
  background-color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: #434c5e;
}

nav#topnav{
  background-color: #FBFBFB;
  height: 50px;
  display: grid;
  grid-template-columns: 1fr 80px;
  padding-left: 10%;
  padding-right: 10%;
}

nav#topnav h1{
  text-align: left;
}

nav#topnav a{
  text-decoration: none;
  color: #434c5e;
}

nav#topnav a:hover{
  color: #81a1c1;
}

nav#topnav ul li a{
  color: #FAFAFA;
  border: 1px solid #81a1c1;
  background-color: #81a1c1;
  border-radius: 8px;
  padding: 4px 12px;
}

nav#topnav ul li a:hover{
  color: #81a1c1;
  border: 1px solid #FAFAFA;
  background-color: #FAFAFA;
}

h1{
  font-size: 2.5rem;
  font-weight: bold;
  padding-top: 4px 0;
}

h2{
  font-size: 2rem;
  font-weight: bold;
  margin: 1em 0;
}

ul.menu{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.menu li{
  float: left;
  margin-right: 36px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul.menu li a{
  display: block;
}

div.pagination{
  display: flex;
  margin: 20px 10%;
  font-size: 1.5rem;
  color: #81a1c1;
}

div.pagination a{
  font-size: 1.25rem;
  text-decoration: none;
  margin: 0 0 0 12px;
  padding: 4px 8px;
  color: #81a1c1;
  background-color: #fbfbfb;
  border: 1px solid #fbfbfb;
  border-radius: 8px;
}

div.pagination a.current{
  color: #fbfbfb;
  border: 1px solid #81a1c1;
  background-color: #81a1c1;
}

div.pagination div.nextprev a{
  margin: 0;
}

div.pagination div.page{
  flex: 0 0 150px;
}

div.pagination div.nextprev{
  flex: 0 0 200px;
  text-align: center;
}

div.pagination div.links{
  flex: 1;
  text-align: center;
}

main{
  margin-left: 10%;
  margin-right: 10%;
}

main.pic_collection ul {
  display: flex;
  flex-wrap: wrap;
}

main.pic_collection li {
  height: 30vh;
  flex-grow: 1;
  margin: 2px;
}

main.pic_collection li:last-child {
  flex-grow: 10;
}

main.pic_collection img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

main.pic{
  font-size: 1.2rem;
  padding-bottom: 128px;
}

main.pic p{
  margin: 1rem 0;
}

main.pic div{
  background-color: #FBFBFB;
}

main.pic div img{
  display: block;
  margin: 0 auto;
  width: auto;
  max-height: 100%;
}