/* Ballast's pages: the site's shared app page styles, with Ballast's colours, kept here so the
   same file serves the website and the in-app help. */

:root {
    --background: rgb(127, 206, 218);
    --text: rgba(0, 0, 0, 0.85);
    --heading: rgba(0, 0, 0, 0.85);
    --rule: rgba(0, 0, 0, 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;
}

/* The home page's platforms line, screenshot and App Store badge. */
.platforms {
    opacity: 0.67;
}

.screenshot img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    width: 320px;
}

.download a {
    text-decoration: none;
}

/* Inside the app, which sets .in-app on the root element, leave out what only makes sense on
   the website, marked .site: the way back to the home page, which the app doesn't bundle. */
.in-app .site {
    display: none;
}