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:"\201C" "\201D" "\2018" "\2019"}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 silver;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}@font-face{font-family:nexa_boldregular;font-weight:700;font-style:normal;src:url(/1ae32e756954b1fac8bf46332764417e11bc35cb/4d641/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.eot);src:url(/1ae32e756954b1fac8bf46332764417e11bc35cb/4d641/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.eot#iefix) format('embedded-opentype'),url(/1fb1eff0c114a425b1ebf70183a63fc32324acb8/d0b5d/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.woff2) format('woff2'),url(/a310eb93f51152662c8942fee2d43d559f77776e/ff5b8/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.woff) format('woff'),url(/fdb6ee2b7f9c2e33cf94c3ce1b431eae3c38dab8/1cf9c/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.ttf) format('truetype'),url(/e091514d73d099a99a16d0dd019513eb09eba634/14480/fonts/nexa_boldfree_macroman/nexa_free_bold-webfont.svg#nexa_boldregular) format('svg')}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}body{--text-color:#fff;--background-color:#363dc2;--background-color-2:#282faf;--background-color-3:#202692;--link-color:#03b9f1;--link-hover-color:rgb(34, 192, 240);font-family:'Roboto Mono',monospace;font-weight:500;color:#fff;color:var(--text-color);background-color:#363dc2;background-color:var(--background-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.js .loading::before{content:'';position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background:var(--background-color)}.js .loading::after{content:'';position:fixed;z-index:10000;top:calc(50% - 30px);left:calc(50% - 30px);width:60px;height:60px;border-radius:50%;border:10px solid var(--background-color-2);border-left-color:var(--text-color);animation:loaderAnim .8s linear infinite forwards}@keyframes loaderAnim{to{transform:rotate(360deg)}}main{position:relative;width:100%;overflow:hidden}a{text-decoration:none;color:var(--link-color);outline:0}a:focus,a:hover{color:var(--link-hover-color);outline:0}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.icon{display:block;width:2.5em;height:2.5em;margin:0 auto;fill:currentColor}.decoshape{top:0;left:0;position:absolute;width:100%;height:100%;fill:var(--background-color-3)}.morph-wrap{position:fixed;top:0;left:0;bottom:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none}.morph{position:relative;height:100%;fill:var(--background-color-2);flex:none}.content-wrap{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;min-height:600px;pointer-events:none}.content{position:relative;display:grid}.content--fixed{position:fixed;top:0;left:0;width:100%;height:100vh;min-height:600px;z-index:100;pointer-events:none;padding:1.5em;grid-template-columns:50% 50%;grid-template-rows:auto auto 4em;grid-template-areas:"header ..." "... decotitle" "demos decotitle"}.content--fixed a{pointer-events:auto}.content--layout{pointer-events:auto;justify-content:center;align-content:center;grid-template-columns:150px 150px 150px 200px;grid-template-rows:150px 75px 75px;grid-template-areas:"... title title title" "author ... desc desc" "author ... link link"}.content--related{text-align:center;align-content:center;justify-content:center;padding:0 2em;min-height:600px;height:100vh;font-size:.85em}.content__img{grid-column:1/3;grid-row:1/3;opacity:.6;width:300px;height:300px}.content__title{grid-area:title;font-family:nexa_boldregular,sans-serif;letter-spacing:-.025em;font-size:5em;line-height:150px;margin:0;text-transform:lowercase;z-index:10;cursor:default}.content__author{grid-area:author;margin:0;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;transform:rotate(-180deg);padding:1em;z-index:10;cursor:default}.content__desc{grid-area:desc;margin:0;z-index:10;padding:0 1em;cursor:default}.content__author,.content__desc,.content__img,.content__title{transition:transform .3s ease-out}.content__link{pointer-events:auto;grid-area:link;align-self:end;justify-self:start;z-index:10;padding:0 1em .15em}.content__info{grid-column:1/3}.content__related-item{padding:1em;transition:color .3s}.content__related-img{max-width:100%;opacity:.8;transition:opacity .3s}.content__related-item:focus .content__related-img,.content__related-item:hover .content__related-img{opacity:1}.content__related-title{font-size:1em;margin:0;padding:.5em}.content--layout-2{grid-template-areas:"... title title title" "desc desc ... author" "link link ... author"}.content--layout-2 .content__img{grid-column:3/5;grid-row:1/3}.content--layout-2 .content__desc{text-align:right}.content--layout-2 .content__link{justify-self:end}.content--layout-2 .content__author{justify-self:end;align-self:start}.content--layout-3{grid-template-rows:75px 75px 150px;grid-template-areas:"... ... desc desc" "author title title title" "author ... link link"}.content--layout-3 .content__img{grid-column:1/3;grid-row:1/3}.content--layout-3 .content__desc{align-self:end}.content--layout-4{grid-template-areas:"title title title desc" "... author ... desc" "... author ... link"}.content--layout-4 .content__img{grid-column:2/4;grid-row:1/3}.content--layout-4 .content__author{justify-self:start;align-self:end}.codrops-header{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;z-index:100;grid-area:header;align-self:start;justify-self:start}.codrops-header__title{font-size:2em;padding:.1em 0;margin:0;font-weight:800}.demos{grid-area:demos;align-self:end}.demo{display:inline-block;position:relative;font-size:.85em;margin:0 .25em .5em 0;padding:1em}.demo .decoshape{display:none}.demo--current{color:var(--link-hover-color);border-color:currentColor}.demo--current .decoshape{display:block;z-index:-1}.deco{pointer-events:none}.deco--title{grid-area:decotitle;-webkit-writing-mode:vertical-lr;writing-mode:vertical-lr;transform:rotate(-180deg);text-align:right;align-self:end;justify-self:end}.codrops-links{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 1em 0 0;text-align:center;white-space:nowrap}.codrops-icon{position:relative;display:inline-block;padding:.5em .5em 1em}.demo-2{--background-color:#1d1b22;--background-color-2:#342560;--background-color-3:#553e9a;--text-color:#fff;--link-color:#f9ed8a;--link-hover-color:#fff}.demo-3{--background-color:#56cccf;--background-color-2:#41e0e4;--background-color-3:#1747c0;--text-color:#fff;--link-color:#fff;--link-hover-color:#17b1b5}.demo-3 .morph{fill:none;stroke-width:12px;stroke:#22bcc0}@media screen and (max-width:50em){.content--fixed{height:auto;min-height:0;display:block;z-index:1000;position:absolute}.codrops-header{align-items:center;flex-direction:column}.deco--title{display:none}.demos{text-align:center}}@media screen and (max-width:40em){.content--layout{transform:scale3d(.8,.8,1)}}@media screen and (max-width:36em){.content--layout{transform:scale3d(.7,.7,1)}}@media screen and (max-width:32em){.content--layout{transform:scale3d(.6,.6,1)}.content__author,.content__desc,.content__link{font-size:1.35em}}@media screen and (max-width:28em){.content--layout{transform:scale3d(.5,.5,1)}}.pater{font-size:.65em;position:fixed;bottom:0;right:0;width:100%;padding:1.5em;display:flex;align-items:center;flex-wrap:wrap;background:var(--background-color-3)}.pater,.pater:hover{color:#fff}.pater::after{letter-spacing:.05em;content:'Working On';text-transform:uppercase;font-size:.7em;position:absolute;top:.35em;right:.5em;opacity:.5;letter-spacing:.085em}.pater__deco{display:none}.pater__img{display:inline-block;width:100%;max-width:160px;position:relative;margin:0 1em 0 0}.pater__title{display:inline-block;font-weight:500;text-transform:uppercase;letter-spacing:.05em;text-indent:-.05em;margin:0;position:relative;margin:.75em 0 0}.pater__desc{display:none}@media screen and (min-width:50em){.pater{text-align:right;top:0;bottom:auto;width:auto;padding:3em 1.5em 0 0;display:block;font-size:.85em;background:0 0}.pater::after{top:1.5em;right:1.5em;left:auto;font-size:.85em}.pater__title{display:block;margin:.75em 0}.pater__desc{display:block;color:#fff;margin:0;position:relative;width:100%;max-width:260px;pointer-events:none;opacity:0;transform:translate3d(0,-10px,0);transition:opacity .3s,transform .3s}.pater__img{max-width:200px;width:auto;margin:0}.pater:hover .pater__desc{opacity:1;transform:translate3d(0,0,0);transition-delay:.2s}.pater__deco{display:block;position:absolute;top:0;right:0;fill:var(--background-color-3);transform:translate3d(100%,-100%,0) rotate3d(0,0,1,40deg) scale3d(1,.2,1);transition:transform .5s ease-out}.pater:hover .pater__deco{transform:translate3d(0,0,0) scale3d(1,1,1)}}