body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#000;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("IMG_8891.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#missing .hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("IMG_0184.jpg");
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text a {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  width:50px;
  color: #ddd;
  background-color: #212121;
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  text-decoration:none;
  -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: transparent;
  color: #212121;
  border-bottom: 2px solid #212121;
  border-top: 2px solid transparent;
}

.hero-text a:hover {
    text-decoration:none;
    color: #8F8B88;
  background-color: #212121;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
}

.hero-text a span:before {content:' link ';}
.hero-text a:hover span:before {content:'email'}
#missing .hero-text a:hover span:before {content:'home'}