body {
  min-height: 100vh;
  background: url('/css/background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background: cover;
  font-family: Futura, Helvetica, Arial, Sans-serif;
  margin-top: 1%;
}


.header a, #name{
  color: white;
  font-size: 2em;
}

.navlink{
  margin-top: 1%;
}
#main-display{

  padding: 5%;
  margin-top: 5%;
  font-size: 4em;
  color: white;
  border: 2px solid white;
  text-align: center;
}

#main-display img {
  width: 100%;
}

p {
  font-size: .5em;
}

.about-text{
  font-size: .5em;
}

#social-media{
  border: none;
}

a.back-to-top {
  display: none;
  width: 64px;
  height: 64px;
  position: fixed;
  z-index: 2;
  bottom: 5%;
  left: 5%;
  background: url("up-arrow.png") no-repeat center;

}
#email{
  color: white;
}
#skills{
  margin-top: 5%;
}


.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
}

.footer {
    margin-top: 3%;
    margin-bottom: 3%;
    bottom: 0;
    width: 100%;
}

#headshot{
  max-width: 30%;
}

h3 {
  font-size: 1.5em;
}

.ng-enter {
  transition: 1.25s;
  opacity: 0; }
.ng-enter-active {
  opacity: 1; }

@media screen and (min-device-width: 600px) {

  #social-media a, .header a, #email, a{
    transition: opacity 0.5s ease;
    text-decoration: none;
  }
  #social-media a:hover, .header a:hover, #email:hover, a:hover {
    opacity: .5;
    text-decoration: none;
  }
}
@media screen and (max-device-width: 800px) {
  #headshot{
    max-width: 65%;
  }
  .about-text{
    font-size: 1.25em;
  }
  body{
    margin-top: 5%;
  }
  #name{
    margin-bottom: 10%;
    font-size: 3.5em;
  }
  .sm-icons {
      margin-top: 15%;
      width: 125px;
  }
  p {
    font-size: 1.2em;
    line-height: normal;
  }

  #main-display{
    font-size: 4em;
    margin-top: 15%;
    line-height: 200%;
  }
  .header{
    margin-top: 15%;
  }
  .navlink a {
    font-size: 3.25em;
  }
}