body { font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: 140%; margin: 0; padding-top: 30px; background: #ecf3df; }

.page { max-width: 1000px; margin: 0 auto 40px auto }
header { width: 100%; text-align: center; margin-bottom: 20px;  }
main { width: 100%; }
section { padding: 10px; }

a { color: #198743; font-weight: 600; }
.fancy {
    font-family: "Coming Soon", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.6rem;
    line-height: 2.8rem;
    text-align: center;
  }

.logo { width: 100%; max-width: 800px; margin-bottom: 20px; }
#action-row { text-align: center; margin-bottom: 20px; }
#action-row a.button { display: inline-block; width: 180px; text-align: center; margin: 0 auto; padding: 12px 20px; color: #ecf3df; text-decoration: none; }
#action-row a.catalog { background: #198743; }
#action-row a.donate { background: #1c411c; }

@media only screen and (max-width: 600px) {
    .page { margin: 0 20px 40px 20px }
    .logo { max-width: 320px; }
    #action-row a.button { display: block; margin-bottom: 10px; }
  }

#content { display: grid; grid-template-columns: repeat(3, 33%);  }
#location { text-align: center; }
#about {}
#social { display: flex; justify-content: center; column-gap: 6px; }
#social img { max-width: 32px; width: 100%; }
@media only screen and (max-width: 600px) {
  #content { display: block; }
  #social { flex-wrap: wrap; }
}
#calendar { text-align: center; }
#calendar>.event { margin-bottom: 20px; padding: 20px; border: 1px solid #555; }
#calendar>.event>div { margin-bottom: 4px; }
#calendar>.event .date {  }
#calendar>.event .title { font-size: 18px; font-weight: bold; }
#calendar>.event .description {  }
#calendar>.event .organizer { font-size: 14px; font-style: italic; }

#past-events .grid {
    display: flex
;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .5rem;
}
#past-events .grid img {
    max-width: 200px;
    width: 100%;
}

footer { background: #001d01; padding: 0 0 20px 0; color: #ecf3df; }
    footer a { color: #ecf3df; font-weight: normal; }
    footer img.foot { position: relative; bottom:20px; z-index: 0; } 
    footer div.info { font-size: 12px; padding-left: 20px; }