/* Style the elements. */

* {
    box-sizing: border-box;
}

h1 {
    font-size: 2rem;
    font-size: calc(1.2rem + 1.2vh + 1.2vw);
    font-size: calc(1.2rem + 1.2dvh + 1.2dvw);
    letter-spacing: 0.4rem;
    letter-spacing: calc(0.12rem + 0.12vh + 0.12vw);
    letter-spacing: calc(0.12rem + 0.12dvh + 0.12dvw);
    padding-bottom: 2rem;
    padding-bottom: calc(2rem + 2vh + 2vw);
    padding-bottom: calc(2rem + 2dvh + 2dvw);
}

p {
    font-size: 1rem;
    font-size: calc(0.6rem + 0.6vh + 0.6vw);
    font-size: calc(0.6rem + 0.6dvh + 0.6dvw);
    letter-spacing: 0.2rem;
    letter-spacing: calc(0.12rem + 0.12vh + 0.12vw);
    letter-spacing: calc(0.12rem + 0.12dvh + 0.12dvw);
}


/* Style the page. */

body {

    /* Remove margin. */
    margin: 0;

    /* Default font. */
    font-family: sans-serif;
    text-transform: uppercase;

    /* Exactly fill the viewport. Prefer dynamic viewport dimensions. Fallback to viewport dimensions. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;

    /* Background. */
    background-color: black;

}

main {

    display: flex;
    flex-direction: column;
    align-items: center;

    /* Prefer dynamic viewport dimensions. Fallback to viewport dimensions. */
    height: 94vh;
    height: 94dvh;

}

.splash {

    /* Allow wrapper+image to scale down. */
    min-height: 0;

}

.splash img {

    /* Allow wrapper+image to scale down. */
    height: 100%

}

main h1 {
    color: #339bd6;
}


footer {

    /* Content height plus footer height equals viewport height. Prefer dynamic viewport dimensions. Fallback to
    viewport dimensions. Attach footer to bottom of viewport. */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6vh;
    height: 6dvh;

    /* Dark gray. */
    background-color: #707070;

    /* Center footer content. */
    display: flex;
    align-items: center;
    justify-content: center;

}

footer p {
    color: #e2e2e2;
}