/* Globals */
:root {
    --menuback: black;

    --splashback: black;
    --splashfore: white;

    --contentback: white;
    --contentfore: black;

    --footerback: black;
    --footerfore: white;
}

* {
    box-sizing: border-box;
}

.box {
    padding: 1em;
}

/* Menu */
.pure-menu {
    background-color: var(--menuback);
    text-align: right;
    height: 2em;
}
.pure-menu-heading {
    text-align: left
}

/* Splash */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

.splash-container {
    background: var(--splashback);
    color: var(--splashfore);
    height: 75vh;
    position: relative;
    overflow: hidden;
}
.splash {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 0; left: 0; bottom: 0; right: 0;
}
.splash-text {
    text-transform: uppercase;
}

/* Content */
.content-container {
    background: var(--contentback);
    color: var(--contentfore);
    width: 100%;
}
.content {
    padding: 2em 2em 2em;
    text-align: center;
}
.content-icon {
    font-size: 48px;
}

/* Footer */
.footer {
    background: var(--footerback);
    color: var(--footerfore);
    bottom: 0;
    width: 100%;
    font-size: 0.8em;
}
.footer-icon {
    font-size: 32px;
    padding: 0.2em;
}
.footer a {
    color: var(--footerfore);
    text-decoration: none;
}