body,
input {
    font: 700 20px/32px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Fira Sans', Ubuntu, Tahoma, 'Droid Sans', sans-serif;
}

html {
    background: url(../images/purple-tile.svg) #9B1A46 fixed;
}

body {
    background: url(../images/tile.gif) #9ac4c9;

    border-width: 3vw 1vw;
    border-color: #f5c71a;
    border-style: solid;
}

@media (min-width: 600px) {
    body,
    input {
        font-size: 26px;
        line-height: 40px;
    }
}

body {
    margin: 1vw auto;
    padding: 0 2vw;

    max-width: 600px;
}

h1,
h2,
input[type=submit] {
    line-height: 1.2;

    background: #CD3423;
    color: white;
}

label {
    background-image: linear-gradient(0,#CD3423 0,#CD3423 4px,rgba(0,0,0,0) 4px);
}

input[type=text] {
    border: 4px solid #CD3423;

    box-sizing: border-box;

    display: block;
    width: 100%;

    margin: 0.5em 0;
    padding: 0.0625em 0.25em;
}

input[type=submit] {
    line-height: 1.6;

    border: 0;
    padding: 0.0625em 0.125em;

    text-decoration: underline;
}

h1,
h2,
code {
    font-family: 'Lucida Console', Monaco, Consolas, 'Fira Mono', 'Ubuntu Mono', 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
}

h1 {
    color: white;

    margin: 0 0 1em 0;
    padding: 0.25em 0;

    width: calc(100% + 4vw);

    position: relative;
    right: 2vw;

    text-align: center;
}

p {
    margin-top: 0;
}

a:link,
a:visited {
    color: white;
    background: #680068;

    padding: 0.0625em 0.125em;
    line-height: 0;
}

h2 {
    margin-top: 2em;
    padding: 0.25em;
}


figure { text-align: center; margin: 1em auto; width: 80%; }
figure img { width: 100%; height: auto; }

figure.result a {
    background: none;
    padding: 0;
}

ul {
    line-height: 2;
}

nav {
    margin-top: 3em;
}