:root{--heading-font:concourse_4;--text-font:heliotrope_4;--nav-font-size:1.2rem;--bs-primary-rgb:20, 135, 55;--bs-body-font-size:1.055rem;--bs-body-font-weight:400;--bs-body-line-height:1.5}.navbar-brand{--bs-navbar-brand-font-size:1.375rem}.navbar-nav *{text-rendering:optimizeLegibility;--bs-navbar-nav-link-padding-x:0.65rem}nav,h1,h2,h3,h4{font-family:var(--heading-font);text-rendering:optimizeLegibility;color:#121111}h1{font-size:2.5rem}h2{margin-top:4rem;margin-bottom:1rem}h3{color:#545454;font-size:1.5em;margin-top:3rem}h4{color:#545454;font-size:1.35em;margin-top:2rem}nav li{font-family:var(--heading-font);font-size:var(--nav-font-size);text-rendering:optimizeLegibility;color:#121111}p,li,time{font-family:var(--text-font);color:#615b5b;line-height:1.55;letter-spacing:-.03em}p,li{font-size:1.3em}li li{font-size:.9em}time{font-size:1em}p,li{max-width:70ch}a{text-decoration:none;&:hover { text-decoration:none; }}.btn-cta{background-color:#fff;color:var(--bs-primary-rgb);padding:.375rem .75rem;border-radius:.375rem;margin-left:.5rem;border:2px solid #fff;transition:all .2s ease-in-out;&:hover { background-color:rgba(255,255,255,0.9); color:rgb(var(--bs-primary-rgb)); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); }}blockquote{border-left:4px solid #add8e6;border-radius:0 4px 4px 0;background-color:#f5f5f5;padding:1.25rem;margin:1rem;line-height:1.8;color:#4a4a4a;@media screen and (min-width:768px){padding: 1.5rem; margin: 1rem 3rem;}p { margin-bottom: 0.5rem; font-size: 1.25em; } .source { display: block; text-align: right; margin-top: 1rem; } .source::before { content: "— "; }}pre{max-width:88ch;padding:1rem}.chapter img,.chapter video{margin:0 auto;max-width:100%;display:block}figcaption{p { text-align: center; font-style: normal; font-size: 1em; margin: 0; }}.alert{margin-left:auto;margin-right:auto}.navbar,.content{padding:1rem}.subscribe-box{padding:0 1rem 1rem;max-width:100%;display:inline-block;@media screen and (min-width:768px){max-width: 700px; margin: 2rem 0; padding: 2rem;}h2 { max-width: 100%; margin-top: 0.5rem !important; margin-bottom: 2rem; } form { input[type="email"] { max-width: 28ch; } input[type="submit"] { font-size: 1.2em; } }}.landing{text-align:center;h2 { margin-top: 5rem; } p { margin: 1rem auto; } .book-cover { max-width: 400px; } .callout { background-color: rgb(224, 236, 255); border: 1px solid gray; border-radius: 5px; } .subtitle { font-size: 1.4em; p { margin-top: 0; } } .byline { font-size: 1.2em; p { margin-top: 0; } } .book-features { display: flex; justify-content: center; ul, li { text-align: left; margin: auto 2rem; } }}.list-index,.tool,.single-page{text-align:left;margin:0 auto;max-width:80ch}.img-border{border:1px solid rgba(177,177,177,.76)}.chapter{article { text-align: left; margin: 0 auto; max-width: 75ch; .byline { font-size: 1.15em; margin-bottom: 0.9rem; } .heading-anchor { opacity: 0; text-decoration: none; margin-left: 0.5em; transition: opacity 0.2s; font-size: 0.75em; } h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 1; } .img-wrapper { max-width: 100%; margin-left: auto; margin-right: auto; } .img-wrapper + p { margin-top: 2rem; } .extra-wide-image { width: min(130%, 100vw); left: 50%; transform: translateX(-50%); position: relative; margin: 2rem 0; max-width: 100vw; padding: 0 1rem; } } .pitch { margin: 3rem auto; padding: 1rem; border: 1px solid #1a365d; background-color: #faf5e6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; h2 { margin-bottom: 0; padding-bottom: 0; } .book-cover { max-width: 300px; } } .revision-timeline { --indent: 10ch; ul li { padding-left: var(--indent); text-indent: calc(-1 * var(--indent)); } }}.chapter .alert{max-width:600px;h2 { font-size: 1.5em; } p { font-size: 1.2em; }}.sponsors{background-color:#fcfaf7;border:1px solid #e0d8c9;max-width:800px;margin:0 auto;padding:20px;p { margin: 0; padding: 0; } ul { column-count: 2; list-style-type: none; padding: 0; li { margin-top: 0.75rem; } } img { height: 50px; max-width: auto; }}.video-calls{h2 { margin-top: 5rem; } h3 { margin-top: 1rem; margin-bottom: 1rem; }}.social-discuss{text-align:left;margin:3rem auto;max-width:80ch}.btn-social{color:#fff;border-radius:5px;padding:.75rem;margin-right:1rem}.btn-social:hover{text-decoration:none}.btn-social span{display:none}@media screen and (min-width:768px){.btn-social span{display:inline-block}}.btn-hacker-news{background-color:#f60}.btn-hacker-news:hover{background-color:#c95609}.btn-reddit{background-color:#ff5700}.btn-reddit:hover{background-color:#e24d02}.chapter{article { .example { display: grid; grid-template-rows: auto 1fr; padding: 0; max-width: 90%; margin: 2rem auto; border: 1px solid black; overflow: hidden; h3, h4 { margin-top: 0.5rem; } pre { max-width: 100%; font-size: 1.05em; } } .bad-example { background-color: #ffd1ce; code:not(pre code) { background-color: #2f2f2f; color: #ffffff; padding: 0.2rem 0.4rem; font-size: 1.15rem; border-radius: 4px; white-space: nowrap; display: inline-block; line-height: 1.4; margin: 0.1rem 0; vertical-align: middle; } } .good-example { background-color: #e6ffe8; } .example-header { background-color: #ffb3ae; padding: 0.25rem 0.5rem; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid black; white-space: normal; word-wrap: break-word; } .example-content { padding: 1.3rem 1rem; font-size: 0.9em; overflow-x: auto; .highlight pre { overflow-x: auto; white-space: pre; word-wrap: normal; } p:last-child, ol:last-child, ul:last-child, .highlight:last-child pre { margin-bottom: 0; } } .bad-example .example-header { background-color: #ffb3ae; } .good-example .example-header { background-color: #ccffcf; } }}@font-face{font-family:concourse_4;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_regular.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:italic;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_italic.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_bold.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:italic;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_bold_italic.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_regular.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:italic;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_italic.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_bold.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:italic;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_bold_italic.woff2)format("woff2")}.labelled-sentence{border:1px solid #ddd;padding:3rem 12px;margin:3rem 0;position:relative;text-align:center;p { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; } p + p { margin-top: 3rem; } .label { position: absolute; top: -12px; left: 10px; background: white; padding: 0 5px; font-weight: bold; font-size: 16pt; } .actor, .verb, .object, .to-be, .past-participle { padding: 3px 8px; position: relative; margin: 0 3px; margin-bottom: 25px; display: inline-block; min-width: 80px; } .actor { background-color: #e6f3ff; } .verb { background-color: #fff0e6; } .object { background-color: #e6ffe6; } .to-be { background-color: #ffe4d3; min-width: 6ch; margin: 0 1rem; } .past-participle { background-color: #fff7f1; } .actor::after { content: "actor"; } .verb::after { content: "verb"; } .object::after { content: "object"; } .to-be::after { content: 'form of "to be"'; } .past-participle::after { content: "past participle"; } .actor::after, .verb::after, .object::after, .to-be::after, .past-participle::after { position: absolute; left: -20px; right: -20px; bottom: -30px; text-align: center; font-size: 13pt; }}.toc{max-width:800px;margin:2rem auto;padding:2rem;background-color:#fcfaf7;border:1px solid #e0d8c9;box-shadow:0 2px 8px rgba(0,0,0,.1)}.toc .col{padding:0 1.5rem}.toc ol{counter-reset:item;list-style-type:none;padding-left:0}.toc ol ol{padding-left:2rem;margin-bottom:.5rem;margin-top:.5rem}.toc ol>li{position:relative;padding:.5rem 0;margin-bottom:.5rem;font-size:1.3rem;display:flex;align-items:flex-start;flex-wrap:wrap}.toc ol>li::before{counter-increment:item;content:counter(item)".";font-weight:700;min-width:2rem;margin-right:.5rem;color:#5a4a42;flex-shrink:0}.toc ol ol>li::before{content:counter(item,lower-alpha)".";font-style:italic;flex-shrink:0}.toc li>a,.toc li>span{display:inline;text-indent:0;hyphens:auto}.toc a{text-decoration:none;border-bottom:1px dotted #1a5891}.toc a:hover{color:#0d2e4a;border-bottom:1px solid #0d2e4a}.toc li{display:flex;align-items:flex-start;width:100%;flex-wrap:wrap}.toc li>ol{flex-basis:100%;order:1}.toc>.col>ol>li{font-weight:600;font-size:1.2rem;margin-top:.8rem;margin-bottom:.2rem}.toc ol ol>li{font-weight:400;font-size:1.1rem;padding:.3rem 0;margin-bottom:.2rem}.toc::before{content:"CONTENTS";display:block;text-align:center;font-size:1.5rem;font-weight:700;margin-bottom:2rem;padding-bottom:.5rem;border-bottom:2px solid #5a4a42;color:#5a4a42;letter-spacing:.2rem}@media(max-width:768px){.toc ol>li,.toc ol ol>li{padding-left:2.5rem;position:relative;display:block}.toc ol>li::before,.toc ol ol>li::before{position:absolute;left:0;top:.5rem}.toc ol ol{padding-left:0}}