html {
  height: 100%;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

body {
  background-color: #e61a1a;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"%3E%3Cg fill="white" fill-opacity="0.8"%3E%3Cpath fill-rule="evenodd" d="M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z"/%3E%3C/g%3E%3C/svg%3E');
  min-height: 100%;
  padding: 1.5rem 5% 0;
  margin: 0;
  color: #0f2424;
}

header {
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding-left: 2rem;
  padding-right: 2rem;
}
header h1 {
  font-family: "Alfa Slab One", cursive;
  font-size: 3rem;
  letter-spacing: 0.05em;
  line-height: 2.7rem;
  padding: 0.5em 0 0;
  margin: 0;
  color: #1f4747;
}
header p {
  font-size: 1.5rem;
  font-style: italic;
  margin: 0;
  color: #6b4747;
}

nav {
  width: 100%;
}
nav ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: #7ab8b8;
  margin: 1em 1.5em 0 0;
}
nav ul li a {
  text-decoration: none;
  color: #122121;
  text-shadow: 0 0 3px #deeded;
}

aside {
  border-right: 1px solid #bddbdb;
  padding-right: 2rem;
}

.container-content {
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 2rem;
}
.container-content h2 {
  margin: 0;
}
.container-content h2 {
  color: #1f4747;
}

main h2 {
  font-size: 2em;
}
main > p {
  font-style: italic;
  margin: 0.5em 0 1.5em;
  color: #6b4747;
}

.recipe-featured {
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 0;
  background-color: #fbeaea;
}
.recipe-featured h2 {
  margin: 0;
}
.recipe-featured img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.recipe-featured h3,
.recipe-featured p {
  margin: 1rem;
}

.container-recipe-list a {
  display: block;
  text-decoration: none;
  color: #6b4747;
  border-radius: 0.5em;
}
.container-recipe-list a:not(:last-of-type) {
  margin-bottom: 1em;
  padding-bottom: 1em;
}
.container-recipe-list a:nth-child(1n) {
  border-right: 1em solid #a3aaf5;
}
.container-recipe-list a:nth-child(2n) {
  border-right: 1em solid #a3d6f5;
}
.container-recipe-list a:nth-child(3n) {
  border-right: 1em solid #b5a3f5;
}
.container-recipe-list a:nth-child(4n) {
  border-right: 1em solid #f5cba3;
}
.container-recipe-list a:nth-child(5n) {
  border-right: 1em solid #a3b6f5;
}
.container-recipe-list a:nth-child(6n) {
  border-right: 1em solid #a3f5a5;
}
.container-recipe-list a:nth-child(7n) {
  border-right: 1em solid #a3f2f5;
}
.container-recipe-list a:nth-child(8n) {
  border-right: 1em solid #a3f1f5;
}
.container-recipe-list a:nth-child(9n) {
  border-right: 1em solid #a3f5c4;
}
.container-recipe-list a:nth-child(10n) {
  border-right: 1em solid #a3f5b4;
}

.recipe-listing {
  height: 7em;
  clear: both;
}
.recipe-listing img {
  float: left;
  height: 100%;
  margin-right: 1em;
  border-radius: 4px;
}
.recipe-listing h3 {
  margin: 0;
  padding: 0.5em 0 1em;
}
.recipe-listing p {
  color: #0f2424;
  margin-top: 0;
}

.recipe-header {
  position: relative;
}
.recipe-header h2 {
  position: absolute;
  width: 100%;
  z-index: 10;
  font-size: 2.5em;
  padding-bottom: 1.25em;
  padding-left: 0.5em;
  background: white;
  background: linear-gradient(to bottom, white 0%, white 25%, rgba(255, 255, 255, 0) 100%);
}
.recipe-header img {
  top: -5em;
  width: 100%;
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 0;
  box-shadow: none;
}

.ingredients,
.directions {
  font-size: 1.1em;
  margin-top: 2em;
}
.ingredients h3,
.directions h3 {
  border-bottom: 1px solid #bddbdb;
  padding-bottom: 0.3em;
}
.ingredients ul,
.ingredients ol,
.directions ul,
.directions ol {
  padding-left: 1.5em;
}
.ingredients li,
.directions li {
  margin-bottom: 0.7em;
}

footer {
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 0.5em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  text-align: center;
}
footer h2 {
  margin: 0;
}
footer p {
  margin: 0.5em 1em 0.25em;
}

html {
  box-sizing: border-box;
}

html * {
  box-sizing: inherit;
}

/* Mobile Layout */
.container-main, .container-featured-box {
  display: grid;
  grid-gap: 2rem;
  max-width: 900px;
  grid-template-columns: 1fr;
  margin: 0 auto;
}

.container-featured-box {
  grid-gap: 2rem;
}

/* Desktop Layout  */
@media only screen and (min-width: 768px) {
  .container-main, .container-featured-box,
.container-content {
    display: grid;
    grid-gap: 2rem;
    max-width: 900px;
    grid-template-columns: repeat(12, 1fr);
  }

  header {
    grid-column: span 12;
  }

  .container-content {
    grid-column: span 12;
    margin-bottom: 4rem;
  }

  aside {
    grid-column: span 3;
  }

  main {
    grid-column: 4/span 9;
  }

  .container-featured-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .container-featured-box > div {
    grid-column: span 1;
  }

  footer {
    grid-column: span 12;
    position: fixed;
    bottom: 0;
    width: 900px;
    z-index: -10;
  }
}