body{background-color:#212127;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{position:relative}a{color:#fff;cursor:pointer}a:hover,a:visited:hover{color:#690}a:visited{color:#ccc}a:visited,a:hover{cursor:pointer}h1,h2,h3,h4,h5,h6{color:#fff}.page{overflow:hidden;padding-bottom:50px;padding-left:300px}@media (max-width: 768px){.page{padding-bottom:20px;padding-left:0;padding-top:80px}}.container{box-sizing:border-box;margin:20px auto;padding:0 50px;max-width:1000px;width:100%}@media (max-width: 768px){.container{padding:0 20px}}.logo{max-width:300px;width:100%}@media (max-width: 768px){.logo{flex-shrink:0;max-width:270px}}.demo-wrapper{background:#fff;opacity:0;transition:opacity .25s ease-in-out;transition-delay:.35s}.demo-wrapper[data-ready=true]{opacity:1}.world{height:485px;margin:0 auto;position:relative;transform-origin:top left;width:780px}.coords{left:50%;position:absolute;top:20px}.dark{filter:brightness(70%)}.darker{filter:brightness(50%)}.grass{background-color:#517211;height:450px;width:450px}.houses-front{height:139px;width:150px}.houses-side{height:180px;width:361px}.houses-top{height:361px;width:150px}.houses-roof{height:55px;width:150px}.balcony-side{height:15px;width:17px}.balcony-front{height:15px;width:5px}.big-balcony-side{height:15px;width:8px}.big-balcony-front{height:15px;width:47px}.big-balcony-bottom{background-color:#ccc;height:8px;width:46px}.floor-top{height:450px;width:230px}.floor-front{background-color:#7e7d73;height:10px;width:230px}.floor-side{height:10px;width:450px}.fence-pole-side{background-color:#fff;height:26px;width:2px}.fence-pole-top{background-color:#fff;height:2px;width:2px}.fence-side{background-color:#eee;height:83px;width:2px}.fence-front{background-color:#eee;height:2px;width:103px}.logo-front{height:30px;width:300px}.logo-top{height:300px;width:6px}.logo-top-middle,.logo-top-bottom{height:282px;width:6px}.logo-letter-front-blue{background-color:#bad0e4}.logo-letter-front-red{background-color:#c48986}.logo-letter-front-yellow{background-color:#f7dfbc}.logo-letter-full-front{height:30px;width:6px}.logo-letter-large-front{height:23.5px;width:6px}.logo-letter-half-front{height:18px;width:6px}.logo-letter-short-front{height:12px;width:6px}.logo-letter-square-front{height:6px;width:6px}.logo-letter-r-top-middle{background-color:#d4eef5;height:3px;width:6px}.res-height{height:240px;position:relative;padding-bottom:20px;padding-top:20px}.res-height:before{background-color:#fff;content:"";inset:0 50px;position:absolute}@media (max-width: 768px){.res-height:before{left:20px;right:20px}}.code-example-world{left:50%;position:relative;top:20%}@media (max-width: 768px){.code-example-world{transform-origin:0 0;transform:scale(.9)}}.floor{height:200px;width:200px}.plane{height:50px;width:50px}.code-example-wrapper{height:250px;overflow:hidden}.menu{background-color:#f5f2f0;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;padding:20px;position:fixed;width:300px;z-index:100}@media (max-width: 768px){.menu{align-items:center;flex-direction:row;height:80px;padding:0 20px;width:100vw}}.menu-links{flex-grow:1;padding:20px 0}.menu-links a{color:#212127;display:block;margin-bottom:10px;text-decoration:none}.menu-links a.active{color:#690;cursor:default;font-weight:700}@media (max-width: 768px){.menu-links{background:#f5f2f0;border-top:1px solid #333;height:calc(100vh - 80px);padding:40px;position:fixed;top:80px;left:0;transform:translate(100%);transition:transform .25s ease-in-out;width:100vw}.menu-links[data-open=true]{transform:translate(0)}}.chevron{background-color:transparent;border:none;display:none;flex-shrink:0;height:24px;margin:0;padding:0;position:relative;width:24px}.chevron div{background-color:#333;height:2px;transition:background-color .25s ease-in-out;width:24px}.chevron div:before,.chevron div:after{background-color:#333;content:"";display:block;height:2px;position:absolute;transition:transform .25s ease-in-out;width:24px}.chevron div:before{transform:translateY(-10px)}.chevron div:after{transform:translateY(10px)}.chevron[data-open=true] div{background-color:transparent}.chevron[data-open=true] div:before{transform:translate(0) rotate(45deg)}.chevron[data-open=true] div:after{transform:translate(0) rotate(-45deg)}@media (max-width: 768px){.chevron{display:block}}.github-panel{border-bottom:1px solid #CCC;box-sizing:border-box;display:flex;justify-content:space-between;margin-left:-20px;padding:15px 20px;width:calc(100% + 40px)}.github-panel a{background-color:transparent}@media (max-width: 768px){.github-panel{align-items:center;border-bottom:none;flex-grow:1;justify-content:flex-end;margin:0;padding:0 20px;width:auto}}.github-button{color:#333;display:inline-block;font-size:12px;font-weight:700;text-decoration:none}.github-button svg,.github-button span{display:inline-block;vertical-align:middle}.github-button svg{fill:#333}.github-button span{padding-left:5px}.github-button:visited{color:#333}.github-button:hover,.github-button:visited:hover{color:#690}.github-button:hover svg,.github-button:visited:hover svg{fill:#690}@media (max-width: 768px){.github-button{align-items:center;display:flex;height:32px;justify-content:center;width:32px}.github-button svg{height:20px;width:20px}.github-button span{display:none}}.h1{padding:20px 50px 0}@media (max-width: 768px){.h1{padding:20px 20px 0}}.paragraph{color:#fff;line-height:1.5}.code-no-margin{margin-top:-20px}.table{border:1px solid #333;border-collapse:collapse;color:#fff;line-height:1.5;table-layout:fixed;text-align:left}.table th{background-color:#f5f2f0;color:#212127}.table th,.table td{border-bottom:1px solid #333}.table th:not(.no-padding),.table td:not(.no-padding){padding:.75rem}.table th.no-padding pre,.table td.no-padding pre{margin:0!important}.table th.no-border,.table td.no-border{border-bottom:none}.table th.padding-big,.table td.padding-big{padding:.75rem .75rem 1.75rem}.table tbody tr:nth-child(odd){background-color:#333}.separator{border:1px solid #333;margin:30px auto;max-width:900px}.graphic svg{background-color:#fff;width:100%}
