style.css

@font-face {
    font-family: "Helvetica Thin";
    src: url("HELVETICANEUE-THIN.OTF")
}


@font-face {
    font-family: "Helvetica";
    src: url("HELVETICA.OTF");
}

a {
    color: #fff;
}

h1 {
    text-transform: uppercase;
    font-size: 35pt;
    font-family: "Helvetica";
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
}

.headlink {
    position: absolute;
    top: 30px;
}

.headlink a {
    font-size: 35pt;
    text-decoration: none;
    font-family: "Helvetica Thin";
    color: #ccc;
}

.headlink a:hover {
    color: #fff;
}

.hashtag {
    font-family: "Helvetica";
    font-weight: 300;
}

.button {
    font-family: "Helvetica";
    color: #1E88E5;
    padding: 10px 20px;
    border: 0px;
    border-radius: 10px;
    text-decoration: none;
    background-color: #fff;
}

body {
    height: 100vh;
    background-image: url('header-bg.jpg');
    width: 100%;
    min-height:100%;
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
    font-size: 30pt;
    font-family: "Helvetica Thin";
    color: #fff;
}

@media only screen and (min-width:0px) and (max-width:500px) {
    body {
        font-size: 15pt;
        font-family: "Helvetica Thin";
        color: #fff;
    }
    h1 {
        text-transform: uppercase;
        font-size: 13pt;
        font-family: "Helvetica";
    }
    .center {
        position: none;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        padding:3em;
    }
}

@media only screen and (min-width:500px) and (max-width:770px) {
    body {
        font-size: 15pt;
        font-family: "Helvetica Thin";
        color: #fff;
    }
    h1 {
        text-transform: uppercase;
        font-size: 15pt;
        font-family: "Helvetica";
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


@media only screen and (min-width:1100px) and (max-width:2200px) {
    .center {
        transform: translate(-30%, -50%);
    }
}