@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body {
  background-color: #efefef;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5em;
  color: #606c71;
}

h1, h2, h3, h4, h5, h6 {
  color: #ff291b;
}

h1 {
  line-height: 1.2em;
}

h3 {
  font-weight: normal;
}

a {
  color: #1955ff;
}

a:visited {
  color: #5e89d3;
}

#content {
  width: 960px;
  margin: 0 auto;
}

.page-header {
  position: relative;
}

#logo {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
}

@media screen and (min-width: 64em) {
  .page-header {
    height: 320px;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .page-header {
    height: 250px;
  }
}

@media screen and (max-width: 42em) {
  .page-header {
    height: 200px;
  }
}

section.page-header {
  background: #344fac url(images/background.jpg) no-repeat center top;
  background-size: cover;
}

section.page-header .btn {
  overflow: hidden;
  text-indent: -999em;
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  background: transparent url(images/github.png) no-repeat right top;
  background-size: contain;
  border: none;
  cursor: pointer;
  border-radius: 0;
}

.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
  color: #ff291b;
}

a {
  color: #1955ff;
}

@media screen and (max-width: 64em) and (min-width: 42em) {
  section.page-header .btn {
    width: 135px;
    height: 135px;
  }
}
@media screen and (max-width: 42em) {
  section.page-header .btn {
    width: 60px;
    height: 60px;
  }

  #content {
    width: 90%;
  }

  #logo {
    width: 375px !important;
    left: 0px !important;
  }
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    section.page-header {
      background-image: url(images/background@2x.jpg);
    }
    section.page-header .btn {
      background-image: url(images/github@2x.png);
    }
}

@media screen and (min-width: 64em) {
  .site-footer {
    font-size: 1rem;
  }
}

.site-footer {
  padding-top: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: solid 1px #ddd;
}

.site-footer-owner {
  display: block;
  font-weight: bold;
}

.site-footer-credits {
  color: #819198;
}