html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.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{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="reset"],[type="submit"],button,html [type="button"]{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.5;color:#24292e;font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body a{background-color:transparent;-webkit-text-decoration-skip:objects}.markdown-body a:active,.markdown-body a:hover{outline-width:0}.markdown-body strong{font-weight:inherit}.markdown-body strong{font-weight:bolder}.markdown-body h1{font-size:2em;margin:0.67em 0}.markdown-body img,.markdown-body .gifvid{display:block;border-style:none;margin:0 auto}.markdown-body img,.markdown-body .gifvid{display:block;margin:32px auto;max-width:100%;height:auto;background-color:#fff;border-style:none;box-sizing:content-box}.markdown-body svg:not(:root){overflow:hidden}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:monospace, monospace;font-size:1em}.markdown-body hr{box-sizing:content-box;height:0;overflow:visible}.markdown-body *{box-sizing:border-box}.markdown-body input{font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body a{color:inherit;text-decoration:underline}.markdown-body strong{font-weight:600}.markdown-body hr{height:0;margin:15px 0;overflow:hidden;background:transparent;border:0;border-bottom:1px solid #dfe2e5}.markdown-body hr::before{display:table;content:""}.markdown-body hr::after{display:table;clear:both;content:""}.markdown-body table{margin:32px auto;border-spacing:0;border-collapse:collapse;overflow:auto}.markdown-body td,.markdown-body th{padding:0}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1{margin-top:36px;font-size:28px;font-weight:600}.markdown-body h2{margin-top:28px;font-size:24px;font-weight:600}.markdown-body h3{font-size:20px;font-weight:600}.markdown-body h4{font-size:16px;font-weight:600}.markdown-body h5{font-size:14px;font-weight:600}.markdown-body h6{font-size:12px;font-weight:600}.markdown-body p{margin-bottom:16px;font-size:17px;line-height:1.8;text-align:justify}.markdown-body blockquote{margin:0}.markdown-body ul{list-style:disc}.markdown-body ul ul{list-style:circle}.markdown-body ul,.markdown-body ol{padding-left:0;margin-top:0;margin-bottom:0}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ul ul ol,.markdown-body ul ol ol,.markdown-body ol ul ol,.markdown-body ol ol ol{list-style-type:lower-alpha}li p:nth-child(2){margin-bottom:16px !important}.markdown-body dd{margin-left:0}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height:0.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}.markdown-body blockquote{padding:0 1em;color:#6a737d;border-left:0.25em solid #dfe2e5}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:solid 1px #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5}.markdown-body h1{font-size:2em}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:0.875em}.markdown-body h6{font-size:0.85em;color:#6a737d}.markdown-body ul,.markdown-body ol{padding-left:2em}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:0.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table th{font-weight:600}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid #dfe2e5}.markdown-body table tr{background-color:#fff;border-top:1px solid #c6cbd1}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body p code{padding:0.2em 0.4em;margin:0;font-size:85%;font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;background-color:rgba(27,31,35,0.05);border-radius:3px}.markdown-body kbd{display:inline-block;padding:3px 5px;font:11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5}.markdown-body hr{border-bottom-color:#eee}code[class*="language-"],pre[class*="language-"],.markdown-body pre{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,0.3);font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"],.markdown-body pre{padding:1em;margin:.5em 0;overflow:auto;border-radius:0.3em}:not(pre)>code[class*="language-"],pre[class*="language-"],.markdown-body pre{background:#272822}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.social-share{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.social-share>*:not(a){width:100%}.social-share .social-share-icon{border-radius:3em;border:1px solid #666;color:#666;text-align:center;padding:5px 10px;margin:5px}.social-share .social-share-icon:hover{background:#666;color:#fff}.social-share .icon-linkedin{color:#0077b5;border-color:#0077b5}.social-share .icon-linkedin:hover{background:#0077b5}.social-share .icon-facebook{color:#44619d;border-color:#44619d}.social-share .icon-facebook:hover{background:#44619d}.social-share .icon-twitter{color:#55acee;border-color:#55acee}.social-share .icon-twitter:hover{background:#55acee}html,body{height:100%}html,body,div,span,h1,h2,h3,h4,h5,h6,p,ol,ul,li,textarea,form,label,legend,table,caption,menu,nav,section,summary,time,mark,audio,video,iframe,main,header,footer{padding:0;margin:0;border:0;outline:0 none}body{font-family:-apple-system,Verdana,"PingFang SC","Helvetica Neue","Arial","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;color:#656565;-webkit-font-smoothing:antialiased;background-color:#F7F8FA}ul{list-style-type:none}a{color:#4E4E4E;text-decoration:none;cursor:pointer}::selection{background-color:rgba(0,147,254,0.2)}::-moz-selection{background-color:rgba(0,147,254,0.2)}::-webkit-selection{background-color:rgba(0,147,254,0.2)}.g-container{width:960px}.g-header{position:fixed;top:0;left:0;width:100%;height:26px;padding:16px 0;background-color:transparent;transition:all .6s;z-index:1000}.g-header .g-logo{float:left;margin-left:2%;width:60px;height:26px;background:url("../icons/logo.svg") no-repeat center;background-size:100% 100%;opacity:.8;transition:all .2s}.g-header .g-logo:hover{opacity:1}.g-header .g-logo a{display:block;width:100%;height:100%}.g-header .icon-menu{display:none;position:absolute;top:22px;right:0;padding:8px;font-size:28px;color:#fff;opacity:.8;border-radius:3px}.g-header .icon-menu:active{background-color:rgba(255,255,255,0.2)}.g-header .g-nav{float:right;margin-right:2%}.g-header .g-nav>ul>li{float:left;height:26px;line-height:26px;text-transform:uppercase;margin-right:18px}.g-header .g-nav>ul>li:last-child{margin-right:0}.g-header .g-nav>ul>li>a{display:inline-block;font-size:14px;letter-spacing:1px;color:#fff;padding:0 12px;opacity:.7}.g-header .g-nav>ul>li>a:hover{opacity:1}.g-header .nav-default a:hover{color:#1494FB !important}.g-header .nav-pink a:hover{color:#FC6794 !important}.headerUp{top:-65px}.headerDown{top:0}.g-banner{height:460px;background-color:#2F3139;color:#fff;padding:0 60px}.home-banner{position:relative;text-align:center;overflow:hidden;box-shadow:0 4px 20px rgba(0,38,55,0.16)}.home-banner h3{font-size:20px;font-weight:normal;letter-spacing:10px;margin-top:8px}.home-banner .header-img{display:block;position:absolute;top:0;left:0;width:101%;z-index:0}.home-content{margin:40px auto 60px}.home-content:before,.home-content:after{content:'';display:table}.home-content:after{clear:both}.article-list{float:left;width:695px}.article-list .article-item{width:100%;margin-bottom:16px;padding:30px 20px;background-color:#fff;border:1px solid #E7EAF1;border-radius:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,37,55,0.06)}.article-list .article-item:last-child{margin-bottom:0}.article-list .article-item .post-link{position:absolute;top:0;left:0;width:100%;height:100%}.article-list .article-item .post-cover{position:relative;width:100%;max-height:300px;margin-bottom:14px;overflow:hidden}.article-list .article-item .post-cover img{width:100%;vertical-align:middle}.article-list .article-item .post-preview{position:relative}.article-list .article-item .post-preview .post-title{color:#4E4E4E;font-size:24px;line-height:32px}.article-list .article-item .post-preview .post-subtitle{margin-top:3px;font-size:18px;font-weight:normal;color:#B8BDC3;line-height:26px}.article-list .article-item .post-preview .post-excerpt{margin-top:8px;font-size:16px;line-height:26px}.article-list .article-item .post-meta{height:22px;margin-top:16px}.article-list .article-item .post-meta .post-tags{float:left;display:inline-block}.article-list .article-item .post-meta .post-date{float:right;color:#A9B0BC}.article-item .post-meta .post-tag,.tags-card .tag,.tags-content .tag{display:inline-block;width:auto;height:22px;padding:0 8px;font-size:14px;color:#A6ABB2;font-family:-apple-system,Verdana,"PingFang SC","Helvetica Neue","Arial","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;line-height:22px;box-sizing:border-box;box-shadow:0 0 .6px #D5DAE1;border-radius:2px;background-color:#FAFAFA;cursor:pointer;margin-right:2px;transition:.2s}.article-item .post-meta .post-tag:last-child,.tags-card .tag:last-child,.tags-content .tag:last-child{margin-right:0}.article-item .post-meta .post-tag:hover,.tags-card .tag:hover,.tags-content .tag:hover{color:#83888F}.g-sidebar-wrapper{float:right;width:240px}.search-card{position:relative;margin-top:16px;padding:0}.search-card input,.search-card .search_item{font-size:16px;color:#4E4E4E}.search-card input{padding:30px 20px;background-color:#fff;border:1px solid #E7EAF1;border-radius:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,37,55,0.06);position:relative;padding:12px 46px 12px 18px;margin:0;width:100%;background-color:#fff;outline:none;z-index:1}.search-card ::-webkit-input-placeholder{color:#9EA8B3}.search-card :-moz-placeholder{color:#9EA8B3}.search-card ::-moz-placeholder{color:#9EA8B3}.search-card .icon-search{position:absolute;top:10px;right:18px;font-size:26px;color:#CAD3DC;transition:.2s;z-index:1}.search-card .search_result{position:relative;margin-top:-2px;max-height:230px;background-color:#fff;border-radius:0 0 4px 4px;overflow:auto;z-index:0}.search-card .search_item{padding:6px 18px;margin-bottom:0;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid #E7EAF1;border-right:1px solid #E7EAF1;box-sizing:border-box;opacity:.8;transition:.2s}.search-card .search_item:first-child{padding-top:14px}.search-card .search_item:last-child{padding-bottom:14px;border-radius:0 0 4px 4px;border-bottom:1px solid #E7EAF1}.search-card .search_item:hover{opacity:1;background-color:#FAFAFA}.pagination{float:left;position:relative;left:50%;margin:8px auto 0}.pagination .page-links{position:relative;left:-50%;border:1px solid #E7EAF1;border-radius:3px;background-color:#fff;padding:0 8px;overflow:auto;box-shadow:0 1px 3px rgba(0,37,55,0.06)}.pagination .page-link{display:block;float:left;width:34px;height:34px;margin:6px;font-size:16px;color:#A9B0BC;line-height:34px;text-align:center;border-radius:2px;cursor:pointer}.pagination .page-link:hover{color:#8F98AA;background-color:#EEF0F4}.pagination .active{color:#8F98AA;background-color:#EEF0F4}.pagination #page-link-container{display:inline-block;float:left}.g-footer{min-height:40px;padding:20px 0;border-top:1px solid #E7EAF1;text-align:center}.g-footer section{font-size:14px;line-height:20px;color:#A6ABB2}.g-footer section a{color:#A6ABB2}.g-footer section a:hover{color:#83888F}.post-header,.markdown-body,.post-wrapper,.author-detail,.social-share-wrapper{margin:0 auto}.post-wrapper{width:720px}.post-header{position:relative;padding:0;margin:0;color:#fff;overflow:hidden;background-color:#4285f4;z-index:0}.post-header h1{font-size:32px;line-height:42px;margin-bottom:12px}.post-header .post-tags{margin:150px 0 16px}.post-header .post-tags .post-tag{display:inline-block;width:auto;height:22px;padding:0 8px;font-size:14px;color:#A6ABB2;font-family:-apple-system,Verdana,"PingFang SC","Helvetica Neue","Arial","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;line-height:22px;box-sizing:border-box;box-shadow:0 0 .6px #D5DAE1;border-radius:2px;background-color:#FAFAFA;cursor:pointer;margin-right:2px;transition:.2s;box-shadow:none;margin-bottom:8px}.post-header .post-tags .post-tag:last-child{margin-right:0}.post-header .post-tags .post-tag:hover{color:#83888F}.post-header .post-meta{margin-top:32px}.post-header .post-meta .post-meta-item{display:inline-block;font-size:16px;font-weight:500}.post-header .post-meta .post-meta-item:last-child{margin-right:0}.post-header .post-meta .post-meta-item .iconfont{font-size:18px;margin-right:4px}.post-header .post-meta .post-meta-item a{color:#fff}.post-content{position:relative;width:100%;background-color:#fff;overflow:hidden;padding:40px 0 80px}.post-content .post-subtitle{position:relative;width:720px;font-size:18px;color:#a6a6a6;font-weight:normal;line-height:28px;text-align:center;padding:35px 0;margin:0 auto 40px;box-sizing:border-box}.post-content .post-subtitle:before,.post-content .post-subtitle:after{position:absolute;content:'';left:50%;margin-left:-13%;width:26%;height:2px;background-color:#EAECEE}.post-content .post-subtitle:before{top:0}.post-content .post-subtitle:after{bottom:0}.markdown-body{width:720px;box-sizing:border-box;padding:0 0 32px}.markdown-body .highlight{margin:0 0 16px;overflow:scroll}.markdown-body img{transition:.3s}.markdown-body ul li p,.markdown-body ol li p{margin:0}.markdown-body ul li p:first-child,.markdown-body ol li p:first-child{margin-bottom:0}.social-share-wrapper{float:left;position:relative;left:50%}.social-share-wrapper .social-share{position:relative;left:-50%}.post-footer-item{margin:0 auto;width:720px}.tags-banner{height:300px;text-align:center}.tags-banner h2{font-size:36px;line-height:300px}.tags-content{width:695px;margin:-100px auto 0}.tags-list{padding:40px 0}.tags-list li{padding:30px 20px;background-color:#fff;border:1px solid #E7EAF1;border-radius:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,37,55,0.06);margin-bottom:12px}.tags-list li:first-child{margin-bottom:24px;cursor:default}.tags-list li .tag{box-shadow:0 0 .3px #BFC2C6;margin-bottom:12px}.tags-list li .tag-name{display:block;font-size:20px;color:#333;text-align:center;margin-bottom:20px}.tags-list li .tag-post{display:block;font-size:16px;color:#666;text-align:center;margin:16px auto}.tags-list li .tag-post:hover{color:#000}.np-banner{position:fixed;top:0;left:0;width:100%;height:100%;padding:0 !important;text-align:center}.np-banner h1{font-size:86px;letter-spacing:4px;font-weight:normal;padding:160px 0 20px}.np-banner .subheading{font-size:18px}.np-banner .btn{display:block;width:160px;height:38px;font-size:16px;color:#fff;line-height:38px;border-radius:3px;border:1px solid #fff;margin:80px auto 0;opacity:.8}@media screen and (max-width: 960px){.g-container{width:auto}.article-list{float:none;margin:0 auto}.g-sidebar,.search-card{display:none}.pagination .page-num{display:none}.pagination .page-link{width:56px}}@media screen and (max-width: 768px){.post-wrapper,.markdown-body,.read-next{width:92%}.post-content .post-subtitle{width:92%}.author-detail .author-card{width:92%}}@media screen and (max-width: 695px){.g-header{position:absolute;top:0;padding:28px 0}.g-header .icon-menu{display:block}.g-header .g-nav{position:relative;top:48px;right:1%;display:none;width:120px;background-color:#fff;border-radius:2px;padding:8px 16px;box-shadow:0 3px 8px rgba(0,0,0,0.2)}.g-header .g-nav>ul>li{float:none;height:auto;line-height:normal;margin-right:0}.g-header .g-nav>ul>li>a{display:block;padding:16px 0;font-size:16px;font-weight:bold;color:#A5A8B0;opacity:1}.author-detail .author-card .sns-links{margin-top:24px}.author-detail .author-card .sns-links li{width:36px;height:36px}.author-detail .author-card .sns-links li .iconfont{font-size:32px;line-height:40px}.author-detail .comment{width:90%}.read-next{display:block}.read-next-item{margin-bottom:16px}.read-next-item:first-child{margin-right:0}.read-next-item:last-child{margin-bottom:0}.read-next-item:hover{top:0;box-shadow:none}.read-next-item section{width:90%;margin-left:5%;margin-top:45px}.g-banner{padding:0 20px}.home-banner h3,.tags-banner h3{margin-top:8px}.home-banner .header-img,.tags-banner .header-img{width:695px}.home-content{margin-top:0}.article-list,.tags-content{width:100%}.tags-content{margin-top:0}.tags-banner{height:300px}.tags-list{padding:0 0 24px}.g-footer{padding:30px 0}}@media screen and (max-width: 500px){.home-banner{height:400px}.home-banner h2{padding-top:180px;font-size:28px;line-height:48px}.home-banner h3{margin-top:2px;font-size:18px;letter-spacing:6px}.home-banner .header-img{width:695px;left:-100px}.home-content{margin-bottom:32px}.article-list .article-item{padding:20px 16px;margin-bottom:8px;border-left:none;border-right:none;border-radius:0;box-shadow:none}.article-list .article-item:first-child{border-top:none}.article-list .article-item .post-cover{max-height:200px}.article-list .article-item .post-preview .post-title{font-size:18px;line-height:26px}.article-list .article-item .post-preview .post-subtitle{font-size:16px;line-height:20px}.article-list .article-item .post-meta{margin-top:12px}.article-list .article-item .post-meta .post-tags{display:none}.article-list .article-item .post-meta .post-date{float:left;margin-left:5px}.pagination .page-links{box-shadow:none}.post-header{padding:0;height:360px}.post-wrapper .post-tags{margin:100px 0 8px}.post-wrapper h1{font-family:"Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Microsoft Yahei", Sans-serif}.post-wrapper .post-meta{margin-top:16px}.post-content{padding-top:20px}.post-content .post-subtitle{padding:8px 0 24px;margin-bottom:32px}.post-content .post-subtitle:before{height:0}.markdown-body p,.markdown-body ul>li{font-size:16px;font-weight:300;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{margin-top:24px}.markdown-body table{margin:16px auto}.markdown-body img{margin:0 auto 16px}.markdown-body strong{font-weight:400}.markdown-body blockquote p{font-size:18px;letter-spacing:1px;color:#888;word-break:break-all}}@media screen and (max-width: 376px){.home-banner h2{font-size:26px;line-height:38px}.home-banner h3{margin-top:4px;font-size:16px}.home-banner .header-img{width:695px;left:-100px}}.loaded[data-ea-publisher],.loaded[data-ea-type]{font-size:14px;font-weight:normal;font-style:normal;leter-spacing:0px;vertical-align:baseline;line-height:1.3em}.loaded[data-ea-publisher] a,.loaded[data-ea-type] a{text-decoration:none}.loaded[data-ea-publisher] .ea-pixel,.loaded[data-ea-type] .ea-pixel{display:none}.loaded[data-ea-publisher] .ea-content,.loaded[data-ea-type] .ea-content{margin:1em 1em 0.5em 1em;padding:1em;background:rgba(0,0,0,0.03);color:#505050}.loaded[data-ea-publisher] .ea-content a:link,.loaded[data-ea-type] .ea-content a:link{color:#505050}.loaded[data-ea-publisher] .ea-content a:visited,.loaded[data-ea-type] .ea-content a:visited{color:#505050}.loaded[data-ea-publisher] .ea-content a:hover,.loaded[data-ea-type] .ea-content a:hover{color:#373737}.loaded[data-ea-publisher] .ea-content a:active,.loaded[data-ea-type] .ea-content a:active{color:#373737}.loaded[data-ea-publisher] .ea-content a strong,.loaded[data-ea-publisher] .ea-content a b,.loaded[data-ea-type] .ea-content a strong,.loaded[data-ea-type] .ea-content a b{color:#088cdb}.loaded[data-ea-publisher] .ea-callout a:link,.loaded[data-ea-type] .ea-callout a:link{color:#6a6a6a}.loaded[data-ea-publisher] .ea-callout a:visited,.loaded[data-ea-type] .ea-callout a:visited{color:#6a6a6a}.loaded[data-ea-publisher] .ea-callout a:hover,.loaded[data-ea-type] .ea-callout a:hover{color:#505050}.loaded[data-ea-publisher] .ea-callout a:active,.loaded[data-ea-type] .ea-callout a:active{color:#505050}.loaded[data-ea-publisher] .ea-callout a strong,.loaded[data-ea-publisher] .ea-callout a b,.loaded[data-ea-type] .ea-callout a strong,.loaded[data-ea-type] .ea-callout a b{color:#088cdb}.loaded[data-ea-publisher] .ea-callout a,.loaded[data-ea-type] .ea-callout a{font-size:0.8em}.loaded.dark[data-ea-publisher] .ea-content,.loaded.dark[data-ea-type] .ea-content{background:rgba(255,255,255,0.05);color:#dcdcdc}.loaded.dark[data-ea-publisher] .ea-content a:link,.loaded.dark[data-ea-type] .ea-content a:link{color:#dcdcdc}.loaded.dark[data-ea-publisher] .ea-content a:visited,.loaded.dark[data-ea-type] .ea-content a:visited{color:#dcdcdc}.loaded.dark[data-ea-publisher] .ea-content a:hover,.loaded.dark[data-ea-type] .ea-content a:hover{color:#f6f6f6}.loaded.dark[data-ea-publisher] .ea-content a:active,.loaded.dark[data-ea-type] .ea-content a:active{color:#f6f6f6}.loaded.dark[data-ea-publisher] .ea-content a strong,.loaded.dark[data-ea-publisher] .ea-content a b,.loaded.dark[data-ea-type] .ea-content a strong,.loaded.dark[data-ea-type] .ea-content a b{color:#50baf9}.loaded.dark[data-ea-publisher] .ea-callout a:link,.loaded.dark[data-ea-type] .ea-callout a:link{color:#c3c3c3}.loaded.dark[data-ea-publisher] .ea-callout a:visited,.loaded.dark[data-ea-type] .ea-callout a:visited{color:#c3c3c3}.loaded.dark[data-ea-publisher] .ea-callout a:hover,.loaded.dark[data-ea-type] .ea-callout a:hover{color:#dcdcdc}.loaded.dark[data-ea-publisher] .ea-callout a:active,.loaded.dark[data-ea-type] .ea-callout a:active{color:#dcdcdc}.loaded.dark[data-ea-publisher] .ea-callout a strong,.loaded.dark[data-ea-publisher] .ea-callout a b,.loaded.dark[data-ea-type] .ea-callout a strong,.loaded.dark[data-ea-type] .ea-callout a b{color:#50baf9}.loaded[data-ea-publisher] .ea-content,.loaded[data-ea-type] .ea-content{border:0px;border-radius:3px;box-shadow:0px 2px 3px rgba(0,0,0,0.15)}.loaded.raised[data-ea-publisher] .ea-content,.loaded.raised[data-ea-type] .ea-content{border:0px;border-radius:3px;box-shadow:0px 2px 3px rgba(0,0,0,0.15)}.loaded.bordered[data-ea-publisher] .ea-content,.loaded.bordered[data-ea-type] .ea-content{border:1px solid rgba(0,0,0,0.04);border-radius:3px;box-shadow:none}.loaded.bordered.dark[data-ea-publisher] .ea-content,.loaded.bordered.dark[data-ea-type] .ea-content{border:1px solid rgba(255,255,255,0.07)}.loaded.flat[data-ea-publisher] .ea-content,.loaded.flat[data-ea-type] .ea-content{border:0px;border-radius:3px;box-shadow:none}.loaded[data-ea-type="text"]{font-size:14px}.loaded[data-ea-type="text"] .ea-content{text-align:left}.loaded[data-ea-type="text"] .ea-callout{margin:0.5em 1em 1em 1em;padding-left:1em;padding-right:1em;text-align:right;font-style:italic}body,html{min-height:100%;height:auto}html{scroll-behavior:smooth}body{font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;background:#fef7f6}a{color:inherit}.card-style{border:1px solid #e7eaf1;border-radius:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,37,55,0.06);position:relative;padding:12px;width:100%;background-color:#fff}.home-banner{height:auto;padding:60px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:none;background:#f0967f}.home-banner h1>span{font-size:2.5em;font-family:"Libre Baskerville","Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;height:100px;line-height:100px}.home-banner .tagline{margin:0;margin-top:0.1em;margin-bottom:1em}.home-banner .learn-cta-wrapper{margin-top:0}.home-banner a.learn-cta-what-to-learn{font-weight:bold;transition:all, .25s}.home-banner a.learn-cta-what-to-learn:hover{opacity:1}.home-banner-inner{text-align:left;width:960px;color:#5b1b0b}.g-header.has-bg .g-nav a{color:#666}.g-logo{background:none !important}.g-logo svg{height:inherit;width:inherit;-webkit-filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.2));filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.2))}.g-logo svg path{fill:white !important}.g-header.has-bg .g-logo svg{-webkit-filter:none;filter:none}.g-header.has-bg .g-logo svg path{fill:url(#pink-theme) !important}.icon-website:before{content:"\f0ac"}.colorful-banner{text-align:left}.colorful-banner input{margin:50px auto 0 !important}.np-banner input.btn[type="submit"]{background:none;line-height:initial}.np-banner input[type="text"],.np-banner input[type="email"],.np-banner textarea{display:block;font-size:16px;color:black;padding-left:11px;padding-top:11px;padding-bottom:11px;border-radius:3px;border:1px solid #fff;opacity:.8;width:100%;width:-webkit-fill-available}.btn{display:block;width:160px;height:38px;font-size:16px;color:#fff;line-height:38px;border-radius:3px;border:1px solid #fff;margin:auto;opacity:.8;text-align:center}.sidebar-btn{color:black;border:none;margin-top:10px;margin-bottom:32px;transition:opacity, 1s;border-radius:3px;box-sizing:border-box;height:70px;line-height:70px;color:white;margin-top:0;width:max-content;max-width:100%;box-shadow:none !important;background:#F0957E;opacity:1;border-radius:2em !important;display:flex !important;justify-content:flex-start;align-items:center;padding:calc(70px - 3.5em);border:0px solid #F0957E;overflow:hidden;transition:all .25s ease-in-out}.sidebar-btn:hover{color:#F0957E !important}.sidebar-btn *{z-index:1}.sidebar-btn .emoji{background:white;border-radius:2rem;margin-right:0.5rem;width:3rem;height:3rem;box-sizing:content-box;display:flex;justify-content:center;align-items:center;font-size:1.6em;position:relative}.sidebar-btn .animation-bg{position:absolute;top:0;bottom:0;left:0;right:0;background:white;border-radius:50%;z-index:0;transition:all .25s ease-in-out}.sidebar-btn:hover .animation-bg{top:-5em;bottom:-5em;left:-5em;right:-5em}.g-sidebar-wrapper .sidebar-btn{width:100%}.donate-btn{background-color:#f66}.donate-btn:hover{color:#f66 !important;border-color:#f66}.np-baner h1{word-wrap:break-word}#share{opacity:0;transition:opacity, 1s;pointer-events:none}#share:target{opacity:0.99;z-index:1000;pointer-events:all}#share{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center;line-height:100vh;background-color:rgba(255,255,255,0.86)}#share .social-share{position:initial}#share .social-share-icon{color:white;border-color:white}#share .social-share-close{position:fixed;top:0;bottom:0;left:0;right:0}#share .social-share-close-x{position:fixed;top:10px;right:17px;line-height:normal;color:white;font-weight:bold;font-size:25px;cursor:pointer}body.stop-scrolling{height:100%;overflow:hidden}.social-share-icon.icon-email{font-size:17px}.social-share-home,.sp-badge-home{text-align:center;margin:0}.social-share-home span{display:block;font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif !important;margin-bottom:4px}.wrap code{white-space:pre-wrap !important;white-space:-moz-pre-wrap !important;white-space:-pre-wrap !important;white-space:-o-pre-wrap !important;word-wrap:break-word !important}.sp-badge-home{display:block}.sp-badge-home img{max-width:calc(100% - 12px - 24px)}.markdown-body table{width:100%}.markdown-body table th{text-align:left}.read-next-item section p:first-child{margin-bottom:3px}.comments{margin-top:4rem}.learn-lang-banner{height:370px;text-align:left;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,38,55,0.16);background-attachment:fixed;display:flex;align-items:center;justify-content:center;text-align:center;border-bottom-left-radius:999em;border-bottom-right-radius:999em;margin-left:-10em;margin-right:1em}.learn-lang-banner .learn-lang-banner-inner{margin-top:calc((52px - 1.22em)/-2)}.learn-lang-banner h1{font-size:86px;letter-spacing:4px;display:inline;font-weight:bold;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;line-height:86px}.learn-lang-banner h2{padding:0;text-shadow:none;display:block;font-size:1.5rem;font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;line-height:1.22em;margin-top:calc((52px - 1.22em)/2)}.learn-lang-content{background-color:transparent;padding:4em;padding-top:0}.learn-lang-content a.back{margin-bottom:15px;display:block;color:#757575;font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif}.learn-lang-banner{margin-bottom:16px;padding:24px;color:white;background-image:linear-gradient(100deg, #ffce69, #fa709a) !important}.learn-lang-banner{background-attachment:fixed;background-position:center;background-size:cover}.learn-lang-content .article-list{max-width:none;display:flex;overflow-x:scroll;margin-top:-6em;padding-bottom:1em}.learn-lang-content .article-list .article-item{min-width:20em;margin-right:2em;margin-bottom:0}.learn-lang-content .article-list .article-item .post-cover{height:14em}.learn-lang-content .article-list .article-item .post-cover img{margin:0;width:100%;height:100%;object-fit:cover;object-position:center center}.learn-lang-content .article-list .article-item .post-number{margin-top:-16rem;margin-bottom:14rem;position:relative;margin-left:auto;margin-right:0.5rem !important;font-size:1.5em;background:white !important;color:#f0967f !important;box-shadow:0 4px 15px rgba(0,38,55,0.25) !important}.learn-lang-content .article-list::-webkit-scrollbar{height:2em}.learn-lang-content .article-list::-webkit-scrollbar-track{background:transparent}.learn-lang-content .article-list::-webkit-scrollbar-thumb{border-radius:2em;background:linear-gradient(100deg, rgba(255,206,105,0.9), rgba(250,112,154,0.9))}.in-post-stream{width:auto;margin-bottom:16px;padding:24px;color:white}.in-post-stream.newsletter{background-color:#f0967f;font-weight:bold}.in-post-stream.newsletter *:first-child,.in-post-stream.social *:first-child{margin-bottom:1em}.newsletter-form label{display:block;height:0;width:0;overflow:hidden}.newsletter-form input{font-family:inherit;border:none;font-size:1em;padding:.8em;margin:0 !important;display:inline;vertical-align:top}.newsletter-form input[type="email"]{width:70%}.newsletter-form input[type="submit"]{width:29%;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;font-weight:bold;vertical-align:middle;cursor:pointer;background:#f8cc5c}.newsletter-form .extra{height:0;overflow:hidden;transition:height, 1s}.newsletter-form .extra input{margin:.25em !important}.newsletter-form .extra .measurer>input:first-child{margin-top:.5em !important}.newsletter-form .row{display:flex}.newsletter-form .extra input:not([required]){opacity:.7}.in-post-stream.social{background-color:white;color:#656565}.in-post-stream.social .explainer{display:none;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.in-post-stream.social .networks-wrapper{display:flex}.in-post-stream.social .network{margin:0 !important;padding:1em;width:calc(50% - .5em);text-align:center;color:white;text-decoration:none}.in-post-stream.social .network:first-child{margin-right:1em !important}.in-post-stream.social .network.facebook{background-color:#3b5998}.in-post-stream.social .network.twitter{background-color:#1da1f2}.in-post-stream.social .network.reddit{background-color:#FF5700}.in-post-stream a{text-decoration:underline}.codetheweb-learn,.codetheweb-learn .iconfont.icon-logo{font-size:2rem}.codetheweb-learn a{text-decoration:none}.token.doctype{color:white}pre.reveal{background:#282923;text-align:center;cursor:pointer}pre.reveal:after{content:"[ click to reveal code ]";color:white}pre.reveal>*{display:none}#backlinks{display:none}.no-before:before{content:none !important}.no-after:after{content:none !important}.colorful-banner .subheading a{color:white;text-decoration:underline}.colorful-banner .subheading{line-height:1.5em}.home-banner svg#Chevron_circled_down{height:35px;margin-top:calc( ( ( (100vh - 186px) / 2 ) - 35px ) / 2);opacity:.4;transition:all, 1s}.home-banner svg#Chevron_circled_down:hover{opacity:1}blockquote.newsletter{background-color:#ffd78e;padding:1rem;border-left:none}.markdown-body>blockquote.newsletter:last-child{margin-top:32px}.np-banner{overflow-y:scroll}.np-banner .btn{margin-bottom:15px !important}img.screenshot-white{border:1px solid black !important;max-width:calc(100% - 2px)}.photo-cred{opacity:.4}.article-list,.g-sidebar-wrapper{margin-top:2rem}.tagline{font-size:1.5em;font-weight:normal}.learn-cta-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:center;margin-top:2em;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:1rem;width:max-content;max-width:100%}.learn-cta-wrapper a{box-sizing:border-box;padding:1em 2em;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-weight:bold;border-radius:2em;transition:all 1s;background-color:#5b1b0b;color:#f0967f;text-transform:uppercase;transition:all, .5s}.learn-cta-wrapper a:hover{transform:scale(0.95) translateY(0.5em);background-color:rgba(91,27,11,0.2);color:#5b1b0b}a.learn-cta-what-to-learn{display:block;text-align:center;width:max-content;margin:0;margin-top:1rem;font-size:0.75em;opacity:.6}.home-content{display:grid;grid-template-columns:695px 240px;grid-template-rows:auto auto;grid-gap:1em;margin-top:0}.article-list{grid-column-start:1;width:100%;max-width:695px}.article-list .large-message{margin:1em;font-size:3em;font-weight:bold;text-align:right;margin-top:0}@media screen and (min-width: 701px){.article-list .large-message{margin-top:-1.5em;position:relative}.article-list .large-message .primary{display:inline;background:rgba(255,206,105,0.95);box-sizing:border-box;border-bottom:6px solid !important;padding-bottom:2px;line-height:calc(1.2em + 8px)}}.article-list .large-message .sub{font-size:1.2rem;font-weight:normal;margin-top:1em}.recent-articles-title{margin-top:2rem;margin-bottom:1rem;text-align:left;font-family:"Libre Baskerville","Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;font-size:2.5em}.article-list .article-item{border-radius:2em;padding:25px;padding-bottom:calc(25px + 22px + 16px);position:relative}.article-list .article-item .post-cover{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:-25px;margin-bottom:25px;width:auto}.article-list .article-item .post-cover img{height:auto}.article-list .article-item .post-preview .post-title{font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.article-list .article-item .post-preview .post-excerpt{font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.article-list .article-item .post-meta{position:absolute;bottom:25px;left:25px;right:25px;width:calc(100% - 50px)}header .top-index-content{display:none}.top-index-content .in-post-stream.newsletter{padding:0;background:transparent;margin-top:2em}.top-index-content .in-post-stream.newsletter .explainer{display:none}.top-index-content .in-post-stream.newsletter:before{content:'Get a weekly email filled with resources to learn web development:';display:block;margin-bottom:1em;cursor:text}.top-index-content .in-post-stream.newsletter input[type="submit"]{font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;color:white;background:#f8cc5c}.freebie-hero{background-color:#f0967f;color:white;box-sizing:border-box;min-height:80vh;padding-top:58px;display:grid;grid-template-columns:1fr 1fr;grid-column-gap:4rem;align-items:center;overflow:hidden}.freebie-hero a{color:white;text-decoration:underline}.freebie-hero>*:first-child{box-sizing:border-box;width:50vw;padding-left:4rem;text-align:right}.freebie-hero h1{font-size:3em}.freebie-hero h2{font-size:1.2em;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;margin:1rem 0}.freebie-hero .newsletter-form{margin-left:auto}.freebie-hero .newsletter-form input[type="email"]{width:69%}.freebie-hero img.teaser{height:60vh;box-shadow:0 0 6em rgba(0,0,0,0.42);filter:blur(2px)}.freebie-explanation{box-sizing:border-box;height:20vh;padding:0 20%;font-size:1em;font-weight:500;display:flex;justify-content:center;align-items:center;text-align:center}.freebie-explanation>a{cursor:help}.freebie-hero.promo{padding:1rem 0;margin-bottom:32px !important;min-height:auto !important}.freebie-hero.promo>*:first-child{width:calc(695px * 0.8)}.freebie-hero.promo img{height:20rem}.after-post{width:720px;margin:0 auto}.newsletter-page{background-color:white;height:100%}.newsletter-page .newsletter-header{min-height:50vh;color:white;display:flex;align-items:center;justify-content:center;text-align:center;font-size:2em;padding:5% 0;border-radius:calc((100vw - 695px) / 2);border-top-left-radius:0;border-top-right-radius:0;background:#f0967f}.newsletter-page .newsletter-header>div{width:695px;max-width:90%;text-align:left}.newsletter-page .newsletter-header .code-the-web-weekly-logo{margin:0 auto;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;font-size:0.7em;padding-bottom:.5em;margin-bottom:.5em;border-bottom:3px solid;width:max-content}.newsletter-page .newsletter-header h1{font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.newsletter-page .newsletter-header .subheading{margin-top:.5em;font-size:1.5rem;font-weight:normal}.newsletter-page main{width:695px;max-width:90%;margin:0 auto}.newsletter-page .newsletter:first-child{margin-top:-2em;border-color:transparent}.newsletter-page .preview{background-color:#f7f7f7;height:100vh;width:100%;padding:0;border:2px solid #e7eaf1 !important}.newsletter-page .leading-text{text-align:center;margin:2em}.newsletter-page .example-newsletter-title{text-align:center;margin:1em}.newsletter-page .in-post-stream.newsletter .explainer{display:none}.newsletter-thanks h1{padding-top:0;font-family:"Roboto Mono",ui-monospace,"SF Mono","Noto Mono","Noto Sans Mono","Droid Mono","Droid Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;text-align:center;font-weight:bold}.newsletter-thanks{display:flex;flex-direction:column;justify-content:center;align-items:center}.newsletter-thanks>div{max-width:695px}.book-page .book-img{width:100%}.book-page .tweets{display:flex;flex-direction:column}.book-page .tweets.oldest-first{flex-direction:column-reverse}.book-page twitterwidget{margin:2em auto !important}.search-card{margin-bottom:2em;display:block;max-width:calc(100vw - 4em);margin-top:-4.2rem}.search-card,.search-card input{font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif}.search-card input{color:#5b1b0b;background:#fad9d1}.search-card input::placeholder{color:#5b1b0b;opacity:.5}.search-card .search_result{margin-bottom:2px;-webkit-margin-collapse:separate}.search-card label{display:block;width:0;height:0;overflow:hidden}.patron-page ul{list-style:none;margin-left:0;padding-left:1em;text-indent:-1em}.patron-page ul li:before{content:'🙏 '}.patron-page ul li.add{background:limegreen;text-indent:0;padding:.5em;margin-left:-1.2em;margin-top:1.5em;width:max-content;border-radius:.25em;font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;color:white;text-transform:uppercase;font-weight:900;font-size:0.8em;line-height:1em}.patron-page ul li.add a{text-decoration:none}.patron-page .patron-grid{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:2em}.patron-page .patron-grid::before{content:initial}.patron-page .patron-grid h1{text-align:center;margin:0}.patron-page .patron-grid section.sponsor,.patron-page .patron-grid h1{grid-column-start:1;grid-column-end:3}.patron-page .patron-grid section.sponsor{text-align:center;background-color:#ffd78e}.patron-page .patron-grid section.sponsor *{margin-left:auto;margin-right:auto}.patron-page .patron-grid section.patreon-promo{background-color:#F96854}.patron-page .patron-grid section.patreon-promo a{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.patron-page .patron-grid section.patreon-promo a img{width:90%;margin:0}.post-header-wrapper{background:#fef7f6}.post-header{display:flex;justify-content:center;align-items:center;box-sizing:border-box;padding-top:58px;height:358px;background:#f0967f;color:#5b1b0b}.post-header .post-tags{margin-top:0}.post-header .post-tags .post-tag{color:#5b1b0b;background:rgba(91,27,11,0.16)}.post-header .post-tags .post-tag:hover{color:#5b1b0b;background:rgba(91,27,11,0.26)}.post-header h1{font-family:"Libre Baskerville","Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;font-size:3em;line-height:1em}.post-header .filter{opacity:1;background:linear-gradient(59deg, #f0967f 720px, transparent)}.g-sidebar-wrapper>*{margin-bottom:16px}.author-card{text-align:left}.author-card .avatar{display:none}.author-card .author-name{font-size:1.3em;margin-bottom:0.5em;font-weight:normal}.author-detail .author-card .author-name{font-size:2em}.tags-card{display:flex;flex-wrap:wrap}.tags-card .tag{margin:3px}.share-title{margin-bottom:0.5em;text-align:center}.tags-card .tag,.post-tag{font-family:"Product Sans","Google Sans","Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif !important}.post-page-content{display:flex;flex-direction:row-reverse;justify-content:center;background:#fef7f6}.post-content,.post-header-inner{width:720px;max-width:100%}.post-content{background:#fef7f6;flex-grow:1}.post-sidebar-wrapper,.post-header-sidebar-spacer{width:360px;margin-left:0}.post-sidebar-wrapper{display:block;z-index:1;box-sizing:border-box;z-index:1001}.post-sidebar{top:0;padding-top:40px;box-sizing:border-box;position:sticky;height:100vh;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;border-left:1px solid #e6e6e6}.post-sidebar h1{margin-bottom:0.5em;margin-left:32px;font-size:1.3em;font-weight:600;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.post-sidebar ol,.post-sidebar ul{list-style:none;margin-left:-0.5em;overflow-y:auto;padding-bottom:40px}.sidebar-post{margin:0.25em 0.5em;margin-left:32px;border-radius:2em;opacity:.9;color:#842710;font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif}.sidebar-post:hover{background:#fdf0ed}.sidebar-post.active{background:#f8cabf}.sidebar-post a{display:flex;align-items:center;padding:.5em}.sidebar-post-number,.learn-lang-content .article-list .article-item .post-number{width:2em;height:2em;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-right:0.5em;flex-shrink:0;background:#fbe1da;color:#eb7052;font-weight:bold}.after-post .newsletter{border:none;box-shadow:none;border-radius:10px}.markdown-body{font-family:"Roboto Slab",ui-serif,"New York","New York Medium","New York Large","New York Small","New York Extra Large","Noto Serif","Droid Serif","Georgia","PT Serif","Palatino",serif;background:#fef7f6}.markdown-body p{text-align:left}code[class*=language-],pre[class*=language-],.markdown-body p code{font-family:"Roboto Mono",ui-monospace,"SF Mono","Noto Mono","Noto Sans Mono","Droid Mono","Droid Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace}.g-footer{background:#f6f7f9}#codefund{display:none !important}#ethical-ads{min-height:123.05px;display:flex;align-items:center;flex-shrink:0}#ethical-ads .ea-content{margin-left:32px;margin-right:32px;margin-top:0}#ethical-ads .ea-placement{width:100%}body.post .g-header{padding-left:calc((100vw - 1080px) / 2);padding-right:calc((100vw - 1080px) / 2 + 360px);width:720px;max-width:100%}body.post .g-header .g-logo{margin-left:0}body.post .g-header nav>ul>li:last-child>a{padding-right:0}.gifvid{position:relative;height:0}.gifvid video{position:absolute;top:0;left:0;width:100%;height:100%}@media screen and (max-width: 1144px){.post-header-sidebar-spacer,.post-sidebar>*:not(#codefund):not(#ethical-ads){display:none !important}.post-content,.author-detail,.post-header{padding-right:0}.post-page-content{flex-direction:column;align-items:center}.post-sidebar-wrapper{position:static;margin-left:0;width:100%}.post-sidebar{height:max-content;border-left:none;padding-top:20px}.post-content{padding-top:0}body.post .g-header{padding-left:calc((100vw - 720px) / 2);padding-right:calc((100vw - 720px) / 2)}#codefund{margin:0}#ethical-ads{margin-top:1rem;width:100%;max-width:760px;margin-left:auto;margin-right:auto}#ethical-ads .ea-content{margin-left:20px;margin-right:20px}#ethical-ads .ea-callout{margin-bottom:0}}@media screen and (max-width: 960px){.g-sidebar,.sp-badge-home{display:none !important}.g-sidebar-wrapper{float:none;width:auto}.home-content{margin-top:0}.g-sidebar-wrapper .sidebar-btn,.bmc-wrapper,.card-style{max-width:695px;width:auto;float:none;margin:16px auto !important;left:0;display:block}.home-content{grid-template-columns:auto !important;padding:0 2em}.before-article-list{grid-column:unset !important}.recent-articles-title{text-align:center;margin-top:1rem}.home-banner-inner{width:695px}.freebie-hero{min-height:auto;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;padding:4rem !important}.freebie-hero>*:first-child{width:auto !important;padding-left:0;margin-top:4rem;text-align:center}.freebie-hero img{width:80%;height:auto !important}.freebie-explanation{padding:2rem 4rem;height:auto;text-align:justify}}@media screen and (max-width: 848px){.learn-lang-content .markdown-body{margin-left:auto}.learn-lang-banner .learn-lang-banner-inner{left:20px;right:20px}.home-banner h1>span{font-size:1.7em}}@media screen and (max-width: 780px){.home-banner h1>span{font-size:1.3em}.article-list .large-message{font-size:2.1em}}@media screen and (max-width: 768px){.markdown-body,.post-wrapper,.read-next,.after-post{width:calc(100% - 40px)}.patron-page .patron-grid{grid-template-columns:1fr}.patron-page .patron-grid section.sponsor,.patron-page .patron-grid h1{grid-column-start:initial;grid-column-end:initial}.patron-page .patron-grid section *{text-align:center;margin-left:auto !important;margin-right:auto !important}.learn-lang-banner{margin-left:-5em}}@media screen and (max-width: 695px){.g-header{background-color:white;box-shadow:0 4px 100px rgba(0,38,55,0.31)}body.home .g-header{background:#f0967f}.tagline{font-weight:bold}.g-logo{width:100% !important;opacity:1 !important;margin-left:0 !important}.g-logo svg{-webkit-filter:none;filter:none}.g-logo svg path{fill:url(#pink-theme) !important}#menu-toggle{color:#f0967f;background:-webkit-linear-gradient(100deg, #ffce69, #fa709a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}body.home #menu-toggle{color:white;background:unset;-webkit-background-clip:unset;-webkit-text-fill-color:unset}body.post{margin-top:0px !important}body.post .g-header{background:#f0967f;box-shadow:none;padding:0;height:0}body.post .g-header .g-logo a{width:auto;position:absolute;height:1.3em;right:20px;top:40px}body.post .g-logo svg{width:auto}body.post .g-logo svg path{fill:#5b1b0b !important}.post-sidebar-wrapper{width:100%}.post-sidebar{padding-top:0}body.home .g-logo svg path{fill:white !important}.g-nav{position:absolute !important;top:102px !important}body.home .g-nav{top:82px !important}.g-banner{padding:0 20px !important}.home-banner{display:none}body:not(.home){margin-top:82px}body.home header{position:static;height:auto}body.home header .top-index-content{DISPLAY:BLOCK;padding:2em;margin-top:56px;color:#5b1b0b}body.home header .learn-cta-wrapper a{text-transform:unset}body.home header .learn-cta-what-to-learn{color:#5b1b0b;font-weight:bold}.before-article-list{padding-bottom:0 !important}.tagline{text-align:center}.learn-cta-what-to-learn{margin-left:auto !important;margin-right:auto !important}.learn-cta-wrapper{margin-left:auto;margin-right:auto;display:flex}.learn-cta-wrapper a{width:100% !important;margin:5px 0}.learn-cta-wrapper a:hover{transform:scale(0.95)}.large-message{text-align:left !important;margin-left:0 !important;margin-right:0 !important;DISPLAY:NONE}.search-card{margin-top:-4rem}.in-post-stream{border:none;border-radius:0;margin-bottom:0;text-align:center}.in-post-stream.newsletter input{display:block !important;width:100% !important;text-align:center}.in-post-stream.newsletter input:first-child{margin-bottom:.5em !important}.in-post-stream.social .explainer{display:block !important}.in-post-stream.social .network .username{display:none}.post-header{border-bottom-left-radius:0;height:auto;background:linear-gradient(#f0967f, #fef7f6);padding-top:40px !important;padding-bottom:20px !important}.post-header h1{font-size:2em}.freebie-hero{padding:4rem 1rem !important}.freebie-explanation{padding:2rem 1rem}.newsletter-page .newsletter-header{font-size:1.6em}.learn-lang-banner{margin-left:-20px}.learn-lang-content{padding-left:0;padding-right:0}.learn-lang-content .article-list{padding-left:2em;padding-right:2em;padding-top:1.1em;box-sizing:border-box}}@media screen and (max-width: 530px){.learn-lang-banner h1{font-size:70px;line-height:70px}.freebie-hero .newsletter-form input{display:block !important;width:100% !important;text-align:center}.freebie-hero .newsletter-form input:first-child{margin-bottom:.5em !important}}@media screen and (max-width: 500px){.markdown-body blockquote p{letter-spacing:0;word-break:unset}.in-post-stream.newsletter .row,.newsletter-form .row{flex-wrap:wrap}}@media screen and (max-width: 440px){.learn-lang-banner h1{font-size:50px;line-height:50px;letter-spacing:1px}}@media screen and (max-width: 360px){.post-sidebar{padding-top:0}}body.flat *:not(.home-banner):not(.sidebar-btn):not(.post-number):not(.social-share-icon){box-shadow:none !important;border:none !important}@media print{body.post{padding-top:2rem}body.post .post-sidebar,body.post .g-header,body.post .after-post{display:none}body.post .post-header{background:transparent;color:#24292e;height:auto;padding-top:0}body.post .post-header .post-meta .post-meta-item{color:inherit;font-weight:bold}body.post .post-header .post-tags{display:none}body.post,body.post .post-header-wrapper,body.post .post-page-content,body.post .post-content,body.post .markdown-body{background:white}body.post code[class*="language-"],body.post pre[class*="language-"],body.post .markdown-body p code{white-space:pre-wrap}body.post pre.reveal{text-align:inherit}body.post pre.reveal>*{display:inline}body.post pre.reveal:after{content:unset}body.post .post-page-content,body.post .post-header-inner,body.post .post-content,body.post .markdown-body{width:100vw !important;max-width:100vw !important}body.post .post-content{margin-left:2rem;overflow:visible}body.post img.screenshot-white{box-sizing:border-box}}

/*# sourceMappingURL=bundle.css.map */