html {
  background-image: url(/images/forest-coffee-drinking-1400.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #333;

  overflow-x: hidden;
  background-position: center top;

  min-height: 100%;
  font-size: 18px;
}

body {
  font-size: 1rem;
  background: transparent;
  font-family: 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
  color: white;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  line-height: 1.25rem;
}

h1, h2 {
  font-family: 'Raleway', 'HelveticaNeue UltraLight', 'Helvetica Neue UltraLight', Helvetica, Arial, sans-serif; 
  text-transform: uppercase;
  line-height: 2.5rem;
  text-rendering: optimizelegibility;
}

h1 {
  font-weight: 200;
  font-size: 4rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 4rem;
  text-shadow: 0 0 0.5rem rgba(0,0,0,0.7), 0 0 3rem rgba(0,0,0,1), 0 0 3rem rgba(0,0,0,1);
}

h2 {
  font-size: 1rem;
  font-weight: 600;
  display: inline;
  text-shadow: 0 0 0.5rem rgba(0,0,0,0.7), 0 0 1.5rem rgba(0,0,0,0.5);
  white-space: nowrap;
}

.summary {
  margin-bottom: 2rem;
}

.profile {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
  position: absolute;
  bottom: 1.5rem;
  text-align: right;
  padding-right: 2rem;
  padding-left: 2rem;
}

.connect ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.connect li {
  display: inline;
  font-weight: bold;
}

@media (min-width: 440px) {
  .summary h2 + h2:before{
    color: rgba(255,255,255,0.5);
    content: " | ";
    padding: 0 5px;
    white-space: nowrap;
  }
}

.connect a, .connect a:hover, .connect a:visited {
  font-size: 1.5rem;
  text-decoration: none;
}

.connect a [class^="fa-"], .connect a [class*=" fa-"] {
  color: white;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  vertical-align: middle;
}

.connect a:hover [class^="fa-"], .connect a:hover [class*=" fa-"] {
  color: black;
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
}
.connect a:hover .fa-envelope { color: green; }
.connect a:hover .fa-twitter  { color: #00aced; }
.connect a:hover .fa-facebook { color: #3b5998; }
.connect a:hover .fa-flickr   { color: #ff0084; }
.connect a:hover .fa-linkedin { color: #4875b4; }

.connect a .fa-envelope       { font-size:0.90em; }

.connect a i {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.surname, .nowrap {
  white-space: nowrap;
}

@media (min-width: 1025px) {
  html {
    background-image: url(/images/forest-coffee-drinking-2800.jpg);
  }
}

@media (max-width: 560px), (max-height: 350px) {
  html {
    font-size: 14px; /* changes our rem base */
    background-image: url(/images/forest-coffee-drinking-800.jpg);
  }

  .profile {
    bottom: 1rem;
    text-align: center;
    /*position: static;*/
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

/*  h1 {
    margin-top: 2rem;
    margin-bottom: 5rem;
  }*/

  .surname {
    font-size: 0.6em;
  }

  .summary {
    margin-bottom: 0.5rem;
  }

  .connect ul {
    /*padding-left: 3rem;
    padding-right: 3rem;*/
    padding-bottom: 0.5rem;
  }

  .connect a, .connect a:hover, .connect a:visited {
    color: white;
    /*font-size: 2em;*/
    line-height: 1.25em;
    text-decoration: none;
  }

}

@media (max-height: 250px) {
  .profile {
    top: 0.5rem;
    position: absolute;
  }
}