body {
    background-color: #178edb;
    color: #1d2633;
    font-family: "Web64 Roundabout", "Web64 Droid Sans", "Web64 AT01", monospace;
    font-size: 16px;
    line-height: normal;
    text-align: left;
    margin: 0;
    padding: 0;
}
a { color: #123d82; }
p { margin: 0 0 8px 0; padding: 0; }
h1, h2 { font-family: "Web64 Slab", "Web64 Roundabout", "Web64 AT01", monospace; margin: 0; padding: 0; }
pre { margin: 0; padding: 0; }

/* Keep the playful Web64 masthead, then switch to a restrained docs palette. */
.hero-banner { margin: 0; padding: 0 0 7px 0; background-color: #168fdf; background-image: url("images/banner.png"); background-repeat: no-repeat; background-size: 100% 100%; }
.site-title { display: block; margin: 0 auto; padding: 0; }
.tagline { color: #fff; font-family: "Web64 Slab", "Web64 Roundabout", monospace; font-size: 20px; text-align: center; margin: 3px 0 1px 0; }
.page-shell { max-width: 560px; margin: 0 auto; padding: 8px; background-color: #eee7d1; border: 3px solid #173a5e; }

.nav-row { margin: 0 0 8px 0; padding: 0; text-align: center; }
.nav-link {
    display: inline-block;
    color: #fff;
    font-family: "Web64 Slab", "Web64 Roundabout", monospace;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    width: 127px;
    margin: 0 4px 0 0;
    padding: 0 2px;
    vertical-align: top;
    border: 3px outset #173a77;
    border-radius: 12px;
    outline: 1px solid #000;
    box-shadow: inset -1px -1px 16px rgba(0,0,0,0.18);
}
.nav-icon { display: inline-block; vertical-align: middle; margin: 2px 3px 2px 0; padding: 0; border: none; outline: none; }
.nav-home { background-color: #1c64c7; border-color: #103d8c; }
.nav-about { background-color: #e96c14; border-color: #9a3d08; }
.nav-docs { background-color: #863bd0; border-color: #53208e; }
.nav-docs { margin-right: 0; }
.nav-links { background-color: #1c9fb0; border-color: #0a6779; }

.docs-heading-card { display: block; margin: 0 0 8px 0; padding: 0; background-color: #faf7ed; border: 2px solid #0a6779; }
.docs-heading-title { display: block; color: #fff; font-size: 20px; line-height: 30px; margin: 0; padding: 1px 6px; background-color: #1c8fa0; }
.docs-heading-copy { margin: 0; padding: 8px 10px 10px 10px; }
.title-icon { display: inline-block; vertical-align: middle; margin: 2px 4px 2px 2px; padding: 0; border: none; outline: none; }

.docs-layout { display: block; margin: 0; padding: 0; text-align: left; }
.docs-sidebar { display: inline-block; width: 120px; margin: 0 8px 0 0; padding: 4px; vertical-align: top; background-color: #173a5e; border: 2px solid #0c263e; }
.docs-sidebar-title { color: #fff8d7; font-family: "Web64 Slab", "Web64 Roundabout", monospace; text-align: center; margin: 1px 0 5px 0; }
.docs-side-link { display: block; color: #fff; font-family: "Web64 Slab", "Web64 Roundabout", monospace; font-size: 16px; line-height: 20px; text-align: left; margin: 0 0 5px 0; padding: 2px 4px; background-color: #244e73; border: 2px solid #0c3155; }
.docs-side-icon { display: inline-block; vertical-align: middle; margin: 1px 3px 1px 0; padding: 0; border: none; outline: none; }
.docs-side-home, .docs-side-build, .docs-side-html, .docs-side-css, .docs-side-fonts, .docs-side-assets, .docs-side-starter { background-color: #244e73; border-color: #0c3155; }
.docs-side-current { background-color: #1c8fa0; border-color: #0a6779; border-style: inset; }

.docs-main { display: inline-block; width: 412px; margin: 0; padding: 0; vertical-align: top; }
.page-title { color: #fff; font-size: 24px; line-height: 34px; margin: 0 0 7px 0; padding: 2px 9px; background-color: #173a5e; border: 2px solid #0c263e; }
.page-lead { margin: 0 0 9px 0; padding: 8px 10px; background-color: #edf4f8; border: 2px solid #8aa4c5; }
.section { display: block; margin: 0 0 9px 0; padding: 0; background-color: #faf7ed; border: 2px solid #a99768; }
.section-title { color: #fff; font-size: 18px; line-height: 26px; margin: 0; padding: 2px 7px; background-color: #244e73; }
.section-title-blue, .section-title-green, .section-title-purple, .section-title-orange, .section-title-red { background-color: #244e73; }
.section-body { margin: 0; padding: 8px; }
.compact-body { padding-top: 0; }

.support-row { display: block; margin: 0 0 5px 0; padding: 5px 6px; background-color: #f0ead7; border: 1px solid #c7b98f; }
.support-name { display: inline-block; width: 125px; margin: 0; padding: 0; vertical-align: top; color: #123d82; font-family: "Web64 Slab", "Web64 Roundabout", monospace; }
.support-detail { display: inline-block; width: 245px; margin: 0; padding: 0; vertical-align: top; }
.inline-code { font-family: "Web64 Fira Mono Bold", "Web64 AT01", monospace; color: #5c327f; }
.code, .reference { display: block; margin: 7px 0 0 0; padding: 7px; font-family: "Web64 Fira Mono Bold", "Web64 AT01", monospace; font-size: 14px; line-height: 18px; color: #15243a; background-color: #f2f6ff; border: 2px inset #8aa4c5; }
.reference { color: #243018; background-color: #f1f7dc; border-color: #9bb06a; }

.step-row { display: block; margin: 0 0 6px 0; padding: 5px; background-color: #f0ead7; border: 1px solid #c7b98f; }
.step-number { display: inline-block; width: 28px; height: 28px; line-height: 28px; color: #fff; text-align: center; margin: 0 6px 0 0; background-color: #244e73; border: 2px solid #0c3155; vertical-align: top; }
.step-copy { display: inline-block; width: 330px; vertical-align: top; }
.step-label { display: block; width: auto; margin: 0; color: #123d82; font-family: "Web64 Slab", "Web64 Roundabout", monospace; }
.step-detail { display: block; width: auto; margin: 0; }

.architecture-layer { display: block; color: #1d2633; text-align: center; margin: 0 0 4px 0; padding: 6px; background-color: #e6eef5; border: 2px solid #8aa4c5; }
.layer-page, .layer-dns, .layer-network, .layer-device { background-color: #dceaf3; border-color: #7292ad; }
.layer-http, .layer-transport, .layer-link { background-color: #edf3f7; border-color: #9aafc0; }

.dimension-stage { margin: 0 0 7px 0; padding: 5px; background-color: #152c50; border: 2px solid #0c1a31; }
.dimension-toolbar { color: #fff; text-align: center; padding: 5px; background-color: #1c8fa0; border: 2px solid #fff; }
.dimension-page { color: #fff; text-align: center; height: 118px; padding: 8px; background-color: #244e73; border: 2px solid #fff; }
.dimension-shell { width: 82%; margin: 15px auto 0 auto; padding: 20px 4px; color: #1d2633; background-color: #faf7ed; border: 2px solid #a99768; }

.tag-cloud, .unit-grid { margin: 0 0 6px 0; }
.tag-pill, .unit-pill { display: inline-block; color: #fff; margin: 2px; padding: 4px 7px; background-color: #244e73; border: 2px solid #0c3155; }
.unit-pill { min-width: 38px; text-align: center; }
.property-columns { text-align: center; margin: 6px 0 0 0; }
.property-column { display: inline-block; width: 112px; height: 118px; margin: 2px; padding: 5px; vertical-align: top; text-align: left; background-color: #f0ead7; border: 1px solid #c7b98f; }
.property-heading { color: #123d82; font-family: "Web64 Slab", "Web64 Roundabout", monospace; text-align: center; }

.opacity-demo { text-align: center; margin: 6px 0; padding: 7px; background-color: #e6eef5; border: 1px solid #9aafc0; }
.opacity-swatch { display: inline-block; color: #fff; margin: 2px; padding: 8px; background-color: #244e73; border: 2px solid #fff; }
.background-demo { height: 54px; line-height: 54px; text-align: center; margin: 5px 0; background: #dcecff; background-image: url("images/background2.png"); background-repeat: repeat; background-size: 28px 28px; border: 2px solid #1c8fa0; }
.css-demo-row { text-align: center; margin: 4px 0; }
.css-demo-box { display: inline-block; width: 100px; height: 35px; line-height: 35px; margin: 2px; padding: 2px; vertical-align: middle; text-align: center; background-color: #fff; }
.shadow-demo { border: 3px solid #174f78; box-shadow: 5px 5px 6px rgba(0,0,0,0.35); }
.inset-demo { border: 3px solid #5c327f; box-shadow: inset -3px -3px 8px rgba(0,0,0,0.25); }
.outline-demo { border: 3px solid #527c46; outline: 3px solid #b26a2a; outline-offset: 2px; }

.font-demo { display: block; margin: 0 0 5px 0; padding: 7px; background-color: #fff; border: 1px solid #c7b98f; }
.font-name { color: #123d82; font-family: "Web64 Fira Mono Bold", "Web64 AT01", monospace; font-size: 14px; margin: 0 0 3px 0; }
.font-sample { font-size: 20px; margin: 0; }
.asset-preview { text-align: center; margin: 6px 0 0 0; padding: 8px; background-color: #e6eef5; border: 2px inset #8aa4c5; }
.asset-thumb { display: inline-block; vertical-align: middle; margin: 4px 14px; }
.footer { color: #fff8d7; text-align: center; margin: 2px 0 0 0; padding: 6px; background-color: #173a5e; border: 2px solid #0c263e; }
.footer-link { color: #fff; }