body {
margin: 0;
padding: 0;
background-color: #edeae3;
}

.header-bg {
  background-image: url("mainpic_1920x1080.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: table;
  width: 100vw;
  height: 100vh;
}

.content h1{
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
        font-size: 4em;
        margin-top: -.5em;
        color: #c30164;
        font-family: 'Playfair Display', serif;
        font-weight: normal;
        }

.content h2{
        font-family: 'Candara';
        font-weight: normal;
        }

.content a{
  position: absolute;
  top: 60%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 20px;
  border: solid #ffffff 1px;
  padding: 7px;
  color: #ffffff;
  text-decoration: none;
  }

.content a:hover{
  background: rgba(255, 255, 255, 0.3);
  }


@media screen and (max-width:480px) {
    .header-bg{
        background-image: url("mainpic_960x540.jpg");
        background-position-x:30%;
    }
    .content h1{
        font-size: 25px;
        position: absolute;
        top: 58%;
        left: 50%;
    }
    .content a{
        font-size: 12px;
        position: absolute;
        top: 64%;
        left: 50%;
    }
}

@media (orientation: landscape) and (max-width: 767px){
    .header-bg{
        background-image: url("mainpic_960x540.jpg");
    }
    .content h1{
        font-size: 25px;
        position: absolute;
        top: 52%;
        left: 50%;
    }
    .content a{
        font-size: 12px;
        position: absolute;
        top: 62%;
        left: 50%;
    }
}