/* split into sections for screen width, to adjust for added automatic line breaks on smaller screens; required for correctly sizing the header/footer spaces */

@media (width < 450px) {
    .header {
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -270px; /* same as .content -> margin-top */
        height: 250px; /* margin-top -20 */
        text-align: center;
    }

    .headerImage {
        width: 1px; /* basically, remove the club logo from the header */
        height: 1px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
    }

    .content {
        margin-top: 270px; /* same as .header -> margin-top */
        min-height: 80vh;
    }

    body::after {
        content: '';
        display: block;
        height: 120px; /* same as .footer -> height */
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 120px; /* same as body::after -> height */
        background-color: green;
    }
}
@media (450px <= width <= 650px) {
    .header {
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -250px;
        height: 230px;
        text-align: center;
    }

    .headerImage {
        width: 1px;
        height: 1px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
    }

    .content {
        margin-top: 250px;
        min-height: 80vh;
    }

    body::after {
        content: '';
        display: block;
        height: 75px;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 75px;
        background-color: green;
    }
}
@media (650px <= width <= 850px) {
    .header {
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -210px;
        height: 190px;
        text-align: center;
    }

    .headerImage {
        width: 1px;
        height: 1px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
    }

    .content {
        margin-top: 210px;
        min-height: 80vh;
    }

    body {
        min-height: 100vh;
        position: relative;
    }

    body::after {
        content: '';
        display: block;
        height: 75px;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 75px;
        background-color: green;
    }
}
@media (850px <= width <= 950px) {
    .header {
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -190px;
        height: 170px;
        text-align: center;
    }

    .headerImage {
        width: 1px;
        height: 1px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
    }

    .content {
        margin-top: 190px;
        min-height: 80vh;
    }

    body {
        min-height: 100vh;
        position: relative;
    }

    body::after {
        content: '';
        display: block;
        height: 50px;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: green;
    }
}


@media (950px <= width <= 1150px) {
    .header {
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -140px;
        height: 120px;
        text-align: center;
    }

    .headerImage {
        width: 1px;
        height: 1px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
    }

    .content {
        margin-top: 140px;
        min-height: 80vh;
    }

    body {
        min-height: 100vh;
        position: relative;
    }

    body::after {
        content: '';
        display: block;
        height: 50px;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: green;
    }
}

@media (width>1150px) {
    .header {
        padding: 10px;
        width: 100%;
        background-color: green;
        color: white;
        position: fixed;
        margin-top: -140px;
        height: 120px;
        text-align: center;
    }

    .headerImage {
        width: 91px; /* decent logo size, adjusted to height */
        height: 120px;
    }

    .headerImage1 {
        float:left;
    }
    .headerImage2 {
        float:right;
        padding-right: 30px; /* need to adjust right padding to 3x .header -> padding */
    }

    .content {
        margin-top: 140px;
        min-height: 80vh;
    }

    body {
        min-height: 100vh;
        position: relative;
    }

    body::after {
        content: '';
        display: block;
        height: 50px;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: green;
    }

}