*,:after,:before{box-sizing:border-box}html{background:#fff}body{min-height:100vh;color:#57585c;color:var(--color-text);background-color:#fff;background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.demo-1{--color-text:#d8d1d1;--color-background:#fff;--color-link:#72af3a;--color-link-hover:#d8d1d1;--color-info:#72af3a}.demo-2{--color-text:#333;--color-background:#bee897;--color-link:#72af3a;--color-link-hover:#485a36;--color-info:#fff}.demo-3{--color-text:#fff;--color-background:#193ccf;--color-link:#fff;--color-link-hover:#000;--color-info:#fff473}.demo-4{--color-text:#81838c;--color-background:#272927;--color-link:#96e23e;--color-link-hover:#fff;--color-info:#ea7836}.demo-5{--color-text:#fff;--color-background:#2b54ee;--color-link:#fff;--color-link-hover:#f7fb40;--color-info:#f7fb40}.js body{opacity:0;transition:opacity .3s}.js body.render{opacity:1}a{text-decoration:none;color:#fff;color:var(--color-link);outline:none}a:focus,a:hover{color:#f5f5f5;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-background);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}.icon--keyboard{display:none}main{width:100%}.content,main{position:relative}.content{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-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{grid-area:github;justify-self:start}.demos,.github{display:block;align-self:end}.demos{position:relative;text-align:center;grid-area:demos}.demo{margin:0 .15em}.demo:focus,.demo:hover{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){.icon--keyboard{position:absolute;right:.55em;bottom:-30%;display:block;width:54px;height:46px;fill:var(--color-link)}.demos{display:flex;padding-right:80px;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){body,html{overflow-x:hidden;width:100vw;height:100%}.message{display:block}.content{height:auto;min-height:0;padding-bottom:10em;flex-direction:column}.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}}