a,abbr,acronym,address,applet,b,big,blockquote,body,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,reset.css html,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#37373e;color:#edecf2;font-family:Overpass Mono,monospace}a{color:#ff3d53;outline:none;text-decoration:none;transition:color .2s}a:focus,a:hover{color:#fff}.hidden{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.icon{fill:currentColor;display:block;height:1.5em;margin:0 auto;width:1.5em}.message-mobile{background:#ff3d53;display:none;font-size:.85em;padding:.5em;text-align:center;width:100%}.codrops-header{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;padding:1.5em 1.5em 4em;text-align:left;width:100%}.codrops-header__title{font-size:1.15em;margin:0;padding:0 .5em}.codrops-header__tagline{color:#b0adad;font-size:.85em;margin:0;width:100%}.codrops-header__tagline:before{content:"> "}.github{font-size:.85em;font-weight:700;margin:0 0 0 auto}.codrops-links{display:flex;justify-content:center;position:relative;text-align:center;white-space:nowrap}.codrops-links:after{background:#b0adad;content:"";height:60%;left:50%;position:absolute;top:20%;transform:rotate(22.5deg);width:1px}.codrops-icon{display:inline-block;margin:.25em 0 .25em .25em;padding:.35em 0 .35em .35em}.codrops-icon:first-child{margin:.25em .25em .25em 0;padding:.35em .35em .35em 0}.content{align-items:center;display:flex;flex-wrap:wrap;padding:0 0 1em;position:relative}.content:not(:first-child){padding:4em 0}.content.content--padded{padding:4em 0 8em}.content__title{color:#b0adad;font-size:.85em;left:2em;margin:.75em 0;position:absolute;top:18%;width:5em}.grid{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;padding:0 7em;perspective:800px;perspective-origin:50% 100%;position:relative;width:100%}.grid__item{cursor:default;display:block;flex:none;margin:1.5em 2vw;position:relative;transform-style:preserve-3d;width:-moz-fit-content;width:fit-content}.grid__item:focus,.grid__item:hover{outline:none}.grid__item--c1,.grid__item--c1:focus,.grid__item--c1:hover{color:#52649e}.grid__item--c2,.grid__item--c2:focus,.grid__item--c2:hover{color:#ee7074}.grid__item--c3,.grid__item--c3:focus,.grid__item--c3:hover{color:#f7f295}.stack{position:relative;transform-style:preserve-3d;width:100%}.stack__deco{background-color:currentColor;border-radius:20px;height:100%;left:0;position:absolute;top:0;transform-origin:50% 100%;width:100%}.stack__deco:first-child{opacity:.2}.stack__deco:nth-child(2){opacity:.4}.stack__deco:nth-child(3){opacity:.6}.stack__deco:nth-child(4){opacity:.8}.stack__figure{align-items:center;cursor:pointer;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;transform-origin:50% 100%;width:100%}.stack__figure img{border-radius:20px}.stack__figure img,.stack__img{display:block;flex:none;position:relative}.grid__item-caption{display:flex;flex-wrap:wrap;position:relative;transform-style:preserve-3d;width:100%}.grid__item-title{color:#fff;font-size:1.15em;margin:1em 0;text-align:left;width:100%}.column{opacity:0;padding:0 .5em;width:50%}.column--left{text-align:right}.column--right{text-align:left}.column__text{color:#fff;display:block;font-size:.85em}.column--left .column__text{font-weight:700}.column--right .column__text{color:#b0adad}.grid--effect-vega .column{opacity:1}.grid--effect-castor .stack__deco,.grid--effect-castor .stack__figure{transform-origin:50% 50%}.grid--effect-castor .column{opacity:1}.grid--effect-hamal{perspective:none}.grid--effect-hamal .column{opacity:1}.grid--effect-polaris{perspective-origin:100% -100%}.grid--effect-polaris .column{opacity:1}.grid--effect-alphard{perspective:none}.grid--effect-alphard .column{opacity:1}.grid--effect-alphard .stack__deco,.grid--effect-alphard .stack__figure{transform-origin:50% 150%}.grid--effect-altair{perspective-origin:50% -50%}.grid--effect-altair .column{opacity:1}.grid--effect-altair .stack__deco,.grid--effect-altair .stack__figure{transform-origin:50% 100%}.grid--effect-rigel{perspective-origin:50% 100%}.grid--effect-rigel .column{opacity:1}.grid--effect-canopus{perspective-origin:50% 0}.grid--effect-canopus .column{opacity:1}.grid--effect-canopus .stack__deco,.grid--effect-canopus .stack__figure{transform-origin:50% 100%}.grid--effect-pollux{perspective:1000px;perspective-origin:50% -70%}.grid--effect-pollux .column{opacity:1}.grid--effect-pollux .stack__deco,.grid--effect-pollux .stack__figure{transform-origin:50% 50%}.grid--effect-pollux .grid__item-caption>.grid__item-title{transform-origin:50% -200%}.grid--effect-deneb{perspective:none}.grid--effect-deneb .stack__deco,.grid--effect-deneb .stack__figure{transform-origin:50% 50%}.grid--effect-deneb .grid__item-caption>.column{transform-origin:50% -200%}.content.content--related{background:#5d5d66;font-weight:700;justify-content:center;min-height:0;padding-bottom:10em;text-align:center}.content--related a{color:#b0adad}.content--related a:focus,.content--related a:hover{color:#fff}.content--related p:first-child{padding:6em 0 2em}.content--related p{color:#37373e;width:100%}.media-item{display:inline-block;font-size:.85em;padding:1em 2vw;transition:color .3s;vertical-align:top}.media-item__img{max-width:100%;opacity:.6;transition:opacity .3s}.media-item:focus .media-item__img,.media-item:hover .media-item__img{opacity:1}.media-item__title{font-size:1em;margin:0;padding:.5em}@media screen and (max-width:42em){.codrops-header{display:block;text-align:center}.github{margin:0;padding:.5em 0;width:100%}.message-mobile{display:block}}