@font-face {
    font-family: 'normal';
    src: url(londonbold.otf);
}

@font-face {
    font-family: 'coolcat';
    src: url(notethis.otf);
}

* {
    font: 3rem/1.3em normal;
}

html, body {
    background: #eee url(coolcats.png) center/contain no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    display: table;
    font-size: 10px;
    color: #333;
}

main {
    display: table-cell;
    vertical-align: middle;
    margin: 3rem;
}

section {
    position: relative;
    margin: 15rem auto;
    max-width: 60rem;
    background: #fff;
    border: 1px solid #777;
    border-radius: 3rem;
    box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.2);
    padding: 3rem;
    text-align: center;
}

div {
    position: relative;
    margin: 15rem auto;
    width: 40rem;
    height: 40rem;
    background: none;
    border: none;
}

h1 {
    font: 4rem normal;
}

p, label, input {
    display: block;
    margin: 3rem auto;
}

input {
    border: 1px solid #777;
    border-radius: 1rem;
    padding: 1rem 3rem;
    text-align: center;
    background: #eee;
}

input[type="text"] {
    font-family: coolcat;
    color: #8a6516;
}

input[type="submit"] {
    background: #8a6516;
    color: #fff;
    cursor: pointer;
}

a, a:active, a:visited {
    color: #8a6516;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    display: block;
    margin: 1rem auto;
    width: 42%;
    height: auto;
    border: 1px solid #fff;
    border-radius: 2rem;
}

.note {
    font-size: 2rem;
    font-style: italic;
    color: #aaa;
}