:root {
    --color-text: #333;
    --color-background: #ece8ec;
    --color-hero: #2c4;
    --color-shadow: #444;
    --shadow-hero: 0 .2pt 12pt var(--color-shadow);
}

*, *:before, *:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Slabo 27px', serif;
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.hero {
    font-family: 'Fugaz One', cursive;
    font-size: 6vw;
    color: var(--color-hero);
    background-color: var(--color-shadow);
    text-align: center;
    padding: 4vh 0;
    flex-grow: 0 0;
    box-shadow: var(--shadow-hero);
}
.message {
    flex-grow: 0;
    font-size: 250%;
    text-align: center;
    padding: 3vh 0;
}
.directions {
    font-size: 125%;
    flex-grow: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.legal {
    font-family: sans-serif;
    text-align: center;
    font-size: 70%;
}

.directions form {
    font: inherit;
    display: inline-block;
    margin-top: 2vh;
    text-align: right;
}
.directions input,
.directions textarea {
    font: inherit;
    border: 1px solid #444;
}
.directions input[required] {
    border-color: #c00;
}
.directions textarea {
    width: 100%;
    resize: none;
}
.directions label + input,
.directions label + textarea {
    margin-left: 2rem;
}
.directions input ~ input {
    margin-top: 1vh;
}