@font-face {
    font-family: 'Fira Sans'; font-weight: 300; font-style: normal;
    src: url('/fonts/firasanslight.woff2') format('woff2'),
         url('/fonts/firasanslight.woff') format('woff');
}

html { margin: 0; padding: 0; }
body {
    font-family: 'Fira Sans', sans-serif;
    background-color: LightSteelBlue;
    color: #202020;
    text-shadow: 0 1px 1px white;
    margin: 0;
    padding: 0;
    font-size: 12pt;
    font-weight: 300;
}

header {
    background-color: steelblue;
    background: linear-gradient(dodgerblue,steelblue);
    margin: 0 0 1em;
    padding: 10px; 
    text-align: center;
}

#logo { filter: drop-shadow( 0 1px 1px rgba(0,0,0,1.0)); }

h2 {
    font-weight: 300;
    font-size: 18pt;
    margin: 0 auto;
    text-align: center;
}

.group {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    justify-content: space-evenly;
}

.item {
    text-align: left;
    margin: 1em 0.5em;
    padding: 0.5em;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 32em;
    width: 32em;
    background: whitesmoke;
    border-radius: 0.5em;
}

h3 {
    font-weight: 300;
    font-feature-settings: "ss04";
    font-size: 14pt;
    text-shadow: 0 1px 1px white;
    margin: 0 auto;
    color: black;
}

img.icon { float: left; margin-right: 0.5em; width: 64px; }

img.download-badge { float: none; clear: both; margin: 0.5ex 0em; }

p { font-size: 11pt; font-weight: 300; }

.item p { margin: 0; }

.item div { margin: 0 0 0 4.5em; }

footer {
    text-align: center;
    font-feature-settings: "ss04";
    font-variant-ligatures: discretionary-ligatures;
    font-weight: 300;
    text-shadow: 0 1px 1px white;
    padding: 10px;
    margin 0;
}

footer p {
    font-size: 9pt;
}

.small p {
    font-feature-settings: "ss04" off;
    font-size: 5pt;
    margin: 0;
}

a { text-decoration: none; color: navy; }

.opensource {
    font-variant: small-caps;
    font-size: 8pt;
    padding: 1px 4px;
    vertical-align: top;
    float: right;
}

.iosicon { border-radius: 15%; }

article {
    margin: 1em auto;
    padding: 1em;
    text-align: justify;
    max-width: 34rem;
    background: whitesmoke;
    border-radius: 0.5em;
}

article p { max-width: 34rem; }
article ul { font-size: 11pt; }
article li { font-size: 11pt; max-width: 31rem; }
abbr { font-feature-settings: "c2sc", "smcp"; }

@media print {
    body { background-color: transparent; text-shadow: none; color: black; }
    header { background: transparent; }
    h2 { color: black; margin-bottom: 6pt; padding: 0; }
    .item { background: transparent; }
    #logo { filter: none; }
}