body {
  font-family: "Source Serif Pro", serif;
  color: #434137;
  font-size: 1.1em;
  background-color: #FFFFFF;
}

header,
main {
  padding: 0 20px;
}

/*** wrapper div for both header and main ***/
.wrapper {
  margin-top: 10%;
}

/*** anchor tags ***/
a:link,
a:visited,
a:hover,
a:active {
  color: #054996;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*** logo ***/
.logo-container {
  text-align: center;
}

.logo {
  width: 96px;
  height: 96px;
  display: inline-block;
  background-size: cover;
  margin-top: -10px;
}

/******/
hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #434137, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #434137, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), #434137, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), #434137, rgba(0, 0, 0, 0));
}

/*** media queries ***/
/* X-Small devices (phones, 480px and up) */
@media (min-width: 480px) {
  /* wrapper stays 480px wide past 480px wide and is kept centered */
  .wrapper {
    width: 480px;
    margin: 10% auto 0 auto;
  }
}
/* All other devices (768px and up) */
@media (min-width: 768px) {
  /* past 768px the layout is changed and the wrapper has a fixed width of 680px
  to accomodate both the header column and the content column */
  .wrapper {
    width: 680px;
  }
  /* the header column stays left and has a dynamic width with all contents
  aligned right */
  header {
    float: left;
    width: 36%;
    text-align: right;
  }
  .author-container h1,
  .logo-container,
  .tagline-container p {
    text-align: right;
  }
  main {
    width: 56%;
    margin-left: 44%;
    padding: 0;
  }
}

/*# sourceMappingURL=main.css.map */