pre, code { border-radius: 3px; background-color: #292c33; color: #fff; }

code { padding: 2px 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 0.85em; }

pre { padding: 8px 12px; overflow-x: auto; background-color: #292c33; color: #fff; padding: 0.5em; }
pre > code { border: 0; padding-right: 0; padding-left: 0; font-size: 1em; }

.shake { animation: shake 400ms 1; }

@keyframes shake { 25% { transform: rotate(1deg) translateX(-1em) translateY(0.5em); }
  50% { transform: rotate(-1deg) translateX(-1em) translateY(0.5em); }
  75% { transform: rotate(1deg) translateX(-1em) translateY(0.5em); }
  100% { transform: rotate(-2deg) translateX(-1em) translateY(0.5em); } }
@font-face { font-family: "Source Sans Pro"; font-weight: 200; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 200; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-ExtraLightIt.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-ExtraLightIt.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-ExtraLightIt.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-Light.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-Light.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-Light.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-LightIt.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-LightIt.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-LightIt.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-Regular.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-It.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-It.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-It.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 600; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-Semibold.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-Semibold.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-Semibold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 600; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-SemiboldIt.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-SemiboldIt.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-SemiboldIt.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-Bold.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-Bold.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-Bold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-BoldIt.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-BoldIt.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-BoldIt.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 900; font-style: normal; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-Black.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-Black.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-Black.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 900; font-style: italic; font-stretch: normal; font-display: fallback; src: url("/assets/fonts/SourceSansPro/WOFF2/TTF/SourceSansPro-BlackIt.ttf.woff2") format("woff2"), url("/assets/fonts/SourceSansPro/WOFF/OTF/SourceSansPro-BlackIt.otf.woff") format("woff"), url("/assets/fonts/SourceSansPro/TTF/SourceSansPro-BlackIt.ttf") format("truetype"); }
html { font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.4; font-size: 16px; background-color: #fffff8; color: #000000; box-sizing: border-box; }
@media (min-width: 992px) { html { font-size: 20px; } }
@media (min-width: 1200px) { html { font-size: 22px; } }

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

h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-top: 0.75em; margin-bottom: 0.5em; color: #4a4455; line-height: 1.2; }

h1 { font-size: 3em; }

h2 { font-size: 1.75em; }

h3 { font-size: 1.33em; }

h4 { font-size: 1.25em; }

h5 { font-size: 1.1em; }

h6 { font-size: 1em; }

.content { max-width: 34rem; margin-left: 5rem; margin-bottom: 5rem; }

pre, code { background-color: #eee; color: #111; border-radius: 4px; padding: 2px 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.8em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; }

pre { max-width: 100%; overflow: scroll; padding: 1em; }

a { color: #00645d; font-weight: bold; text-decoration: none; background-image: linear-gradient(to bottom, transparent 50%, #ed6a5a 50%); background-size: 100% 200%; background-position-y: 10%; transition: 200ms background-position-y; }
a:visited { color: #00645d; }
a:hover, a:focus { background-position-y: 20%; }

textarea { max-width: 100%; }

.skip-link { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; }

.skip-link:focus { background-color: #ed6a5a; background-image: none; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #fff; display: block; font-weight: bold; height: auto; left: 3em; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 3em; width: auto; z-index: 100000; }

/** Syntax highlighting styles */
.highlight { color: #fff; font-size: .85em; overflow-x: scroll; margin: 0; margin-bottom: 2em; }
.highlight .c { color: #5d636f; font-style: italic; }
.highlight .err { color: #d37377; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #d37377; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #d37377; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #6fabe5; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #a0c181; }
.highlight .na { color: #a0c181; }
.highlight .nb { color: #6fabe5; }
.highlight .nc { color: #6fabe5; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #d37377; font-weight: bold; }
.highlight .nf { color: #d37377; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #6fabe5; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #a0c181; }
.highlight .sc { color: #a0c181; }
.highlight .sd { color: #a0c181; }
.highlight .s2 { color: #a0c181; }
.highlight .se { color: #a0c181; }
.highlight .sh { color: #a0c181; }
.highlight .si { color: #a0c181; }
.highlight .sx { color: #a0c181; }
.highlight .sr { color: #a0c181; }
.highlight .s1 { color: #a0c181; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

.layout-container { max-width: 40rem; }

.l-contain { width: 90%; max-width: 55rem; }

.l-contain--small { width: 90%; max-width: 34rem; }

.l-contain--center { margin: 0 auto; }

html, body { margin: 0; padding: 0; }

body { border-top: 5px solid #ed6a5a; border-bottom: 5px solid #ed6a5a; padding-top: 5em; }

#content { min-height: 80vh; }

.text-center { text-align: center; }

@media (min-width: 992px) { .layout-book { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 2em; margin-bottom: 4em; } }

.site-header__wrap { display: flex; justify-content: space-between; flex-direction: column; align-items: center; }
@media (min-width: 35em) { .site-header__wrap { flex-direction: row; } }

.nav-main ul { display: flex; list-style-type: none; padding-left: 0; }
.nav-main li { margin-right: 1em; }

.site-id { display: flex; justify-content: flex-start; align-items: center; }
.site-id__link { display: flex; justify-content: flex-start; align-items: center; text-decoration: none; padding: 0.5em; background: none; }
.site-id__logo { height: 5rem; width: 5rem; margin-right: 1em; background-color: #ed6a5a; border-radius: 50%; overflow: hidden; }
.site-id__logo .logo { height: auto; max-width: 100%; }
.site-id__name { font-size: 1.5em; }
.site-id__name-part { display: block; transform: rotate(-3deg) translateY(-2px); line-height: 1; font-weight: bold; }

.button { -webkit-appearance: none; background: #ed6a5a; color: #fff; border: 1px solid #ed6a5a; font-size: 1em; text-transform: uppercase; padding: 0.5em 1em; font-weight: bold; cursor: pointer; transition: 300ms background, 300ms color, 300ms border-color; }
.button:hover, .button:focus { background: #87BBA2; color: #fff; border-color: #87BBA2; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-gap: 1rem; }

.home__header h1 { font-size: 2em; }
@media (min-width: 992px) { .home__header h1 { font-size: 4rem; } }

.home__header { font-size: 1.4em; margin-bottom: 1.5em; }

.snippet { border-bottom: 1px solid rgba(0, 0, 0, 0.5); padding-bottom: 1em; margin-bottom: 1em; }
.snippet date { color: rgba(0, 0, 0, 0.5); }
.snippet img { max-width: 100%; height: auto; }

.grid-item { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid black; }
@media (min-width: 576px) { .grid-item { border-bottom: 0; margin-bottom: 1em; padding-bottom: 1em; } }

.home__article { margin-bottom: 2em; max-width: 37.5rem; }
.home__article header { margin-bottom: 0.75em; }
.home__article header h3 { display: inline; font-size: 1.5em; }
.home__article p { font-size: 1em; margin-bottom: 0.75em; }
.home__article date { color: rgba(0, 0, 0, 0.5); }

article { margin-bottom: 1em; }
article h3 { margin-bottom: 0.25em; }

.section-header h2 { margin-bottom: 0.75rem; }

.snippets { border-bottom: 0; }

.snippet p { display: inline; margin-bottom: 0; }

.u-photo { height: 75px; width: 75px; border-radius: 50%; }

.h-card .p-note, .h-card .u-photo { display: inline-block; vertical-align: middle; margin-bottom: 0; }
.h-card .u-photo { margin-right: 0.5em; }
.h-card .profiles { margin-top: 1em; }

.heading__anchor-link { opacity: 0; display: inline-block; font-size: 0.5em; margin-left: 1em; vertical-align: middle; transition: opacity 0.2s, transform 0.2s; transform: translateY(100%); }

.post-content h2:hover .heading__anchor-link, .post-content h3:hover .heading__anchor-link { opacity: 1; transform: translateY(0); }

.post-content img { max-width: 100%; height: auto; display: block; box-shadow: -2px 1px 10px rgba(17, 17, 17, 0.1); }
.post-content img + em { margin-top: 0.25em; font-size: 0.85rem; color: rgba(17, 17, 17, 0.8); }

.post-canonical { font-style: italic; }
.post-canonical::before { content: ". . ."; display: block; margin: 1em 0 2em; text-align: center; }

.article-body > :first-child, .lede { font-size: 1.3em; }

.post figure, .post img { max-width: 100%; height: auto; margin: 0; }
.post figure { margin: 2em 0 1em; padding-bottom: 1em; }
.post figure a { background: none; }
.post figure img { margin-bottom: 0.5em; }
.post .wp-caption-text { font-size: 0.8em; margin-left: 1em; }
.post blockquote { margin: 1em 0 1em 2em; background-color: #eeeeee; padding: 1em 2em; border-left: 10px solid #ed6a5a; }

.responsive-iframe { position: relative; overflow: hidden; padding-top: 56.25%; }
.responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.book { margin: 1em auto; position: relative; max-width: 100%; }
@media (min-width: 48em) { .book { margin: 1em; margin-top: 5em; }
  @supports(position: sticky) { .book { position: sticky; top: 100px; } } }

.book__text { position: absolute; bottom: 2em; right: 1em; left: 1em; }

.site-footer { padding: 1em 0; text-align: center; font-size: 0.8em; }
.site-footer ul { margin: 0; padding: 0; }
.site-footer li { list-style: none; margin: 0; padding: 0; }

.post-list__title { margin-bottom: 0.2em; }

.mc-signup { margin: 3em 0; }
.mc-signup h2 { margin-top: 0; max-width: 35ch; }
.mc-signup p { font-weight: 1.3em; }

.callout { background-color: #eee; max-width: 40rem; padding-left: 5%; border-top: 5px solid #87BBA2; border-bottom: 5px solid #87BBA2; padding-top: 3em; padding-bottom: 3.5em; transform: rotate(-1deg) translateX(-1em) translateY(0.5em); }
@media (min-width: 70rem) { .callout { padding-left: calc((100% - 55rem) / 2); } }

.callout--book .callout__cta { margin: 0 2em; }
.callout--book .callout__book { margin: -2em auto 0; display: block; width: 100%; }
@media (min-width: 600px) { .callout--book .callout__book { width: 250px; float: left; } }
@media (min-width: 35em) { .callout--book .callout__book { width: 300px; } }
.callout--book form { margin: 0 2em; }

@media (min-width: 35em) { .mc-signup__form-group { display: flex; align-items: flex-end; flex-wrap: wrap; } }
.mc-signup__form-group label { display: block; font-size: 0.75em; margin-bottom: 0.5em; color: #222; }
.mc-signup__form-group input { padding: 0.5em 0.25em; margin-right: 0.5em; border: 1px solid #ccc; background: #fff; font-size: 1em; margin-bottom: 1em; }
.mc-signup__form-group input:focus { outline: 2px solid #ed6a5a; }
.mc-signup__form-group input[type="submit"] { -webkit-appearance: none; background: #ed6a5a; color: #fff; border: 1px solid #ed6a5a; font-size: 1em; text-transform: uppercase; padding: 0.5em 1em; font-weight: bold; cursor: pointer; transition: 300ms background, 300ms color, 300ms border-color; }
.mc-signup__form-group input[type="submit"]:hover, .mc-signup__form-group input[type="submit"]:focus { background: #87BBA2; color: #fff; border-color: #87BBA2; }

.mc-field-group { margin-bottom: 1em; }
@media (min-width: 35em) { .mc-field-group { margin-bottom: 0; } }

.update { padding-left: 1em; padding-right: 1em; margin: 2em 0 1em; }
.update p { margin-bottom: 0; margin-top: 0; }
.update p + p { margin-top: 1em; }
.update img { max-width: 100%; height: auto; display: block; }

.update-meta { opacity: 0.6; font-size: 0.8em; text-align: right; display: block; margin-top: 1em; margin-bottom: 1em; }

.hero-text { flex-basis: 50%; margin-bottom: 2em; }
.hero-text .page-heading { font-size: 2.5rem; }
.hero-text p { font-size: 1.25rem; }

.hero { padding: 2em 0; }
@media (min-width: 768px) { .hero { display: flex; align-items: center; justify-content: space-between; } }

.hero-form { margin: 0 auto; font-size: 1.2em; }
@media (min-width: 544px) { .hero-form { max-width: 350px; } }
@media (min-width: 992px) { .hero-form { font-size: 1em; } }
.hero-form .name-fields { display: flex; }
.hero-form .name-fields > * { flex-basis: 50%; }
.hero-form .name-fields > :first-child { margin-right: 1em; }
.hero-form label { display: block; font-size: 0.85em; margin-bottom: 0.25em; color: #222; }
.hero-form .button { width: 100%; }
.hero-form input[type="text"], .hero-form input[type="email"] { padding: 0.5em; border: 1px solid #ccc; background-color: #fff; font-size: 0.75em; margin-bottom: 1em; width: 100%; }
.hero-form input[type="text"]:focus, .hero-form input[type="email"]:focus { outline: 2px solid #ed6a5a; }

.section { padding: 1em 0; display: flex; flex-wrap: wrap; justify-content: space-around; }
.section:last-of-type { margin-bottom: 3em; }
.section h2 { text-align: center; margin-top: 0; font-size: 2.25em; }

.lessons { display: block; }

.lesson { margin-bottom: 1.5em; margin-top: 1em; }
.lesson h3 { margin-bottom: 0; }
.lesson p { margin-top: 0.25em; }
@media (min-width: 768px) { .lesson { max-width: 50%; } }

@media (min-width: 768px) { .lesson:nth-of-type(even) { margin-left: auto; } }

.section-img { flex-basis: 45%; }