code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px #0000004d;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:0 0;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;line-height:1.5}pre[class*=language-]{border-radius:.3em;margin:.5em 0;padding:1em;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.3em;padding:.1em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090}.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: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{color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em;margin:0}.container{max-width:750px;margin:0 auto}.hidden{visibility:hidden;display:none}h1{max-width:600px;margin-left:auto;margin-right:auto;font-size:38px;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{color:var(--gray-800);font-size:20px;font-weight:400}h5{color:var(--gray-700);font-size:14px;font-weight:400}@media screen and (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-]{letter-spacing:0;padding:30px;font-size:18px;position:relative}pre[class*=language-],code[class*=language-],pre.output{white-space:pre-wrap;word-break:keep-all}pre.language-html,pre.language-css{margin-bottom:15px}pre.language-html:before,pre.language-css:before,pre.language-javascript:before{content:"";color:var(--gray-700);font-size:12px;font-family:var(--base-font);display:inline-block;position:absolute;top:6px;right:8px}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{border-bottom:1px solid var(--gray-200);background-color:#fff;padding:10px}.nav-spacer{padding:10px}nav a{color:inherit;text-decoration:none}.nav-container{justify-content:space-between;align-items:center;display:flex}nav .link{color:var(--gray-800);padding:0 8px}#logo{align-items:center;font-weight:900;display:flex}#logo svg{padding-right:11px}.card{border:1px solid var(--gray-200);background-color:#fff;border-radius:6px;margin:40px 0;padding:40px;transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px #0000000d}.card a{color:inherit;text-decoration:none}.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 (width<=712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{text-align:center;padding:130px 0}.banner .autocomplete{margin-top:57px}footer{color:var(--gray-700);padding:23px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);justify-content:space-between;align-items:center;padding-top:22px;font-size:14px;display:flex}.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{border:0;width:100%}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input,.algolia-autocomplete .aa-hint{box-sizing:border-box;border:1px solid #0000;border-radius:3px;outline:none;width:100%;padding:18px 0 18px 48px;font-size:18px}.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,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);background-position:21px;background-repeat:no-repeat;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px #0000000d;background-color:#ffffffe8!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-input,.autocomplete-header .algolia-autocomplete .aa-hint{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{text-align:left;background-color:#fff;border-radius:3px;width:100%;max-height:300px;margin-top:6px;overflow-y:scroll;box-shadow:0 0 4px #0000001a}.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-style:normal;font-weight:700}@media screen and (width>=560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-position:right 15px top 0;background-repeat:no-repeat;background-size:50px 50px}}@media screen and (width<=712px){.algolia-autocomplete .aa-input,.algolia-autocomplete .aa-hint{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{color:var(--gray-600);background-color:#fff;justify-content:space-between;font-size:14px;display:flex;background-image:none!important}.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{align-items:center;margin-bottom:35px;display:flex}.usecase-subtitle .category{background-color:var(--gray-200);color:var(--gray-800);border-radius:3px;margin-right:10px;padding:4px 6px;font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);text-align:right;padding-top:8px;font-size:14px}.mdn-container a{text-decoration:underline}.output{background-color:var(--gray-300);color:var(--gray-800);border-radius:.3em;margin-bottom:0;padding:15px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:14px;line-height:20px}.output a{text-decoration:underline}.output:before{content:"Output";color:var(--gray-600);font-size:12px;font-family:var(--base-font);float:right;font-weight:700;display:block;position:relative;top:-10px;right:-7px}.learn-tech-container{justify-content:center;margin-top:40px;display:flex}.learn-btn{font-size:16px;font-weight:800;font-family:var(--font-family);cursor:pointer;border:0;border-radius:3px;padding:12px 40px;transition:opacity .2s ease-out,transform .2s ease-out;display:inline-block}.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{color:var(--gray-900);margin-bottom:0;font-size:22px}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;width:100%;height:36px;margin:0;padding:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.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%;margin:0;padding:0 2px;line-height:13px;list-style:none}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li a{box-sizing:border-box;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-align:center;text-transform:uppercase;background-color:#ccc;border-radius:2px;width:100%;height:100%;padding:11px 7px 12px 27px;font-weight:700;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;display:block;position:relative}.rrssb-buttons li a .rrssb-icon{width:10%;padding-top:9px;display:block;position:absolute;top:0;left:10px}.rrssb-buttons li a .rrssb-icon svg{width:17px;height: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{border-radius:3px;padding:11px 7px 12px 27px}.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);font-size:18px;line-height:34px}.about-text a{text-decoration:underline}.category-pill{background-color:#fff;border-radius:5px;padding:3px 5px;display:inline-block}