/* General Styling */

* {
  margin: 0;
  padding: 0;
}

body {
  background: #0c0e3d;
  color: #fff;
  font-family: 'EB Garamond', serif;
  font-size: 20px;
  min-width: 300px;
}

nav {
  width: 100%;
}

#nav-content {
  margin-left: auto;
  margin-right: auto;
}

/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
#nav-content ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

#nav-content a:link,
#nav-content a:visited,
#nav-content a:hover,
#nav-content a:active {
  color: #fff;
  text-decoration: none;
}

#toaes {
  /* Use a yellow-to-orage gradient background */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9d253+0,f18142+50,e76c42+100 */
  background: rgb(249,210,83); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(249,210,83,1) 0%, rgba(241,129,66,1) 50%, rgba(231,108,66,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(249,210,83,1) 0%,rgba(241,129,66,1) 50%,rgba(231,108,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(249,210,83,1) 0%,rgba(241,129,66,1) 50%,rgba(231,108,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d253', endColorstr='#e76c42',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

h1, h2, h3 {
  font-family: 'Advent Pro', sans-serif;
  font-weight: 400;
}

#toaes h1 {
  color: #fff;
  font-family: 'Advent Pro', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

p, dd {
  font-size: 1em;
  line-height: 1.3em;
}

dt {
  font-family: 'Advent Pro', sans-serif;
  font-weight: 400;
  color: #f18142; /* Medium orange */
  padding-bottom: .25em;
  letter-spacing: .05em;
}

main {
  width: 100%;
}

.card-content {
  margin: 0em auto;
}

#description-hook {
  font-weight: bold;
}

.centered-items {
  display: flex;
  align-items: center;
  justify-content: center;
}

a:link {
  color: #fff;
}

a:hover {
  color: #f5a74a;
}

a:visited, a:active {
  color: #ddd;
}

#cover-card {
  /* Use a red-to-purple gradient background. */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#db502f+0,7f0984+100 */
  background: rgb(219,80,47); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(219,80,47,1) 0%, rgba(127,9,132,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(219,80,47,1) 0%,rgba(127,9,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(219,80,47,1) 0%,rgba(127,9,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db502f', endColorstr='#7f0984',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.centered-text {
  text-align: center;
}

/* Do not pad the bottom of the last paragraph */
#description-card-content p:last-child,
#author-card-content p:last-child,
#post-card-content p:last-child {
  padding-bottom: 0;
}

#post-card-content time {
  font-size: .6em;
  color: #76869f;
  text-align: right;
  display: block;
  padding-bottom: 1em;
}

#author-card {
  /* Use a yellow-to-orange gradient background */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9d253+0,f18142+50,e76c42+100 */
  background: rgb(249,210,83); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(249,210,83,1) 0%, rgba(241,129,66,1) 50%, rgba(231,108,66,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(249,210,83,1) 0%,rgba(241,129,66,1) 50%,rgba(231,108,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(249,210,83,1) 0%,rgba(241,129,66,1) 50%,rgba(231,108,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d253', endColorstr='#e76c42',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#posts-card-content {
  box-sizing: border-box;
}

footer {
  text-align: center;
  color: #76869f;
  padding: .5em;
}

footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
  color: #76869f;
}

#post-card-content footer {
  text-align: left;
  padding: 0;
}

#post-card-content footer a {
  color: #76869f;
}

/* Layout styling targeting small screens first */

#nav-content {
  width: 300px;
}

#nav-content li {
  padding-top: .25em;
  padding-bottom: .25em;
}

#nav-home {
  padding-left: .5em;
}

#nav-blog {
  padding-right: .5em;
}

#toaes h1 {
  font-size: 3em;
  line-height: 1em;
  padding: .1em;
  width: 300px;
}

.card {
  padding-top: .5em;
  padding-bottom: .5em;
}

.card h1 {
  font-size: 1.5em;
  padding-bottom: .25em;
  letter-spacing: .05em;
}

#cover-card a:link {
  color: #f9d252;
}

#cover-card a:hover {
  color: #f5a74a;
}

