@font-face{font-family:'nexa_boldregular';font-weight:bold;font-style:normal;src:url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot');src:url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2') format('woff2'),url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff'),url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf') format('truetype'),url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg');font-display:swap;}*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box}body{--text-color:black;--background-color:#fff;--background-color-2:#ea0f0f;--background-color-3:#ea0f0f;--link-color:black;--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:0}a:hover,a:focus{color:black;outline:0;cursor:pointer;text-decoration:underline}.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:298px 150px 270px 150px;grid-template-rows:306px 81px 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:-0.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;align-self:end;justify-self:start;z-index:10;padding:0 1em .15em;font-size:20px}.content__info{grid-column:1 / 2;font-size:30px}.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:1.5em;margin:0;padding:.5em}.content--layout-2{grid-template-areas:"... title title title" "... desc desc desc" "link link ... ..."}.content--layout-2 .content__img{grid-column:3 / 5;grid-row:1 / 3}.content--layout-2 .content__desc{text-align:center}.content--layout-2 .content__link{justify-self:end}.content--layout-2 .content__author{justify-self:end;align-self:start}.content--layout-2 .content__author .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-4{grid-template-areas:"link title ... ..." "link author desc desc" "... author desc desc"}.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}@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(0.8,0.8,1)}}@media screen and (max-width:36em){.content--layout{transform:scale3d(0.7,0.7,1)}}@media screen and (max-width:32em){.content--layout{transform:scale3d(0.6,0.6,1)}.content__author,.content__desc,.content__link{font-size:1.35em}}@media screen and (max-width:28em){.content--layout{transform:scale3d(0.5,0.5,1)}}#bx_form_iframe_36{height:770px !important}@media screen and (max-width:1200px){.content__author,.content__desc,.content__link{font-size:1.8em}.content--layout .content__title{font-size:6em}}@media(max-width:870px){.content__author,.content__desc,.content__link{font-size:1.5em}.content--layout{transform:scale3d(0.8,0.8,1)}.content--layout-1{grid-template-areas:" ... title title title " "link desc desc desc" "link  desc desc desc"}.content--layout-1 .content__desc{text-align:right}.content--layout-3{grid-template-areas:" title title title title  " "link link desc desc" "link  link desc desc"}.content--layout-4{grid-template-areas:" ... title title title " "link link desc  desc" "link  link ... ... "}}@media(max-width:650px){.content__author,.content__desc,.content__link{font-size:1.8em}.content--layout{transform:scale3d(0.7,0.7,1)}.content--layout-1{grid-template-areas:" ... title title title " "link desc desc desc" "link  desc desc desc"}.content--layout-1 .content__desc{text-align:right}}@media(max-width:580px){.content__author,.content__desc,.content__link{font-size:1.8em}.content--layout{transform:scale3d(0.60,0.60,1)}}@media(max-width:480px){.content__author,.content__desc,.content__link{font-size:1.8em}.content--layout{transform:scale3d(0.45,0.45,1)}.content--layout-1{grid-template-areas:" ... title title title " "link desc desc desc" "link  desc desc desc"}.content--layout-1 .content__desc{text-align:right}}@media(max-width:370px){.content__author,.content__desc,.content__link{font-size:1.8em}.content--layout{transform:scale3d(0.4,0.4,1);grid-template-rows:280px 300px 250px}.content--layout-1{grid-template-areas:" ... title title title " "link desc desc desc" "link  desc desc desc"}.content--layout-1 .content__desc{text-align:right}}