* {
  margin: 0;
  padding: 0;
  line-height: unset;
}

html, body { height: 100%; }

input {
  -webkit-appearance: none;
}

body {
  font-family: 'Signika';
  background-color: #0A3F33;
  font-size: 1.2rem;
}

#grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0px;
  grid-template-areas:
    "header"
    "content"
    "nav"
    "footer";
}

@media (min-width: 538px) {
  #grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header  content"
      "nav     content"
      "footer  footer";
  }
}

#grid header {
  grid-area: header;
  background-color: #B3F2C3;
}

#grid nav {
  grid-area: nav;
  background-color: #B3F2C3;
}

#grid nav div {
  padding: 20px;
}

#grid header img {
  width: 100%;
}

#grid header div {
	padding: 30px 30px;
  text-align: center;
}

#grid h1,
#grid div.afar {
  background-color: #F477BD;
}

#grid div.dl {
  background-color: #F2EDA7;
}

#grid div.links {
  background: black;
  color: #F477BD;
}

#grid div.links a {
  text-decoration: none;
  color: #F477BD;
}

#grid div.hmm {
  background-color: #591902;
}

#grid div.hmm,
#grid div.hmm a {
  color: #B3F2C3;
}

#grid header ul {
  margin-top: 12px;
  list-style: none;
}

#grid header .v {
  color: #990066;
  font-size: .9rem;
  font-style: italic;
}

#grid header .x {
  font-size: .9rem;
}

#grid article {
  grid-area: content;
  background-color: #7ABFB3;
	padding: 0 20px;
}

#grid article .hey {
  padding: 0 34px;
  font-style: italic;
  font-size: 1.1rem;
}

#grid article .feature {
  padding: 34px;
}

#grid article ul {
  margin: 0 34px;
}

#grid article p,
#grid header .hmm p,
#grid nav p {
  margin: 20px 0;
  text-align: left;
}

#grid nav hr {
  border: none;
  border-top: 1px solid #7ABFB3;
}

#grid article hr {
  border: none;
  border-top: 1px solid #B3F2C3;
}

#grid article img {
  width: 100%;
}

#grid footer {
  grid-area: footer;
  background-color: #BD7ABF;
  padding: 20px;
}

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.youtube > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* signika font */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: local('Signika Regular'), local('Signika-Regular'), url("/fonts/signika-400x.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: local('Signika Regular'), local('Signika-Regular'), url("/fonts/signika-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 700;
  src: local('Signika Bold'), local('Signika-Bold'), url("/fonts/signika-700x.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 700;
  src: local('Signika Bold'), local('Signika-Bold'), url("/fonts/signika-700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}