* {
 box-sizing:border-box;
}
html {
 font-size:100%
}
body {
 max-width:90rem;
 margin:0 auto;
 padding:2rem 1rem;
 font-family:sans-serif;
 font-size:1rem;
 word-break:break-word;
}
h1,
h2,
h3,
h4 {
 margin:0;
 padding:.5rem 0;
 text-align:center;
 line-height:1.5;
 color:#2f3e4d;
}

p {
 hyphens:auto;
}

p {
 margin:0;
 padding:1rem;
 font-size:1.2rem;
 line-height:1.4;
 color:#333
}
.auto-grid {
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
 grid-gap:1rem;
 background-image:white;
 background-size:50px 50px
}
@media screen and (max-width:16rem) {
 .auto-grid {
  grid-auto-rows:1fr
  }
}
.grid-box {
 display:flex;
 flex-flow:column nowrap;
 padding:1rem;
 background-color:#69ca75;
 border:1px solid #999;
 border-radius:5px
}
.grid-figure {
 margin:0;
 padding:1rem;
 text-align:center;
 font-style:italic;
 color:#4d4d4d
}
.grid-img {
 max-width:100%;
 height:auto;
 object-fit:cover;
 transition:opacity .25s ease-in-out
}
.grid-img:hover {
 opacity:.7
}
.m-top {
 margin-top:auto
}
#navbar {
  background-color: #69ca75;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

.header {
  background-color: white;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}