*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{--background-color:#363dc2;--background-color-2:#e5e9f8;--background-color-3:#202692;--link-color:#03b9f1;--link-hover-color:#fff;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:none}a:hover,a:focus{color:var(--link-hover-color);outline:none}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}.icon{display:block;width:1.5em;height:1.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 150px;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:.8;width:300px;height:300px}.content__title{grid-area:title;font-family:'nexa_boldregular',sans-serif;letter-spacing:-.025em;font-size:8em;line-height:160px;margin:0;text-transform:lowercase;z-index:10;cursor:default}.content__author{grid-area:author;margin:0;-webkit-writing-mode:vertical-lr;writing-mode:vertical-lr;padding:1em;text-align:right;z-index:10;cursor:default}.content__desc{grid-area:desc;margin:0;z-index:10;padding:0 1em;cursor:default}.content__img,.content__title,.content__author,.content__desc{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:hover .content__related-img,.content__related-item:focus .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:start}.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:1em;padding:.75em 0;margin:0;font-weight:500}.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;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:.75em .75em 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)}}