code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(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;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}body{margin:0;color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em}.container{max-width:712px;margin:0 auto}.hidden{display:none;visibility:hidden}h1{font-size:38px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px;color:var(--gray-800)}h4,h5{font-weight:400}h5{font-size:14px;color:var(--gray-700)}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;padding:30px;letter-spacing:0;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{content:"";display:inline-block;position:absolute;top:6px;right:8px;font-size:12px;color:var(--gray-700);font-family:var(--base-font)}pre.language-html:before{content:"html";text-transform:uppercase}pre.language-css:before{content:"css";text-transform:uppercase}pre.language-javascript:before{content:"JavaScript"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{text-decoration:none;color:inherit}.nav-container{display:flex;justify-content:space-between;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:flex;align-items:center;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border-radius:6px;padding:40px;margin:40px 0;border:1px solid var(--gray-200);transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{text-decoration:none;color:inherit}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-top:0;margin-left:0;margin-right:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{padding:23px;color:var(--gray-700)}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);padding-top:22px;font-size:14px;display:flex;justify-content:space-between;align-items:center}.footer-container .links{display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{width:100%;border:0}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input::-moz-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input:-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border-radius:3px;width:100%;padding:18px 0 18px 48px;font-size:18px;box-sizing:border-box;border:1px solid transparent;outline:none}.algolia-autocomplete .aa-hint{color:#000;background-color:var(--gray-200)!important}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMTEpIiBmaWxsPSIjODk5OUEzIi8+PGRlZnM+PHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Ik0xMC40MjYgNy43MTRjMCAyLjIwNi0xLjc5NCA0LTQgNC0yLjIwNSAwLTQtMS43OTQtNC00IDAtMi4yMDUgMS43OTUtNCA0LTQgMi4yMDYgMCA0IDEuNzk1IDQgNHptNC41NzIgNy40MjlhMS4xNSAxLjE1IDAgMDAtLjMzLS44MDRsLTMuMDYzLTMuMDYyYTYuMjg0IDYuMjg0IDAgMDAtNS4xNzktOS44NDhBNi4yODQgNi4yODQgMCAwMC4xNDEgNy43MTRhNi4yODQgNi4yODQgMCAwMDkuODQ4IDUuMTc5bDMuMDYyIDMuMDUzYy4yMDYuMjE1LjUuMzQuODA0LjM0YTEuMTUgMS4xNSAwIDAwMS4xNDMtMS4xNDN6Ii8+PC9kZWZzPjwvc3ZnPg==);background-repeat:no-repeat;background-position:21px;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05);background-color:hsla(0,0%,100%,.91)!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{width:100%;text-align:left;background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;border-radius:3px;max-height:300px;overflow-y:scroll}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-weight:700;font-style:normal}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu{background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{font-size:14px;color:var(--gray-600);background-image:none!important;display:flex;justify-content:space-between;background-color:#fff}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 231px)}#usecase-question{font-size:30px}.usecase-subtitle{display:flex;align-items:center;margin-bottom:35px}.usecase-subtitle .category{margin-right:10px;background-color:var(--gray-200);padding:4px 6px;border-radius:3px;color:var(--gray-800);font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-align:right}.mdn-container a{text-decoration:underline}.output{background-color:var(--gray-300);padding:15px;border-radius:.3em;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;color:var(--gray-800);margin-bottom:0}.output a{text-decoration:underline}.output:before{content:"Output";display:block;color:var(--gray-600);font-size:12px;font-family:var(--base-font);position:relative;top:-10px;right:-7px;font-weight:700;float:right}.learn-tech-container{margin-top:40px;display:flex;justify-content:center}.learn-btn{padding:12px 40px;font-weight:800;font-size:16px;border-radius:3px;border:0;font-family:var(--font-family);cursor:pointer;display:inline-block;transition:opacity .2s ease-out,transform .2s ease-out}.learn-btn:hover{opacity:.8}.learn-btn:active{transform:translate(.5px,.5px)}.learn-javascript{background-color:#03cbaf;color:#25272a!important}.learn-react{background-color:#0097ec;color:#fff!important}.related{padding-top:20px}.related a{text-decoration:none}.related h3{font-size:22px;color:var(--gray-900);margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-delay:.2s;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:" ";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{padding:11px 7px 12px 27px;border-radius:3px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);line-height:34px;font-size:18px}.category-pill{border-radius:5px;background-color:#fff;display:inline-block;padding:3px 5px}