:root {
    --ink: #333333;
    --paper: #FFFFFF;
    --pencil: #666666;
    --line: #DDDDDD;
    --red: #A6301E;
    --blue: #2B5A75;
    --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    padding: 20px;
    line-height: 1.5;
}

.wrap {
    max-width: 560px;
    margin: 40px auto;
    width: 100%;
    text-align: center;
}

.loading {
    color: var(--pencil);
    font-size: 15px;
    padding: 30px 0;
}

.spinner {
    width: 22px;
    height: 22px;
    margin: 0 auto 14px auto;
    border: 3px solid var(--line);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

h1 { font-size: 24px; margin: 0 0 10px 0; }
p { font-size: 14.5px; color: var(--ink); }

.btn {
    display: inline-block;
    margin-top: 14px;
    padding: 11px 22px;
    background: var(--blue);
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
.btn:hover { background: #1E4156; }

h1.error { color: var(--red); }