@font-face {
    font-family: 'HRPK';
    src: url('../fonts/HRPKWeb-Regular.woff2') format('woff2'),
         url('../fonts/HRPKWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Metric-Regular';
    src: url('../fonts/MetricWeb-Regular.woff2') format('woff2'),
         url('../fonts/MetricWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

body {
    font-family: "Metric-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
}

strong, b, h1, h2, h3 {
    font-family: "HRPK", "Arial Black", sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 4rem;
}
h2 {
    font-size: 2rem;
}

.page-container {
    width: 960px;
    margin: 50px auto;
}

.page-footer {
    font-size: 14px;
    margin-top: 100px;
}

@media only screen and (max-width: 959.98px) {
    body {
        font-size: 18px;
    }
    .logo {
        width: 100%;
        height: auto;
    }
   .page-container {
        width: 95%;
        margin: 15px auto;
   }
       h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1rem;
    }
}