*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body{overflow-x:hidden;color:#463f51;background:#222127;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,Helvetica Neue,Helvetica,Segoe UI,Arial,sans-serif}a{text-decoration:none;color:#694f9b;transition:color .2s;outline:none}a:focus,a:hover{color:#fff}.hidden{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.icon{height:1.5em;fill:currentColor;margin:0 auto;width:1.5em;display:block}.js .loading:before{height:100%;color:#fff;content:"";position:fixed;text-align:center;top:0;background:rgba(206,209,223,.9);left:0;width:100%;display:-webkit-flex;display:-ms-flexbox;display:flex;z-index:100}.js .loading:after{-webkit-animation:loaderAnim .8s ease-out infinite alternate forwards;animation:loaderAnim .8s ease-out infinite alternate forwards;height:70px;pointer-events:none;border:4px solid #fff;-webkit-transition:opacity .3s;transition:opacity .3s;content:"";position:fixed;top:50%;margin:-35px 0 0 -27px;left:50%;width:54px;z-index:10000}@-webkit-keyframes loaderAnim{to{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);opacity:.3}}@keyframes loaderAnim{to{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);opacity:.3}}.codrops-header{padding:3em 1em 4em;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-self:flex-start;text-align:center;-webkit-align-items:center;align-items:center;width:100%;-ms-flex-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex}.codrops-header__title{padding:0;font-size:2em;color:#7d5fb5;margin:0}.codrops-header__tagline{padding:0 1em;margin:0}.codrops-demos{margin:1em 0 0}.codrops-demos a{padding:.2em 0;transition:border-color .2s,color .2s;border-bottom:1px solid;display:inline-block}.codrops-demos a:focus,.codrops-demos a:hover{border-color:transparent}.codrops-links{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;text-align:center;white-space:nowrap;display:-webkit-flex;display:-ms-flexbox;display:flex}.codrops-links:after{height:70%;-webkit-transform:rotate(22.5deg);transform:rotate(22.5deg);content:"";position:absolute;opacity:.7;top:15%;background:currentColor;left:50%;width:1px}.codrops-icon{padding:.5em;margin:.5em;display:inline-block}.github-icon{fill:#7d5fb5;border:0;right:0;color:#222127;position:absolute;top:0}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out;transform-origin:130px 106px}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}.content{height:800px;min-height:100vh;padding:0 0 4em;justify-content:center;flex-wrap:wrap;position:relative;align-items:center;display:flex}.content:not(:first-child){padding:4em 0}.content--c2{background:#e5f8a3}.content--c3{background:#2e27ad}.content--c4{background:#ffb59c}.content--c5{background:#e0f0f9}.content--c6{background:#232138}.content--c7{background:#99e4a2}.content--related{height:auto;min-height:0;font-weight:700;text-align:center;background:#f1ebf0;padding-bottom:10em!important}.content--related>p{width:100%}.media-item{padding:1em;-webkit-transition:color .3s;transition:color .3s;vertical-align:top;display:inline-block}.media-item__img{-webkit-transition:opacity .3s;transition:opacity .3s;max-width:100%;opacity:.3}.media-item:focus .media-item__img,.media-item:hover .media-item__img{opacity:1}.media-item__title{padding:.5em;font-size:1em;margin:0}@media screen and (max-width:55.625em){.content{height:auto}}