html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  background-color: #b6d099;
  color: #7e6e5d;
  font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: #333;
  font-family: 'PT Sans Narrow';
  font-weight: normal;
  margin: 1em 0 .25em 0; }

h1 {
  font-size: 300%; }

h2 {
  font-size: 200%; }

h3 {
  font-size: 150%; }

h4 {
  font-size: 120%; }

h5 {
  font-size: 110%; }

h6 {
  font-size: 100%; }

* {
  box-sizing: border-box; }

.head {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background-color: #f9f6ee;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); }
  .head img.logo {
    display: block;
    width: 100%;
    max-width: 744px;
    grid-column-start: 2; }

.content {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 744px) 1fr;
  position: relative; }
  .content .main {
    grid-column-start: 2;
    background-color: #fefcfb;
    padding: 1em;
    border-radius: 0 0 8px 8px; }
  .content .footer {
    grid-column-start: 2;
    color: #52483c;
    padding: 1em;
    text-align: center; }