body {
    background: #e1faff;
    font-family: 'Roboto Flex';
    font-weight: 700;
    font-stretch: 100%;
    margin: 0;
}

.header {
    text-align: center;
    background: #b7342a;
    height: 150px;
    border-bottom: 8px solid #595959;
}

.grid {
    margin: 0 auto;
    justify-content: center;
    width: 100%;
}

.book {
    width: 20%;
}

.book img {
    width: 100%;
    box-shadow: 0.1em 0.1em 0.5em #444;
}

.links {
    text-align: right;
    background: #b7342a;
    padding-right: 10px;
}

.links a {
    font-size: 16px;
    color: white;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}

.success {
    color: #1B7E20;
}

.error {
    color: red;
}

.grid {
    display: flex;
    flex-wrap: wrap
}

body[data-page=index] .content {
    max-width: 1100px;
    margin: auto;
}

body[data-page=index] .intro,
body[data-page=index] .footer {
    font-size: 16px;
    text-align: center;
    margin: 12px 0;
}

body[data-page=index] .footer {
    text-align: center;
}

body[data-page=index] .grid {
    text-align: center;
}

body[data-page=index] .book {
    display: inline-block;
    margin: 24px;
    min-width: 225px;
}

body[data-page=index] .book .heading {
    font-size: 24px;
    text-align: center;
    margin-bottom: 6px;
}

body[data-page=index] .book img {
    min-height: 291px;
}

body[data-page=signin] .content,
body[data-page=signout] .content {
    max-width: 800px;
    margin: 24px auto;
    border: 1px solid #ccc;
    padding: 0px 20px 20px 20px;
    line-height: 1.0;
}

body[data-page=signin] input[type=text],
body[data-page=signout] input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
        
body[data-page=signin] h2, 
body[data-page=signout] h2, 
body[data-page=signin] label {
    color: #1B7E20;
}

body[data-page=signin] button, 
body[data-page=signout] button {
    font-family: 'Roboto Flex';
    font-weight: 700;
    font-stretch: 100%;
    font-size: 16px;
    width: 100%;
    margin: 8px 0;
    height: 40px;
    color: white;
    border: none;
    cursor: pointer;
}

body[data-page=signin] button.notclicked, 
body[data-page=signout] button.notclicked {
    background-color: #1B7E20;
}

body[data-page=signin] button.clicked, 
body[data-page=signout] button.clicked {
    background-color: #ccc;
}

body[data-page=signin] .spinner, 
body[data-page=signout] .spinner {
    color: #ccc;
    font-size: 35px;
    text-align: center;
}