@charset "UTF-8";
@font-face { font-family: 'Courgette'; font-style: normal; font-weight: 400; src: local("Courgette Regular"), local("Courgette-Regular"), url(../fonts/Courgette-Regular.ttf) format("truetype"); }
@font-face { font-family: 'Rye'; font-style: normal; font-weight: 400; src: local("Rye Regular"), local("Rye-Regular"), url(../fonts/Rye-Regular.ttf) format("truetype"); }
@font-face { font-family: 'Ubuntu Mono'; font-style: normal; font-weight: 400; src: local("Ubuntu Mono"), local("UbuntuMono-Regular"), url(../fonts/UbuntuMono-Regular.ttf) format("truetype"); }
@font-face { font-family: 'Ubuntu Mono'; font-style: normal; font-weight: 700; src: local("Ubuntu Mono Bold"), local("UbuntuMono-Bold"), url(../fonts/UbuntuMono-Bold.ttf) format("truetype"); }
@font-face { font-family: 'Ubuntu Mono'; font-style: italic; font-weight: 400; src: local("Ubuntu Mono Italic"), local("UbuntuMono-Italic"), url(../fonts/UbuntuMono-Italic.ttf) format("truetype"); }
body { font-family: Baskerville; counter-reset: examples; }

img { max-width: 850px; }

.remark-container { background: #000; }

.remark-slide-container { display: block; transform: translateX(-200%); }

.remark-slide-content { font-size: 36px; padding: 75px 150px; }
.remark-slide-content h1, .remark-slide-content h2, .remark-slide-content h3, .remark-slide-content h4, .remark-slide-content h5, .remark-slide-content h6 { margin: 0; font-weight: normal; widows: 2; orphans: 2; }

.remark-visible, .remark-preview-area .remark-slide-container { transform: none; }

.remark-slide-scaler { box-shadow: none; }

.remark-slide-number { display: none; }

.remark-code, .remark-inline-code { font-family: "Ubuntu Mono"; }

.remark-code { font-size: 24px; }

pre { padding: 1em; background: #333; color: #fff; border-radius: 3px; }

.remark-notes-area { background: #fff; }

.remark-notes-area .remark-bottom-area .remark-toggle { border-bottom: none; text-shadow: none; font-weight: normal; color: #ccc; }

.remark-notes { padding-top: 0.5em; font-size: 1.5em; }

.fancy-headline, .section h1:nth-child(2) { font-family: Rye; text-shadow: 0.04ex 0.04ex 0 rgba(63, 57, 46, 0.4); color: #fff; text-transform: uppercase; margin: 0; z-index: 1; position: relative; }

.tiny-headline, .section h1:nth-child(3) { font-size: 18px; letter-spacing: 6px; text-transform: uppercase; margin-left: 6px; }

.banner-headline, .section h1:nth-child(1) { font-family: "Courgette"; font-size: 50px; text-transform: lowercase; background-color: #4CA1BF; display: inline-block; color: #aae1d8; text-shadow: -2px -2px 0 #39849f; padding: 0.2em 0.75em; box-shadow: 4px 4px 0 rgba(63, 57, 46, 0.25); transform: rotate(-5deg); margin-left: -0.75em; z-index: 0; position: relative; }

.uppercase { text-transform: uppercase; }

.small { font-size: 0.5em; }

.big { font-size: 2em; }

.section { background-color: #E9C761; color: #3f392e; }
.section h1 { margin: 0; line-height: 1; }
.section h1:nth-child(2) { font-size: 100px; }

.overview { font-size: 60px; }
.overview ol { color: #fff; text-shadow: 2px 2px 0px rgba(63, 57, 46, 0.2); counter-reset: li; list-style: none; margin: 0; }
.overview ol li { counter-increment: li; }
.overview ol li:before { display: inline-block; content: counter(li) "."; margin-right: 0.5em; }
.overview a { color: inherit; text-decoration: none; }

.statement { background-color: #4CA1BF; color: #fff; }
.statement h1 { margin: 0; }
.statement h1:nth-child(1), .statement h1:nth-child(3) { text-transform: uppercase; letter-spacing: 6px; font-size: 30px; }
.statement h1:nth-child(2) { text-transform: uppercase; display: inline-block; background: #E9C761; text-shadow: -1px -1px 0 #e3b734; letter-spacing: 6px; padding: 0.25em 0.5em; margin: 0.2em -0.5em; box-shadow: 2px 2px rgba(63, 57, 46, 0.2); }

.example, .meta-example { counter-increment: examples; vertical-align: middle; }
.example h1, .meta-example h1 { font-size: 85px; line-height: 1; }
.example h1:first-child:before, .meta-example h1:first-child:before { content: counter(examples); display: inline-block; font-weight: bold; border-radius: 100%; width: 80px; height: 80px; line-height: 80px; font-size: 40px; text-align: center; position: absolute; bottom: 1em; right: 1em; border: 2px solid transparent; }

.example h1:first-child:before { border-color: #3f392e; color: #3f392e; }

.meta-example { background-color: #4CA1BF; color: #fff; }
.meta-example h1:first-child:before { color: #fff; border-color: #fff; }

#slide-title h1:nth-child(1) { font-size: 100px; margin-left: -25%; margin-bottom: -1em; }
#slide-title h1:nth-child(2) { font-size: 300px; }
#slide-title h1:nth-child(3) { font-size: 36px; }

.emojicon { display: inline-block; width: 2em; height: 2em; line-height: 2em; font-size: 36px; text-align: center; border-radius: 100%; background: #4CA1BF; margin-right: 0.25em; }

.papercut:before { content: "✂︎"; }

.nonevent:before { font-family: "octicons"; content: '\f068'; }

.dark { color: #FFF; background-color: #3f392e; }

.text-shadow { text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); }

blockquote { font-size: 2.5em; }
blockquote p:first-child:before { content: "“"; display: inline; }
blockquote p:last-child:after { content: "”"; display: inline; }

.fade-bottom img { -webkit-mask-image: linear-gradient(to top, transparent, black 50px); }

.pull-left { float: left; width: 47%; }

.pull-right { float: right; width: 47%; }

.absolute { position: absolute; }
.absolute.right { right: 0; }
.absolute.bottom { bottom: 0; }