@import url(https://fonts.googleapis.com/css?family=Pacifico);

@media (max-width: 65rem) {
    * {
        --rhythm: 1.5rem;
    }
}

html[data-theme="dark"] {
    --color-primary-shade1: hsl(350, 80%, 60%);
    --color-primary: hsl(350, 80%, 45%);
    --color-primary-tint1: hsl(350, 80%, 35%);
    --color-accent-shade1: hsl(170, 80%, 60%);
    --color-accent: hsl(170, 80%, 45%);
    --color-accent-tint1: hsl(170, 80%, 35%);
    --color-link: hsl(230, 80%, 60%);
    --color-link-visited: hsl(290, 80%, 60%);
    --color-link-hover: hsl(230, 60%, 50%);
    --color-link-active: hsl(350, 60%, 50%);
    --color-neutral-shade4: hsl(170, 10%, 98%);
    --color-neutral-shade3: hsl(170, 10%, 94%);
    --color-neutral-shade2: hsl(170, 10%, 85%);
    --color-neutral-shade1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-tint1: hsl(170, 10%, 41%);
    --color-neutral-tint2: hsl(170, 10%, 30%);
    --color-neutral-tint3: hsl(170, 10%, 18%);
    --color-neutral-tint4: hsl(170, 10%, 2%);
}

[data-rhythm="small"] * {
    --rhythm: 1.5rem;
}

[data-rhythm="large"] * {
    --rhythm: 2.5rem;
}

@media (max-width: 65rem) {
    [data-rhythm="small"] * {
        --rhythm: 1.5rem;
    }

    [data-rhythm="large"] * {
        --rhythm: 2rem;
    }
}

[data-grid="off"] body {
    background-image: none !important;
}

h2 a {
    text-decoration: none;
}

.site-title:link,
.site-title:visited,
.site-title:hover,
.site-title:focus,
.site-title:active {
    color: var(--color-neutral-shade3);
    font-family: monospace;
    text-decoration: none;
}

.title {
    color: var(--color-primary-tint1);
    font-family: 'Pacifico', 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana', sans-serif;
    font-weight: normal;
}

a.title:link,
a.title:visited,
a.title:active {
    color: var(--color-primary-tint1);
}

a.title:hover,
a.title:focus {
    color: var(--color-primary);
}

@media (max-width: 35rem) {
    .sublogo.-hide-small {
        display: none;
    }
}

.sublogo.-show-small {
    display: none;
}

@media (max-width: 35rem) {
    .sublogo.-show-small {
        display: inline;
    }
}

.toolbar {
    background-color: var(--color-neutral-tint4);
    border-bottom: 1px solid var(--color-neutral-tint1);
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: var(--rhythm-half) var(--rhythm);
    position: fixed;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
}

.toolbar,
.toolbar * {
    --rhythm: 1.5rem;
}

.toolbar-logo {
    --sub-rhythm: 2rem;

    float: left;
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: 0;
}

.toolbar-controls {
    float: right;
    text-align: right;
}

.toolbar-label {
    display: none;
    padding-left: var(--rhythm-half);
}

@media (max-width: 28rem) {
    .toolbar-size {
        display: none;
    }
}

@media (min-width: 50rem) {
    .toolbar-label {
        display: inline-block;
    }
}

.toolbar-button {
    border: 1px solid var(--color-neutral-tint1);
    background-color: var(--color-neutral-tint3);
    border-radius: 2px;
    color: var(--color-neutral-shade3);
    cursor: pointer;
    display: inline-block;
    padding: var(--rhythm-eighth) var(--rhythm-half);
    vertical-align: middle;
}

.toolbar-button:hover,
.toolbar-button:focus {
    background-color: var(--color-neutral-tint2);
}

.toolbar-label + .toolbar-button {
    margin-left: var(--rhythm-half);
}

.toolbar-button.-small {
    --line-height-ratio: 2;

    font-size: var(--font-size);
}

.toolbar-button.-large {
    --line-height-ratio: 1;

    font-size: var(--font-size);
}

.toolbar-button.-light {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade2);
}

.toolbar-button.-dark {
    background-color: var(--color-neutral-shade2);
    color: var(--color-neutral-tint4);
}

.toolbar-button.-on {
    text-decoration: underline overline;
}

[data-theme="dark"] .toolbar-button.-light {
    background-color: var(--color-neutral-shade2);
    color: var(--color-neutral-tint4);
}

[data-theme="dark"] .toolbar-button.-dark {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade2);
}

[data-rhythm="small"] .toolbar-button.-small,
[data-rhythm="normal"] .toolbar-button.-normal,
[data-rhythm="large"] .toolbar-button.-large,
[data-theme="light"] .toolbar-button.-light,
[data-theme="dark"] .toolbar-button.-dark,
[data-grid="on"] .toolbar-button.-on,
[data-grid="off"] .toolbar-button.-off {
    cursor: normal;
    opacity: .5;
    pointer-events: none;
}

.footer-content {
    --columns: 4;

    margin: 0 auto;
    max-width: 80rem;
}

@media (max-width: 65rem) {
    .footer-content {
        --columns: 2;
    }
}

@media (max-width: 35rem) {
    .footer-content {
        --columns: 1;
    }
}

.footer ul {
    list-style-type: none;
    margin-left: 0;
}