* {
    margin: 0;
}

html, body {
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 62.5%;
    color: white;
    background: linear-gradient(to bottom, #24a3ee 0%, #2470B9 100%);
}

body {
    font-size: 1.8rem;
}

h1, h2, h3 {
    font-weight: normal;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

a {
    color: white;
    text-decoration: underline;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -7rem;
    position: relative;
}

footer, .push {
    height: 7rem;
}

footer .footer-contents {
    font-size: 0.9rem;
    padding: 0 5rem;
    position: relative;
}

.logo-bar {
    max-height: 40px;
    width: auto;
}
.logo {
    max-width: 50%;
    max-height: 600px;
    height: auto;
    width: auto;
}

.website-nav {
    position: relative;
    padding: 5rem;
}

.website-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.website-nav ul li {
    float: left;
    padding: 0.5rem 2rem 0.5rem 0;
    line-height: 40px;
}

.website-nav ul li a {
    color: white;
    text-decoration: none;
}

.home-link {
    font-weight: bold;
}

.message {
    text-align: right;
    margin-bottom: 3rem;
    width: auto;
}

.message .text {
}

.message:after, .website-nav:after {
    content: " ";
    display: table;
    clear: both;
}

.page-content {
    padding: 1rem 5rem;
}

.page-content p {
    margin-bottom: 1rem;
}


@media (min-height: 500px) and (min-width: 700px) {
    .message {
        padding: 0;
        width: 50%;
        left: calc(50vw - 5rem);
        top: calc(15vh - 5rem);
    }

    .message .text {
        padding-right: 0rem;
    }

    .graphics {
        display: block;
    }

    .message img {
        width: 70%;
        height: 70%;
    }

    .page-content {
        padding: 3rem 5rem;
    }
}

@media (min-height: 500px) and (min-width: 1240px) {
    .message {
        left: calc(50vw - 10rem);
        top: calc(25vh - 5rem);
    }

    h1 {
        font-size: 5rem;
    }

    .message img {
        width: 80%;
        height: 80%;
    }
}

@media (min-aspect-ratio: 11/5) {
    .graphics {
        display: none;
    }
}