/* Shared styles for the app pages. An app sets its own colours by overriding these variables. */

:root {
    --background: rgb(64, 140, 201);
    --text: rgba(255, 255, 255, 0.85);
    --heading: #fff;
    --rule: rgba(255, 255, 255, 0.33);
}

* {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: underline;
}

body {
    background: var(--background);
    color: var(--text);
    font: 1em/1.5 ui-sans-serif, sans-serif;
    margin: 2em auto;
    max-width: 42em;
    padding: 0 1.25em;
}

h1 {
    font-size: 1.75em;
    margin-bottom: 0.25em;
}

h2 {
    font-size: 1.1em;
    margin: 1.5em 0 0.5em;
    color: var(--heading);
}

p {
    margin: 0.75em 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 1.5em 0;
}

small {
    opacity: 0.67;
}

.definition {
    margin: 1em 0;
    opacity: 0.75;
}

.definition p {
    margin-top: 0.25em;
    opacity: 0.67;
}

.definition .pos {
    font-size: 0.85em;
    opacity: 0.67;
}

.effective {
    font-style: italic;
    opacity: 0.85;
}

footer {
    font-size: 0.875em;
    opacity: 0.75;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer nav {
    margin: 0.75em 0 1.5em;
    opacity: 0.67;
}

/* Where a page sits, above its heading, so the way back is the first thing on it. */
.breadcrumb {
    font-size: 0.875em;
    margin-bottom: 1em;
    opacity: 0.67;
}

.breadcrumb a {
    text-decoration: none;
}

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