*,:after,:before{box-sizing:border-box}html{background:#fff}body{background-color:#fff;background-color:var(--color-background);color:#57585c;color:var(--color-text);min-height:100vh;-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{color:#fff;color:var(--color-link);outline:none;text-decoration:none}a:focus,a:hover{color:#f5f5f5;color:var(--color-link-hover);outline:none}.hidden{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.message{background:var(--color-text);color:var(--color-background);display:none;padding:1em;position:relative;text-align:center;z-index:100}.icon{display:block;fill:currentColor;height:1.5em;margin:0 auto;width:1.5em}.icon--keyboard{display:none}main{width:100%}.content,main{position:relative}.content{align-items:center;display:flex;justify-content:center;margin:0 auto;min-height:100vh}.content--fixed{align-content:space-between;display:grid;grid-template-areas:"header ..." "... ..." "github demos";grid-template-columns:50% 50%;grid-template-rows:auto auto 4em;height:100vh;left:0;max-width:none;padding:1.5em;pointer-events:none;position:fixed;top:0;width:100%;z-index:10000}.content--fixed a{pointer-events:auto}.codrops-header{align-items:flex-start;align-items:center;align-self:start;display:flex;flex-direction:row;grid-area:header;justify-self:start;position:relative;z-index:100}.codrops-header__title{font-weight:700;margin:0;padding:.75em 0}.info{color:var(--color-info);font-style:italic;font-weight:700;margin:0 0 0 1.25em}.github{grid-area:github;justify-self:start}.demos,.github{align-self:end;display:block}.demos{grid-area:demos;position:relative;text-align:center}.demo{margin:0 .15em}.demo:focus,.demo:hover{opacity:.5}.demo span{pointer-events:none;text-transform:lowercase;white-space:nowrap}.demo span:before{content:"#"}a.demo--current{pointer-events:none}.codrops-links{display:flex;justify-content:center;margin:0 1em 0 0;position:relative;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:.15em;padding:.25em}.scene{height:100vh;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:1}@media screen and (min-width:55em){.icon--keyboard{bottom:-30%;display:block;fill:var(--color-link);height:46px;position:absolute;right:.55em;width:54px}.demos{display:flex;justify-self:end;padding-right:80px}.demo{background:var(--color-link);border-radius:50%;display:block;height:17px;margin:0 4px;width:17px}a.demo--current{background:var(--color-link-hover)}.demo span{display:none;line-height:1;margin:0 1em 0 0;position:absolute;right:100%}.demo--current span{display:block}}@media screen and (max-width:55em){body,html{height:100%;overflow-x:hidden;width:100vw}.message{display:block}.content{flex-direction:column;height:auto;min-height:0;padding-bottom:10em}.content--fixed{display:block;padding:.85em;position:relative;z-index:1000}.codrops-header{align-items:center;flex-direction:column}.codrops-header__title{font-weight:700;padding-bottom:.25em;text-align:center}.github{display:block;margin:1em auto}.codrops-links{margin:0}}