/* some resets */
* {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}
html, body { height: 100%; }
body { display: flex; flex-direction: column; }

/* basic styles */
body {
  background:
  linear-gradient(
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.9)
  ),
  url(/assets/pink-flowers.webp)
}
#main { flex: 1 0 auto; }
#header, #footer, #main {
  display: flex;
  justify-content: center;
}
#header, #footer { flex: 0 0 auto; }
#header {
  /* background-color: #fff884; */
  background-color: #fed;
  padding: 30px;
}
#main {
  padding: 3em 0 4em;
}

.container {
  width: 100%;
  max-width: 1100px;
}

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns:  1fr minmax(0, 300px) minmax(0, 100px) 1fr;
  grid-column-gap:10px;
  grid-template-areas:
     "header header header header"
     ". main main ."
     "footer footer footer footer"
  ;
}

#header { grid-area: header; }
#main { grid-area: main; grid-column: main-start; }
#footer { grid-area: footer; }

#header {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
}
#header h1 a {
  text-decoration: none;
  color: #ffbf7f;
  font-size: 26pt;
  text-shadow: 1px 1px 0px #000;
}
.post-card {
  color: #222;
  background-color: #fff;
  margin: 1em auto 3em;
  padding: 1em;
  box-shadow:
    -10px 8px rgba(255, 248, 132, 0.7),
    10px -8px rgba(255, 191, 127, 0.7),
    0px 0px 8px rgba(0, 0, 0, 0.5);
}
.post-card a {
  text-decoration: none;
  color: #ffbf7f;
}
.post-title {
  font-size: 36pt;
  text-shadow: 1px 1px 0px #000;
}
.post-description {
  font-size: 18pt;
}
.post-meta {
  font-size: 10pt;
  color: #664c58;
}
.post-description + .post-meta {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #664c58;
}
.post-meta + .post-description {
  font-size: 12pt;
  margin: 1em 0;
  padding-bottom: 1em;
  border-bottom: 1px solid #664c58;
}