/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
.hljs { display: block; overflow-x: auto; padding: .5em; color: #333; -webkit-text-size-adjust: none; }
.hljs-comment, .diff .hljs-header { color: #998; font-style: italic; }
.hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .nginx .hljs-title,
.hljs-subst, .hljs-request, .hljs-status { color: #333; font-weight: bold; }
.hljs-number, .hljs-hexcolor, .ruby .hljs-constant { color: #008080; }
.hljs-string, .hljs-tag .hljs-value, .hljs-doctag, .tex .hljs-formula { color: #d14; }
.hljs-title, .hljs-id, .scss .hljs-preprocessor { color: #900; font-weight: bold; }
.hljs-list .hljs-keyword, .hljs-subst { font-weight: normal; }
.hljs-class .hljs-title, .hljs-type, .vhdl .hljs-literal, .tex .hljs-command { color: #458; font-weight: bold; }
.hljs-tag, .hljs-tag .hljs-title, .hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword { color: #000080; font-weight: normal; }
.hljs-attribute, .hljs-variable, .lisp .hljs-body, .hljs-name { color: #008080; }
.hljs-regexp { color: #009926; }
.hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword,
.clojure .hljs-keyword, .scheme .hljs-keyword, .tex .hljs-special, .hljs-prompt { color: #f03838; }
.hljs-built_in { color: #0086b3; }
.hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang,
.hljs-cdata { color: #999; font-weight: bold; }
.hljs-deletion { background: #fdd; }
.hljs-addition { background: #dfd; }
.diff .hljs-change { background: #0086b3; }
.hljs-chunk { color: #aaa; }
html, body { height: 100%; }
body { border-top: 20px solid #00a0fc; background: #fefefe; color: #424242; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 20px; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; text-transform: uppercase; }
h1 { font-size: 45px; padding-top: 60px; }
h2 { font-size: 35px; padding-top: 40px; font-weight: 900; }
h3 { font-size: 28px; padding-top: 40px; margin-bottom: 20px; font-weight: 900; }
h4 { font-size: 24px; margin-bottom: 18px; }
h5 { font-size: 16px; margin-bottom: 15px; }
h6 { font-size: 14px; margin-bottom: 12px; }
p { line-height: 1.8; margin: 0 0 30px; }
a { color: #00a0fc; text-decoration: none; }
ul, ol { line-height: 1.8; margin: 0 0 20px; }
ul ul, ul ol, ol ul, ol ol { margin: 10px 10px 12px 20px; }
ul li, ol li { margin: 0 0 2px; }
ul li:last-of-type, ol li:last-of-type { margin-bottom: 0; }
blockquote { border-left: 1px dotted #00a0fc; margin: 40px 0; padding: 5px 30px; }
blockquote p { color: #aeadad; display: block; font-style: italic; margin: 0; width: 100%; }
img { display: block; margin: 40px 0; width: auto; max-width: 100%; }
pre { background: #f1f0ea; border: 1px solid #dddbcc; border-radius: 3px; margin: 0 0 20px; overflow-x: auto; padding: 10px; font-size: 16px; margin-bottom: 30px !important; }
pre code { padding: 0; }
code { padding: 2px 4px; font-size: 100%; color: #444; background-color: #f1f0ea; border-radius: 4px; }
a code { color: #00a0fc; }
hr { border: none; border-bottom: 6px solid #00a0fc; margin: 45px 0; }
table { margin-bottom: 40px; width: 100%; }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #f7f7f3; }
table th { padding: 0 10px 10px; text-align: left; }
table td { padding: 10px; }
table tr { border-bottom: 1px dotted #aeadad; }
::selection { background: #fff5b8; color: #000; display: block; }
::-moz-selection { background: #fff5b8; color: #000; display: block; }
.fluid-width-video-wrapper { margin-bottom: 40px; }
.hidden { text-indent: -9999px; visibility: hidden; display: none; }
.clearfix:after { content: ""; display: table; clear: both; }
.container { margin: 0 auto; position: relative; width: 100%; max-width: 889px; }
#wrapper { height: auto; min-height: 100%; margin-bottom: -265px; }
#wrapper:after { content: ""; display: block; height: 265px; }
.button { background: #303030; border: none; border-radius: 3px; color: #fefefe; font-size: 14px; font-weight: 700; padding: 10px 12px; text-transform: uppercase; }
.button:hover { background: #00a0fc; }
.button-square { background: #00a0fc; color: #fff; float: left; font-size: 17px; margin: 0 0 0 10px; padding: 3px 8px 4px; }
.button-square:hover { background: #303030; }
.error { text-align: center; }
.comments { margin-top: 10px; }
.site-header { padding: 40px 0 0; overflow: auto; text-align: center; text-transform: uppercase; }
.site-title-wrapper { display: table; margin: 0 auto; }
.site-title { float: left; font-size: 14px; font-weight: 600; margin: 0; text-transform: uppercase; }
.site-title a { float: left; background: #00a0fc; color: #fefefe; padding: 5px 10px 6px; }
.site-title a:hover { background: #303030; }
.site-logo { display: block; }
.site-logo img { margin: 0; }
.site-nav { list-style: none; margin: 28px 0 10px; padding: 0; }
.site-nav-item { display: inline-block; font-size: 14px; font-weight: 700; margin: 0 10px; }
.site-nav-item a:hover { color: #424242; }
#latest-post { display: none; }
.post-container { margin: 0 40px; }
.post-header { border-bottom: 6px solid #00a0fc; margin: 0 0 20px; padding: 0 0 20px; text-align: center; text-transform: uppercase; margin-bottom: 50px; }
.post-title, .page-title { font-size: 95px; font-weight: 900; margin: 15px 0; text-align: left; text-transform: uppercase; padding-top: 40px; }
.page-title { margin: 15px 40px; }
.post-date, .blog-description { color: #aeadad; font-size: 14px; font-weight: 600; line-height: 1; margin: 25px 0 0; text-align: left; }
.post-date a, .blog-description a { color: #aeadad; }
.post-date a:hover, .blog-description a:hover { color: #00a0fc; }
.post-date:after, .blog-description:after { content: ""; display: block; margin: 40px auto 0; width: 100px; }
.post-content a { border-bottom: 1px dotted #00a0fc; padding: 0 0 2px; }
.post-content:last-child { margin-bottom: 0; }
.post-content .footnote { border-spacing: 0; margin-bottom: 0; }
.post-content .footnote .label + td { width: 100%; }
.post-content .gist tr { border-bottom: 0; }
.post-content img { width: auto; margin: 0 auto; max-width: 100%; }
.post-tags, .share { color: #aeadad; font-size: 14px; }
.post-tags span, .share span { font-weight: 600; }
.post-tags { float: left; margin: 3px 0 0; }
.post-tags a:hover { color: #303030; }
.share { margin: 0 auto; text-align: center; }
.share a { background: #00a0fc; color: #fff; display: inline-block; font-size: 30px; margin-left: 5px; padding: 5px 0 4px; width: 50px; text-align: center; }
.share a:hover { background: #303030; }
.post-navigation { display: table; margin: 70px auto 100px; }
.newer-posts, .older-posts { float: left; background: #00a0fc; color: #fefefe; font-size: 14px; font-weight: 600; margin: 0 5px; padding: 5px 10px 6px; text-transform: uppercase; }
.newer-posts:hover, .older-posts:hover { background: #303030; }
.page-number { display: none; }
.post-list { list-style: none; padding: 0; width: 100%; }
.post-stub { border-bottom: 1px dotted #303030; margin: 0; position: relative; display: block; padding: 20px 12px; }
.post-stub:first-child { padding-top: 0; }
.post-stub a { color: #424242; }
.post-stub:hover { background: #fcf5f5; color: #00a0fc; }
.post-stub:hover .post-stub-tag { background: #00a0fc; }
.post-stub-tag { background: #303030; border-radius: 3px; color: #fff; float: right; font-size: 10px; margin: 7px 0 0; padding: 0 5px; text-transform: uppercase; }
.post-stub-title { font-size: 21px; display: inline-block; margin: 0; text-transform: uppercase; font-weight: 900; }
.post-stub-description { display: inline-block; margin: 0; text-transform: none; }
.post-stub-date { font-family: 'Courier New', Courier, monospace; display: inline-block; font-size: 18px; }
.next-posts-link a, .previous-posts-link a { display: block; padding: 8px 11px; }
.footer { background: #303030; color: #d3d3d3; height: 265px; margin-top: 0; overflow: auto; }
.footer .site-title-wrapper { margin: 80px auto 35px; }
.footer .site-title a:hover, .footer .button-square:hover { background: #121212; }
.footer-copyright { color: #656565; font-size: 14px; margin: 0; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #656565; font-weight: 700; }
.footer-copyright a:hover { color: #fefefe; }
@media only screen and (max-width: 800px) {
 .post-stub-tag { display: none; }
}
@media only screen and (max-width: 600px) {
 h1, h2 { margin-bottom: 20px; }
 p { margin-bottom: 20px; }
 ul, ol { margin-bottom: 20px; }
 img { margin: 30px 0; }
 blockquote { margin: 30px 0; }
 pre { margin: 20px 0; }
 hr { margin: 35px 0; }
 .site-header { padding-top: 40px; }
 .site-title { float: none; margin-bottom: 15px; }
 .site-title a { float: none; }
 .site-title + .button-square { margin-left: 0; }
 .site-nav-item { display: block; margin: 15px 0; }
 .post-header { padding-bottom: 20px; }
 .post-header p { word-wrap: break-word; overflow-wrap: break-word; }
 .post-title, .page-title { font-size: 42px; margin-top: 5px; word-wrap: break-word; overflow-wrap: break-word; }
 .post-date, .blog-description { margin-top: 20px; }
 .post-date:after, .post-date:before, .blog-description:after,
 .blog-description:before { margin-top: 30px; }
 .post-stub-title { display: block; }
 .post-stub-date:before { content: ""; display: block; }
 .post-list { margin-top: 20px; }
 .post-container, .post-list { margin-right: 0; margin-left: 0; }
 .post-tags { width: 100%; }
 .post-stub a, .post-stub a:hover { padding-top: 12px; padding-bottom: 12px; }
 .share { float: left; margin-top: 20px; }
 .share a { margin: 0 5px 0 0; }
 .footer { margin-top: 0; }
 .footer .site-title-wrapper { text-align: center; }
 .footer .button-jump-top { clear: both; display: inline-block; float: none; }
}
@media only screen and (max-width: 400px) {
 .site-header { padding-top: 40px; }
 .post-title, .page-title { font-size: 50px; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; }
 .post-date, .blog-description { line-height: 1.6; }
 .post-date, .blog-description { margin-top: 10px; }
 .post-date:after, .post-date:before, .blog-description:after,
 .blog-description:before { margin-top: 20px; }
 .post-container, .post-list { margin-right: 0; margin-left: 0; }
 .footer-copyright { padding: 0 10px; }
}
.center { margin: 0 auto; text-align: center; }
.book-container-bottom { padding-top: 40px; text-align: center; margin: 0 auto; max-width: 600px; padding-bottom: 80px; }
@media only screen and (max-width: 782px) {
 #container { padding-top: 0; }
}
@media only screen and (max-width: 782px) {
 #container { padding-top: 0; }
}
.gumroad-button img { width: 250px; margin: 0 auto; }
h2.post-description { padding-top: 30px; font-size: 23px; font-weight: 300; text-align: left; line-height: 2.5rem; padding-bottom: 30px; letter-spacing: .5px; text-transform: uppercase; }
.post-list h4 { font-size: 19px; }
code[class*="language-"], pre[class*="language-"] { white-space: pre-wrap !important; }
#cookie-bar { border-top: none !important; }
.book-ad-container { display: flex; flex-direction: row; justify-content: space-around; }
.book-ad-container .description { text-align: left; }
.book-ad-container img { margin: 0; margin-top: -15px; box-shadow: 5px 5px 8px grey; }
.book-landing-with-cover img { box-shadow: 5px 5px 8px grey; }
.ck_form.ck_naked .ck_subscribe_button { background: #00a0fc !important; }
.book-wrapper { display: grid; grid-template-columns: 70% 30%; }
.book-wrapper .book-wrapper-text { margin-top: 70px; text-align: left; }
.book-wrapper img { width: 200px; box-shadow: 2px 2px 2px 2px #ccc; }
@media only screen and (max-width: 400px) {
 .book-wrapper { display: block; }
 .book-wrapper img { display: none; }
}
.post-header.homepage .post-title { text-align: center; }
@media only screen and (max-width: 750px) {
 .post-title { font-size: 65px; }
}
@media only screen and (max-width: 590px) {
 .post-title, h2 { font-size: 45px; }
}
@media only screen and (max-width: 400px) {
 h2 { font-size: 25px; }
 .homepage .post-title { font-size: 50px; }
}
.post-list a:visited { color: gray; }
.book-banner-fixed { position: fixed; width: 100%; text-align: center; background-color: #00a0fc; font-weight: 500; padding-bottom: 20px; padding-top: 20px; top: 0; z-index: 10; }
@media only screen and (max-width: 590px) {
 .book-banner-fixed { display: none; }
}
.home-section-col, aside { display: block; }
.home-section-col ul, aside ul { list-style-type: none; padding-left: 0; }
.home-section-col ul li, aside ul li { font-size: 1.2rem; }
.home-section-col ul li:nth-child(even), aside ul li:nth-child(even) { background: rgba( 0, 160, 252, .1 ); }
.home-section-col ul li:nth-child(odd), aside ul li:nth-child(odd) { }
.home-section-col ul li a, aside ul li a { color: #424240; padding: 20px; display: block; }
.home-section-col ul li a.active, aside ul li a.active { background-color: rgba( 255, 255, 0, .27 ); }
.home-section-col { width: 48.2%; }
@media only screen and (max-width: 400px) {
 .home-section-col { display: block; width: 100%; }
}
.sections-wrapper { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; }
.single-post-container.has-sidebar { display: grid; grid-template-columns: 300px auto; grid-column-gap: 45px; grid-template-areas: "sidebar main"; max-width: 1200px; }
.single-post-container.has-sidebar article { grid-area: main; }
.single-post-container.has-sidebar aside { grid-area: sidebar; }
@media only screen and (max-width: 950px) {
 .single-post-container.has-sidebar { grid-column-gap: 25px; grid-template-columns: 200px auto; }
}
@media only screen and (max-width: 900px) {
 .single-post-container.has-sidebar { grid-template-columns: auto; grid-template-areas: "main" "sidebar"; }
 .single-post-container.has-sidebar aside { padding-right: 5px; }
}
.single-post-container { margin-top: 50px; padding-left: 5px; padding-right: 5px; box-sizing: border-box; }
@media only screen and (max-width: 400px) {
 .formkit-header { font-size: 25px !important; }
}
.ais-hits--item { padding: 10px; }
.ais-hits--item:nth-child(even) { background: rgba( 0, 160, 252, .1 ); }
.ais-hits--item em { font-weight: bold; }
.home-section-col { text-align: center; }
.home-section-col a { color: #424242; }
.home-section-col a:visited { color: #424242; }
.home-section-col section { border: 1px solid #ccc; padding: 30px; height: 150px; margin-bottom: 50px; }
.home-section-col h2 { padding-top: 0; }
.tags { float: right; padding: 10px; }
.tags .button, .tags .button:visited { color: white; }
.tags .button { display: block; padding: 8px; background-color: aquamarine; border: 1px solid #ccc; margin-left: 10px; float: right; }
.tags .node { background-color: #5b5ea6; }
.tags .express { background-color: #b565a7; }
.tags .git { background-color: #dd4132; }
.tags .network { background-color: #ecdb54; color: #333; }
.tags .network:visited { color: #333; }
.tags .browser { background-color: #5b5ea6; }
.tags .pwa { background-color: #6f9fd8; }
.tags .react { background-color: #ec9787; }
.tags .vue { background-color: #00a591; }
.tags .js { background-color: #6b5b95; }
.tags .cookbook { background-color: #eadedb; color: #333; }
.tags .cookbook:visited { color: #333; }
.tags .css { background-color: #bc70a4; }
.tags .devtools { background-color: #ce3175; }
.tags .lab { background-color: #95dee3; }
.tags .services { background-color: #f7786b; }
.tags .libraries { background-color: #dd4132; }
.tags .go { background-color: #bfd641; }
.tags .html { background-color: #f2552c; }
.tags .softskills { background-color: #f2552c; }
.post-list h4 { font-size: 30px; padding-top: 10px; padding-bottom: 10px; }
.footer-tags { margin-bottom: 90px; float: none; text-align: center; }
.footer-tags .button { float: none; display: inline-block; margin-top: 18px; }