article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"“" "”" "‘" "’"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,*:after,*:before{box-sizing:border-box}html{background:#000}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100vh;overflow:hidden;color:#fff;color:var(--color-text);background-color:#000;background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.demo-1{--color-text: #fff;--color-bg: #000;--color-link: #8fe8ff;--color-link-hover: #fff;--color-info: #72af3a;--color-nav: #fff}.demo-2{--color-text: #fff;--color-bg: #000;--color-link: #9cf9db;--color-link-hover: #fff;--color-info: #f3a145;--color-nav: #fff}.demo-3{--color-text: #fff;--color-bg: #a9b1b7;--color-link: #201b18;--color-link-hover: #224d94;--color-info: #fff473;--color-nav: #fff}.demo-4{--color-text: #81838c;--color-bg: #000;--color-link: #96e23e;--color-link-hover: #fff;--color-info: #ea7836;--color-nav: #fff}.demo-5{--color-text: #fff;--color-bg: #000;--color-link: #fff;--color-link-hover: #2a3cbb;--color-info: #f7fb40;--color-nav: #fff}.js body{opacity:0;transition:opacity .3s}.js body.render{opacity:1}.js .loading:before{content:"";position:fixed;z-index:100000;top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading:after{content:"";position:fixed;z-index:100000;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:none;color:#5d93d8;color:var(--color-link);outline:none}a:hover,a:focus{color:#423c2b;color:var(--color-link-hover);outline:none}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.message{background:var(--color-text);color:var(--color-bg);text-align:center;padding:1em;display:none;position:relative;z-index:100}.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}main{position:relative;width:100%}.content{position:relative;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0 auto}.content--fixed{position:fixed;z-index:10000;top:0;left:0;display:grid;align-content:space-between;width:100%;max-width:none;height:100vh;padding:1.5em;pointer-events:none;grid-template-columns:50% 50%;grid-template-rows:auto auto 4em;grid-template-areas:"header ..." "... ..." "github demos"}.content--fixed a{pointer-events:auto}.codrops-header{position:relative;z-index:100;display:flex;flex-direction:row;align-items:flex-start;align-items:center;align-self:start;grid-area:header;justify-self:start}.codrops-header__title{font-size:1em;font-weight:700;margin:0;padding:.75em 0}.info{margin:0 0 0 1.25em;font-style:italic;color:var(--color-info);font-weight:700}.github{display:block;align-self:end;grid-area:github;justify-self:start}.demos{position:relative;display:block;align-self:end;text-align:center;grid-area:demos}.demo{margin:0 0 0 .15em}.demo:hover,.demo:focus{opacity:.5}.demo span{white-space:nowrap;text-transform:lowercase;pointer-events:none}.demo span:before{content:"#"}a.demo--current{pointer-events:none}.codrops-links{position:relative;display:flex;justify-content:center;margin:0 1em 0 0;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:.15em;padding:.25em}.scene{position:fixed;top:0;left:0;width:100%;height:100vh;pointer-events:none;z-index:1}@media screen and (min-width: 55em){.demos{display:flex;justify-self:end}.demo{display:block;width:17px;height:17px;margin:0 4px;border-radius:50%;background:var(--color-link)}a.demo--current{background:var(--color-link-hover)}.demo span{position:absolute;line-height:1;right:100%;display:none;margin:0 1em 0 0}.demo--current span{display:block}}@media screen and (max-width: 55em){.message{display:block}.content--fixed{position:relative;z-index:1000;display:block;padding:.85em}.codrops-header{flex-direction:column;align-items:center}.codrops-header__title{font-weight:700;padding-bottom:.25em;text-align:center}.github{display:block;margin:1em auto}.codrops-links{margin:0}}canvas{display:block;position:absolute;left:0;top:0}.scene-nav{font-size:1.15em;position:fixed;top:50%;transform:translateY(-50%);z-index:10;background:none;border:0;right:0;padding:1.5em;color:#3bb3c3}.scene-nav svg{fill:#3bb3c3}.scene-nav:focus{outline:none}.scene-nav--prev{left:0;right:auto}.slide-wrapper{display:none}.icon--arrow-nav-next{transform:rotate(-180deg)}.icp-info{position:fixed;bottom:10px;right:15px;z-index:100;font-size:12px;opacity:.8;transition:opacity .3s ease}.icp-info:hover{opacity:1}.icp-info a{color:#3bb3c3;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.icp-info a:hover{text-decoration:underline}