:root {
    --black        : rgb(65, 57, 70);
    --gray         : rgb(95, 90, 99);
    --gray-medium  : rgb(150, 150, 150);
    --gainsboro    : rgb(220, 220, 220);
    --gray-light   : rgb(247, 247, 247);
    --white        : rgb(255, 255, 255);
    --white-alpha  : rgba(255, 255, 255, 0.44);
    --pink         : rgb(173, 104, 216);
    --pink-light   : rgb(178, 155, 194);
    --pink-alpha3  : rgba(208, 146, 247, 0.20);
    --pink-alpha2  : rgba(208, 146, 247, 0.15);
    --pink-alpha1  : rgba(208, 146, 247, 0.10);
    --purple       : rgb(131, 57, 194);
    --purple-medium: rgb(94, 67, 112);
    --purple-dark  : rgb(103, 58, 131);
    --yellow-js    : rgb(247, 223, 30);
    --yellow-dark  : rgb(197, 166, 0);

    --font-main: "Open Sans", sans-serif;
    --font-code: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

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

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: var(--font-main);
}

.pure-button {
    border-radius: 0.25em;
}
a.pure-button:link,
a.pure-button:visited {
    color: var(--purple);
}
.pure-button-hover,
.pure-button-active,
.pure-button:hover,
.pure-button:focus,
.pure-button:active {
    filter: none;
    background-image: none;
    box-shadow: none;
}
.pure-button-primary,
a.pure-button-primary:link,
a.pure-button-primary:visited {
    color: var(--white);
    background-color: var(--purple);
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

html,
body {
    height: 100%;
}

body {
    min-width: 320px;
    line-height: 1.625;
    color: var(--gray);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--black);
    font-weight: 400;
    margin-top: 1.5em;
    margin-bottom: 0.25em;
}
h1 {
    font-weight: 300;
}

.tagline {
    line-height: 1.2;
}

a:link,
a:visited {
    color: var(--purple);
    text-decoration: none;
}

