@font-face {
    font-family: 'Nimbus Sans';
    src: url('fonts/NimbusSansNarrow-Bold.woff');
}

@font-face {
    font-family: 'Nimbus Sanss';
    src: url('fonts/NimbusSans-Bold.woff');
}

@font-face {
    font-family: 'Blunt';
    src: url('fonts/Blunt Regular.otf');
}

body {
    font-family: 'Nimbus Sans';
    margin: 0;
    background-image: url('images/dlc_bg.png');
    background-attachment: fixed;
    background-size: 128px 128px;
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    font-size: 5vh;
    width: 100%;                     /* span full width */
    height: 10vh;
    display: flex;
    color: white;
    background-color: hsl(14, 69%, 38%);
    align-items: center;             /* vertically center text */
    justify-content: center;         /* horizontally center text */
}

img {
    padding-top: 5vh;
    padding-bottom: 5vh;
    height: 250px;
    width:auto;
}

.content {
    text-align: center;
    align-items: center;
    font-family: 'Nimbus Sanss';
    padding: 10%;
    font-size: 2.5vh;
    color: white;
    padding-top: 7vh;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll; /* prevents mobile lag */
    }

    .header {
        font-size: 6vw;   /* scale text instead of fixed vh */
        height: auto;     /* let it grow naturally */
        padding: 2vh;
        text-align: center;
    }

    img {
        width: 90%;
        height: auto;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }

    .content {
        padding: 5%;       /* reduce from 10% */
        font-size: 2vh;    /* slightly smaller text */
        padding-top: 4vh;
    }
}