html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
}

body, button {
    font-size: 12pt;
    font-family: sans-serif;
}

textarea {
    font-size: 12pt;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

pre {
    overflow: auto;
    font-size: smaller;
    line-height: 125%;
}

.link-button {
    padding: 0;
    background: none;
    border: none;
}

a, .link { color: #2A5DB0; }
a:link, a:visited, a:active, .link { text-decoration: none; }
a:hover, .link:hover { text-decoration: underline; }

.error { color: #a00; }

.errors li { color: #a00; }

.field-label {
    text-align: right;
}

.inline {
    display: inline;
}

nav {
    border-bottom: 1px solid #d5d5d5;
    background-color: #f5f5f5;
    padding: 10px;
    padding-left: calc(max(50% - 500px, 0px) + 15px);
    padding-right: calc(max(50% - 500px, 0px) + 15px);
}

nav a, nav .link {
    margin-right: 10px;
}

nav img {
    vertical-align: middle;
}

.page {
    max-width: 1000px;
    position: relative;
    left: calc(max(-500px,-50%) + 50%);
    padding: 15px;
}

.big-field-label {
    vertical-align: top;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #202124;
        color: #bdc1c6;
    }

    title, h1, h2, h3, h4, h5, h6 {
        color: white;
    }

    a, .link {
        color: #8ab4f8;
    }

    nav {
        background-color: #373e48;
        border-bottom: 1px solid #666;
    }
}
