* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;

    min-width: 480px;
    max-width: 640px;
    margin: 0 auto;

    color: #333;
}

#root {
    display: grid;

    min-height: 100vh;
    padding: 16px;

    grid-template-rows: 23px auto 23px;
}


nav,
footer {
    border-width: 1px;
    border-style: solid;
    border-color: #c0e0f0;
    border-radius: 4px;
    background-color: #cdedf6;
    padding: 8px;
    height: 35px;
}

nav a,
footer a {
    text-decoration: none;
    color: black;
    padding: 0 10px;
    border-left: 1px solid black;
}

nav a:nth-child(1) {
    border: none;
    padding-left: 0;
}

main {
    min-height: 180px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.score {
    font-weight: bold;
    text-align: center;
}

#table {
    line-height: 32px;

    width: 100%;

    border-collapse: collapse;

    text-align: left;
}

#table tbody tr:first-child td {
    padding-top: 22px;
}

#table th {
    font-weight: bold;
    line-height: 16px;

    border-bottom: 2px solid #000;
}

.table td {
    padding: 9px 8px 0 8px;
}

td.buttons {
    text-align: right;
}

#messages,
#errors {
    line-height: 27px;

    margin-bottom: 16px;
    padding: 4px 8px;

    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

#messages {
    color: #155724;
    border-color: #c3e6cb;
    background-color: #d4edda;
}

#errors {
    color: #721c24;
    border-color: #f5c6cb;
    background-color: #f8d7da;
}

#authors {
    line-height: 32px;

    display: flex;

    width: 100%;

    flex-wrap: wrap;
}

#authors div:nth-child(4n + 1) {
    flex-basis: 37%;
}

#authors div:nth-child(4n + 2) {
    flex-basis: 50%;
}

#authors div:nth-child(4n + 3) {
    flex-basis: 13%;
}

#authors div.header-divider {
    margin-bottom: 6px;
    padding-top: 3px;

    background-color: #666;
}

#input-form {
    display: flex;

    max-width: 448px;
    margin: 0 auto;
    padding-top: 32px;

    flex-wrap: wrap;
}

#input-form .label {
    line-height: 30px;

    width: 128px;
    padding-right: 16px;

    text-align: right;
}

#input-form .input {
    line-height: 30px;
}

#input-form .button2 {
    width: 304px;
    padding-top: 32px;
    /** same as input */

    text-align: right;
}

.br {
    height: 0;

    flex-basis: 100%;
}

input[type='text'],
input[type='password'],
input[type='submit'],
select,
.button {
    font-size: 13px;

    display: inline-block;

    width: 304px;
    margin-top: 3px;
    padding: 5px;

    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

input[type='submit'],
.button {
    font-size: 16px;

    width: 96px;

    cursor: pointer;

    color: white;
    border: none;
    background-color: #007bff;
}

input[type='submit'].danger,
.button.danger {
    background-color: #dc3545;
}

input[type='radio'] {
    width: unset;
}

#login-form {
    width: 400px;
    margin: 0 auto;
    padding-right: 80px;

    text-align: right;
}

#login-form input {
    width: 160px;
}

#login-form input[type='submit'] {
    width: 96px;
}

#log-out-link,
#lang-links {
    float: right;
}