pre,
code {
    font-family: var(--font-code);
    color: var(--black);
    background: var(--gray-light);
}
code {
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
}
a:link code,
a:visited code {
    color: var(--purple);
}
p code,
li code {
    font-size: 90%;
}
.code {
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.code code {
    font-size: 90%;
    white-space: pre;
    word-wrap: normal;
    padding: 0;
    background: none;
}
.code-wrap code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.l-wrap,
.l-wrap-wide {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
.l-wrap-wide {
    max-width: 64rem;
}

.subheading {
    margin-top: 0;
    color: var(--gray);
}

.cta {
    text-align: center;
}
.cta-button {
    padding-left: 2em;
    padding-right: 2em;
}

.more:after {
    content: "›"
}

.tabs-tablist {
    margin-bottom: 0;
    list-style: none;
    display: flex;
    border-bottom: 1px solid var(--gainsboro);
}
.tabs-tab {
    margin-top: 0;
    margin-bottom: -1px;
    padding: 0.25rem 0rem;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    user-select: none;
}
.tabs-tab:first-child {
    margin-left: 0;
}
.tabs-tab:last-child {
    margin-right: 0;
}
.tabs-tab:hover {
    border-bottom: 3px solid var(--gainsboro);
}
.tabs-tab.is-selected {
    color: var(--purple-dark);
    border-bottom: 3px solid var(--purple-dark);
}

.example-source .code {
    margin-top: 0;
}
.example-output {
    margin-bottom: 1rem;
}
.example-output-heading {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}
.example-output-controls {
    font-size: 1rem;
    margin-top: 0.25rem;
    text-align: right;
}
.example-label {
    margin-right: 0.375rem;
}
.example-output-enter {
    opacity: 0.01;
}
.example-output-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.example .handlebars-output,
.example .react-output,
.example .dust-output
 {
    padding: 0 1em;
    border: 0.125rem solid var(--gainsboro);
    border-radius: 0.5rem;
}

.head {
    background: var(--purple-dark);
}
.head a:link,
.head a:visited {
    color: var(--white);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
}

.brand {
    line-height: 1.0;
}
.brand-mark {
    display: block;
}

.nav-menu {
    padding: 0;
    list-style: none;
    display: flex;
}
.nav-menu a {
    padding: 0.5rem 0.5rem;
}

.head .nav,
.splash .nav {
    justify-content: space-between;
    font-weight: 300;
}
.head .nav-menu,
.splash .nav-menu {
    margin: 0.625rem 0 0;
}
.head .nav-menu-item:first-child,
.splash .nav-menu-item:first-child {
    margin-left: 0;
}
.head .nav-menu-item:last-child,
.splash .nav-menu-item:last-child {
    margin-right: 0;
}
.head .nav-menu-item:hover span,
.splash .nav-menu-item:hover span {
    border-bottom: 3px solid var(--pink-light);
}
.head .nav-menu-item.is-active span,
.splash .nav-menu-item.is-active span {
    border-bottom: 3px solid var(--pink);
}

.foot .nav {
    justify-content: center;
}
.foot .nav-menu {
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.foot .nav-menu-item {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.foot .nav-menu-item:hover span {
    border-bottom: 2px solid var(--gainsboro);
}
.foot .nav-menu-item.is-active span {
    border-bottom: 2px solid var(--purple);
}

.splash {
    background: url("/img/splash-head.jpg") no-repeat;
    background-size: cover;
    color: var(--white);
    text-align: center;
}
.splash a:link,
.splash a:visited {
    color: var(--white);
}
.splash .tagline {
    color: var(--white-alpha);
}
.splash .nav {
    justify-content: flex-end;
    order: 1;
}
.splash .brand {
    width: 100%;
    order: 2;
}
.splash .brand-mark {
    background: url("/img/logo-splash.svg") no-repeat;
    background-size: contain;
    background-position: center;
}
.splash .nav-menu {
    margin-top: 1.25rem;
}
.splash .cta-button {
    background-color: var(--pink-alpha3);
}
.splash .cta-button:hover {
    background-color: var(--pink-alpha2);
}

.splash-example-container {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.splash-example-heading {
    margin: 0;
    color: var(--pink);
    font-size: 1rem;
    text-align: left;
    text-transform: uppercase;
}
.splash-example-output {
    padding: 1rem;
    border: 0.125rem solid var(--pink-alpha2);
    border-radius: 0.5rem;
    background-color: var(--pink-alpha1);
}
.splash-example-controls {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-top: 0.25rem;
}
.splash-example-control:first-child {
    margin-right: 0.25rem;
}
.splash-example-controls,
.splash-example-controls a:link,
.splash-example-controls a:visited {
    color: var(--pink);
}
.splash-example-label {
    margin-right: 0.375rem;
}

.about-content,
.standards-content {
    display: flex;
    flex-wrap: wrap;
}

.layers {
    margin: 1em 0;
}
.layer {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0;
    padding: 0.875rem 0.25rem;
    font-size: 0.875rem;
    color: var(--black);
    text-transform: uppercase;
}
.layer-integrations {
    color: var(--white-alpha);
    background: var(--purple-dark);
}
.layer-core {
    color: var(--white-alpha);
    background: var(--purple);
}
.layer-standards {
    color: var(--yellow-dark);
    background: var(--yellow-js);
}

.standards-logo {
    margin-left: auto;
    margin-right: auto;
}
.standards-logo img {
    display: block;
    margin: 0 auto;
}

.integrations-content,
.integrations-list,
.integration,
.integration-content,
.integration-brand {
    display: flex;
}
.integrations-content {
    flex-wrap: wrap;
}
.integrations-list {
    padding: 0;
    list-style: none;
    justify-content: space-between;
}
.integration {
    justify-content: space-around;
}
.integration-content {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.integration-name {
    order: 2;
    margin: 0.125rem 0 0;
}
.integration-brand {
    order: 1;
    flex-grow: 1;
    align-items: center;
}
.integration-mark {
    display: block;
    width: 100%;
}

.features-list,
.feature-ex,
.feature-ex-output {
    display: flex;
}
.features-list {
    flex-wrap: wrap;
}
.feature {
    margin-top: 1em;
    margin-bottom: 1em;
}
.feature-ex {
    align-items: center;
}
.feature-ex-input {
    background: transparent;
    font-size: 1.125rem;
}
.feature-ex-transform {
    height: 32px;
    width: 32px;
    opacity: 0.33;
}
.feature-ex-output {
    flex-direction: column;
    font-size: 1.25rem;
}
.feature-ex-output,
.feature-ex-output a:link,
.feature-ex-output a:visited {
    color: var(--yellow-dark);
}
.feature-ex-locale {
    font-size: 0.875rem;
    font-style: normal;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.repos {
    display: flex;
}
.repos {
    flex-wrap: wrap;
}
.repo {
    flex-grow: 1;
}
.repo-name {
    margin-top: 0.5rem;
}

.intro {
    text-align: center;
}
.intro-package {
    display: flex;
    flex-direction: column;
}
.intro-package-name {
    order: 2;
}
.intro-package-mark {
    display: block;
    margin: 0 auto;
    order: 1;
}
.intro .tagline {
    color: var(--gray-medium);
    font-weight: 300;
    margin-top: -0.5rem;
}

.package-meta {
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: var(--gray-medium);
}
.package-meta > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.package-meta b {
    font-weight: 400;
    color: var(--black);
}

.note {
    padding: 0.4em 0.8em;
    background-color: #FFFFEA;
    border-radius: 0.2em;
    border: 1px solid #E9E9D5;
}
.note pre,
.note code {
    background-color: rgb(245, 245, 199);
}

.foot {
    margin-top: 4rem;
    font-size: 0.875rem;
    border-top: 1px solid var(--gainsboro);
    background-color: var(--gray-light);
}

.legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.legal-clause {
    white-space: nowrap;
}

@media screen and (min-width: 0) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }

    .code,
    .tabs-tablist {
        font-size: 0.875rem;
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }

    .code,
    .tabs-tablist,
    .l-wrap,
    .l-wrap-wide {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    .tabs-tab {
        font-size: 0.875rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .cta {
        font-size: 1.125rem;
        margin: 4rem 0 2rem;
    }

    .brand-mark {
        margin: 0.5rem 0rem 0.5rem 0.5rem;
        width: 2.1484rem;
        height: 2.5rem;
        background-image: url("/img/logo-element.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .tagline {
        margin: -1rem 0 2rem;
    }

    .head .nav,
    .splash .nav {
        margin: 0 0.125rem 1rem;
    }

    .splash {
        padding-bottom: 2rem;
    }
    .splash .brand {
        margin: 1.8rem 0 0;
    }
    .splash .brand-mark {
        margin: 0 auto;
        width: 12.3436rem;
        height: 3rem;
    }
    .splash-example-output {
        font-size: 1.25rem;
    }

    .layers,
    .standards-logo {
        width: 100%;
    }

    .standards-logo img {
        max-width: 80px;
        max-height: 80px;
    }

    .integrations .integrations-list {
        width: 100%;
    }
    .integrations-list {
        margin: 0;
        flex-wrap: wrap;
    }
    .integration {
        width: 50%;
        margin: 1rem 0;
    }
    .integration-mark {
        max-width: 80px;
        max-height: 80px;
    }

    .feature {
        width: 100%;
    }
    .feature-ex {
        flex-direction: column;
    }
    .feature-ex-transform {
        margin: 0.5rem 0;
        background: url("/img/arrow-down.svg") no-repeat;
        background-position: top center;
        background-size: contain;
    }

    .repo {
        width: 100%;
    }

    .intro {
        padding-bottom: 2rem;
    }
    .intro-package-mark {
        margin-bottom: 0.25rem;
        max-width: 80px;
        max-height: 80px;
    }
    .intro-package-name {
        font-size: 2rem;
    }

    .package-meta-download {
        font-size: 0.875rem;
    }
    .package-install .code {
        font-size: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .legal {
        flex-wrap: wrap;
    }
    .legal-license,
    .legal-copyright {
        width: 100%;
        text-align: center;
    }
}

@media screen and (min-height: 0) {
    .splash {
        min-height: 100%;
    }
}

@media screen and (max-height: 20em) {
    .splash .cta {
        margin-top: 2rem;
    }
}

@media screen and (min-width: 21em) {
    .splash-example-control:first-child {
        margin-right: 1rem;
    }
}

@media screen and (min-width: 30em) {
    .tabs-tab {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .brand-mark {
        margin: 0.5rem;
        width: 9.2578rem;
        height: 2.5rem;
        background-image: url("/img/logo.svg");
    }

    .nav-menu-item {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .integrations-list {
        margin: 1rem 0;
        flex-wrap: nowrap;
    }
    .integration {
        margin: 0 1rem;
        width: auto;
    }
    .integration:first-child {
        margin-left: 0;
    }
    .integration:last-child {
        margin-right: 0;
    }
    .integration-mark {
        max-width: 128px;
        max-height: 128px;
    }

    .legal {
        flex-wrap: nowrap;
    }
    .legal-license,
    .legal-copyright {
        width: auto;
        flex-grow: 1;
    }
    .legal-license {
        text-align: left;
    }
    .legal-copyright {
        text-align: right;
    }
}

@media screen and (min-width: 35.5em) {
    .about-desc {
        width: 62%;
        order: 2;
    }
    .layers {
        width: 38%;
        order: 1;
        margin: 1.375em 0;
        padding-right: 1rem;
    }

    .standards-desc {
        width: 62%;
    }
    .standards-logo {
        width: 38%;
    }
    .standards-logo img {
        max-width: 128px;
        max-height: 128px;
    }

    .features-list {
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }
    .feature {
        padding: 0 0.625rem;
        width: 50%;
    }

    .repos {
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }
    .repo {
        width: 50%;
        padding: 0 0.625rem;
    }
    .repo-description {
        font-size: 0.875rem;
    }
}

@media screen and (min-height: 36em) {
    .splash {
        min-height: 50%;
    }
}

@media screen and (min-width: 36em) and (min-height: 36em) {
    .head .nav,
    .splash .nav {
        font-size: 1rem;
    }
}

@media screen and (min-width: 48em) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .code,
    .tabs-tablist {
        margin-left: 0;
        margin-right: 0;
    }

    .code {
        font-size: 1rem;
    }

    .tabs-tablist {
        padding-left: 0;
        padding-right: 0;
    }
    .tabs-tab {
        font-size: 1rem;
    }

    .code,
    .l-wrap,
    .l-wrap-wide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cta {
        font-size: 1.25rem;
    }

    .docs {
        font-size: 1.125rem;
    }

    .head .nav,
    .splash .nav,
    .foot .nav {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .head .nav-menu,
    .splash .nav-menu {
        font-size: 1.125rem;
    }

    .splash .brand {
        margin-top: 4rem;
    }

    .splash .brand-mark {
        width: 24.5154rem;
        height: 4.2rem;
    }

    .splash .nav-menu {
        margin-top: 1.1875rem;
    }

    .tagline {
        font-size: 1.875rem;
        margin-bottom: 4rem;
    }

    .layers {
        padding-right: 2rem;
    }

    .features-list {
        margin-left: -1rem;
        margin-right: -1rem;
    }
    .feature {
        padding: 0 1rem;
    }
    .feature-ex {
        flex-direction: row;
    }
    .feature-ex-input {
        width: 8rem;
    }
    .feature-ex-transform {
        margin: 0 1rem;
        background: url("/img/arrow-right.svg") no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .repos {
        margin-left: -1rem;
        margin-right: -1rem;
    }
    .repo {
        padding: 0 1rem;
    }
    .repo-description {
        font-size: 1rem;
    }

    .intro-package-mark {
        margin-bottom: 0.5rem;
        max-width: 128px;
        max-height: 128px;
    }
    .intro-package-name {
        font-size: 2.6rem;
    }

    .package-install .code {
        font-size: 1.125rem;
    }
    .package-meta-download {
        font-size: 1rem;
    }
}

@media screen and (min-width: 48.0625em) {
    .integrations .integrations-desc {
        width: 38%;
        order: 1;
    }
    .integrations .integrations-list {
        width: 62%;
        padding-left: 1rem;
        order: 2;
    }
}
