img,legend{border:0}.content__close:focus,a,a:active,a:hover{outline:0}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,figure{margin: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:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.js .loading::after,.js .loading::before{position:fixed;z-index:100000;content:''}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}.content__title,.menu__item{text-transform:lowercase;font-family:Montserrat,sans-serif}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}.demo-1{--color-text:#ededed;--color-bg:#000;--color-link:#fff;--color-link-hover:#5d5050;--color-info:#5d5050;--color-menu:#fff;--color-menu-hover:#fff;--color-title:#fff;--color-subtitle:#ededed;--color-deco:#161616}.js body{opacity:0;transition:opacity .3s}.js body.render{opacity:1}.js .loading::before{top:0;left:0;width:100%;height:100%}.js .loading::after{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)}}.content__close,.js .content__inner{opacity:0;transition:opacity .3s}a{text-decoration:none;color:var(--color-link)}a:focus,a:hover{color:var(--color-link-hover);outline:0}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.content,main{position:relative}.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}.content--fixed,.content--reveal{height:100vh;pointer-events:none}main{width:100%}.content{display:flex;justify-content:center;align-items:center;margin:0 auto;min-height:100vh}.content--fixed,.content__inner{left:0;top:0;width:100%;display:grid}.content--reveal{position:absolute;z-index:1001;top:0;left:0;width:100%}.content--fixed{position:fixed;z-index:10000;align-content:space-between;max-width:none;min-height:0;padding:1.5em;grid-template-columns:70% 30%;grid-template-rows:auto auto 4em;grid-template-areas:'header ...' '... ...' 'github info'}.content--fixed a{pointer-events:auto}.content__inner{position:absolute;height:50%;align-items:center;justify-content:center;justify-items:center;align-content:end}.content__title{font-size:8vw;margin:0;color:var(--color-title);letter-spacing:-.05em;text-indent:-.05em;font-weight:900}.content__subtitle{max-width:300px;text-align:center;font-size:1.25em;font-weight:400;margin:0;color:var(--color-subtitle)}.content__close{position:absolute;top:55%;left:50%;background:0 0;color:var(--color-link);border:1px solid;padding:0;display:block;margin:0 0 0 -2em;width:4em;height:4em;font-size:1.25em;border-radius:50%;cursor:pointer}.content__close:hover{background:var(--color-bg);border-color:var(--color-bg)}.deco-title{font-size:50vw;margin:0;pointer-events:none;position:absolute;color:var(--color-deco)}.scene{position:fixed;top:0;left:0;width:100%;height:100vh;//pointer-events:none;z-index:1}.menu,.menu__item{display:flex;position:relative}.scene .blob-1 path{fill:url(#gradient-1)}.scene .blob-2 path{fill:url(#gradient-2)}.scene .blob-3 path{fill:url(#gradient-3)}.scene .blob-4 path{fill:url(#gradient-4)}.scene .blob-5 path{fill:url(#gradient-5)}.scene .blob-6 path{fill:url(#gradient-6)}.scene path:first-of-type{fill-opacity:.1}.scene path:nth-of-type(2){fill-opacity:.2}.scene path:nth-of-type(3){fill-opacity:.3}.scene path:nth-of-type(4){fill-opacity:.4}.scene path:nth-of-type(5){fill-opacity:.5}.scene path:nth-of-type(6){fill-opacity:.6}.menu{z-index:1000;flex-direction:column;margin:0 0 0 25vw;font-size:4vw;align-items:flex-start}.menu__item{color:var(--color-menu);line-height:1.25;letter-spacing:-.025em;text-indent:-.025em;font-weight:900;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap}.menu__item:focus,.menu__item:hover{color:var(--color-menu-hover)}.menu__item::before{content:'';width:60%;height:25px;background:linear-gradient(45deg,#f19872,#e86c9a);position:absolute;left:0;bottom:0;transform-origin:0 0;transform:scale3d(0,1,1)}.menu__item:nth-child(2)::before{background:linear-gradient(45deg,#0947db,#07d89d)}.menu__item:nth-child(3)::before{background:linear-gradient(45deg,#ee2d29,#f8ae2c)}.menu__item:nth-child(4)::before{background:linear-gradient(45deg,#3a3d98,#6f22b9)}.menu__item:nth-child(5)::before{background:linear-gradient(45deg,#9d316e,#de2d3e)}.menu__item:nth-child(6)::before{background:linear-gradient(45deg,#00ac53,#23c3e0)}.menu__item--showDeco::before{transition:transform .8s cubic-bezier(.2,1,.3,1);transform:scale3d(1,1,1)}.menu__item--showDeco:hover::before{transition:transform .8s cubic-bezier(.2,1,.3,1);transform:scale3d(1.2,1,1)}.menu__item span{display:block;position:relative}.codrops-header{position:relative;display:flex;flex-direction:row;align-items:flex-start;align-items:center;align-self:start;grid-area:header;justify-self:start}.codrops-header__title{margin:0;padding:0;font-weight:700;font-size:1em}.info{margin:0;color:var(--color-info);grid-area:info;align-self:end;justify-self:end}@media screen and (max-width:55em){.codrops-links,.info{margin:0}.message{display:block}.content{flex-direction:column;height:auto;min-height:0;padding-bottom:10em}.content--fixed{position:relative;z-index:10000;display:block;padding:.85em .5em 2em}.codrops-header{flex-direction:column;align-items:center}.codrops-header__title{padding-bottom:.25em;font-size:1.5em;text-align:center}.info{text-align:center}.github{display:none}.menu{font-size:2.75em;margin:0 auto;align-items:center}.content__inner{margin-top:12em}.content__close{top:15em}}