html {
    font-family: sans-serif;
    font-size: 1.7em;
    background:#fd9;
    color:#500;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: "Balsamiq Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@media screen and (min-width:800px) {
    h1 { font-size: 2.8em }
    h2 { font-size: 1.7em }
    p, table, .box { font-size: 1em }
    .bullet::before {
        content: "\00A0\2022\00A0"  /*  •  */
    }
}
@media screen and (max-width:799px) {
    h1 { font-size: 1.5em }
    h2 { font-size: 1em }
    p, table, .box { font-size: .85em }
    .bullet { display: block; }
}

h2 { margin-bottom: 0; }
h3 {
     font-size: .8em;
     font-weight: normal;
     font-style: italic;
}

.nowrap { white-space: nowrap }

.splashImage {
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.splashText {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    text-align: center;
    color: white;
}

.mainText {
    padding: 1em .5em;
    text-align: center;
}

.box {
    display: inline-block;
    margin: 0 1em;
    padding: .6em 1em;
    border: 5px solid #c86;
    border-radius: .5em;
    background: #ea8;
    color: #822;
    font-weight: bold;
}