body {
    font-family: sans-serif;
    color: #555;
    background-color: #fff;
    text-align: center;
    font-size: 0.8em;
}

a, a:visited { color: #555; }

#login-window {
    width: 100%;
    max-width: 400px;
    display: inline-block;
    padding: 0px;
    border: 1px solid #aaa;
    background-color: #fff;
    text-align: center;
    box-shadow: 3px 3px 5px #aaa;
}

.error {
    padding: 5px;
    font-weight: bold;
    color: #fff;
    background-color: #ff3333;
    border: 1px solid #ff0000;
    margin-bottom: 10px;
}

.hint {
    padding: 5px;
    background-color: #ffffa3;
    border: 1px solid #b8b876;
    color: #555;
}

.logintext {
    font-weight: bold;
    font-size: 1.1em;
}

.appstore-badge {
    vertical-align: middle;
    height: 45px;
}

.formfield {
    margin-top: 4px;
}

.formfield label {
    width: 30%;
    display: inline-block;
    text-align: right;
}

.formfield input, .formfield select {
    width: 49%;
    height: 25px;
    border: 1px solid #555;
    font-size: 1.1em;
}

button { 
    border: 1px solid #3a87cd;
    background: #3a87cd;
    color: #fff;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
}

img {
    vertical-align: middle;
}

button:hover {
    opacity: 0.7;
}

p {
    text-align: center;
}

#splash {
    width: 400px;
    height: 200px;
}

#loginform {
    margin-top: 20px;
}

.logo {
    margin-top: 20px;
}

#splash img {
    width: 400px;
    height: 200px;
    object-fit: contain;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #ddd;
        background-color: #000;
    }
    #login-window {
        background-color: #111;
        box-shadow: 3px 3px 5px #444;
    }
    a, a:visited { color: #ddd; }
    .formfield input, .formfield select {
        background-color: #111;
        color: #ddd;
    }
}