#cover-card a:active, #cover-card a:visited {
  color: #f18142;
}

#cover-card-content {
  flex-direction: column;
  padding-left: .5em;
  padding-right: .5em;
}

img {
  height: 10em;
  width: auto;
}

dt {
  font-size: 1.2em;
  line-height: 1.3em;
}

dd {
  padding-bottom: 1em;
}

#launch-date {
  margin-top: .5em;
}

#launch-about {
  font-size: 1em;
  padding-bottom: 1em;
}

#launch-preorder {
  font-size: 1.1em;
}

#description-card-content,
#author-blurb,
#post-card-content {
  width: 300px;
  text-align: justify;
  padding: 0 .5em;
  box-sizing: border-box;
}

#author-info {
  flex-direction: column;
}

#author-image {
  padding-bottom: .5em;
}

#description-card-content p,
#author-card-content p,
#post-card-content p {
  padding-bottom: .5em;
}

#posts-card-content {
  width: 300px;
  box-sizing: border-box;
  padding: 0 .5em;
}

#posts-card-content ul {
  margin-left: 1em;
}

/* Media queries to enhance layout for progressively larger screens */
/* Breakpoints determined by content */

@media (min-width: 370px) {
  #nav-content {
    width: 370px;
  }

  #nav-home {
    padding-left: 1em;
  }

  #nav-blog {
    padding-right: 1em;
  }

  #toaes h1 {
    width: 370px;
  }

  #description-card-content,
  #author-blurb,
  #posts-card-content,
  #post-card-content {
    width: 370px;
    padding: 0 1em;
  }

  #launch-preorder {
    font-size: 1.3em;
  }
}

@media (min-width: 500px) {
  #nav-content {
    width: 500px;
  }

  p {
    line-height: 1.5em;
  }

  dt {
    font-size: 1.4em;
    line-height 1.5em;
  }

  dd {
    line-height: 1.5em;
    padding-bottom: 1.2em;
  }

  #toaes h1 {
    width: 500px;
  }

  #cover-card-content {
    flex-direction: row;
  }

  img {
    height: 10em;
  }

  #launch-teaser {
    padding-left: .5em;
  }

  #launch-date {
    margin-top: 0;
  }

  #launch-about {
    padding-top: .5em;
    padding-bottom: 1.5em;
  }

  #description-card-content,
  #author-blurb,
  #posts-card-content,
  #post-card-content {
    width: 500px;
  }
}

@media (min-width: 650px) {
  #nav-content {
    width: 550px;
  }

  #nav-home {
    padding-left: 0;
  }

  #nav-blog {
    padding-right: 0;
  }

  p, dd {
    line-height: 1.6em;
  }

  #toaes h1 {
    width: 500px;
  }

  #description-card-content,
  #posts-card-content,
  #post-card-content {
    width: 550px;
    padding: 0;
  }

  #description-card-content p,
  #author-card-content p,
  #post-card-content p {
    padding-bottom: 1em;
  }

  #author-image {
    padding-bottom: 0;
    padding-left: .5em;
  }

  #author-info {
    flex-direction: row;
  }

  #author-blurb {
    width: 480px;
  }
}

@media (min-width: 742px) {
  #toaes h1 {
    font-size: 5em;
    width: 742px;
  }

  .card {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .card h1 {
    font-size: 2em;
    padding-bottom: .5em;
  }

  img {
    height: 15em;
    width: auto;
    margin: 0;
  }

  #launch-teaser {
    padding-left: 1em;
  }

  #launch-about {
    font-size: 1.2em;
    padding-top: 0;
    padding-bottom: 2em;
  }

  #launch-preorder {
    font-size: 1.5em;
  }

  #author-image {
    padding-left: 1em;
    padding-right: 0em;
  }

  #author-blurb {
    width: 482px;
    padding-right: 1em;
    padding-left: 1em;
  }
}

@media (min-width: 870px) {
  #author-blurb {
    width: 550px;
  }
}

@media (min-width: 1220px) {
  #toaes h1 {
    width: 1200px;
    padding: .25em;
  }

  .card {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}