.loading::before,.loading::after{content:"";position:fixed;z-index:1000}.loading::before{top:0;left:0;width:100%;height:100%;background:#2c2d31}.loading::after{top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:8px solid #383a41;border-bottom-color:#565963;border-radius:50%;animation:animLoader .8s linear infinite forwards}.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}.content--related{display:flex;flex-wrap:wrap;justify-content:center;width:100%;padding:8em 1em 3em;text-align:center;order:5}.media-related{width:100%}.media-item{padding:1em}.media-item__img{max-width:100%;opacity:.7;transition:opacity .3s}.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1}.media-item__title{font-size:1em;max-width:220px;padding:.5em;margin:0 auto}.codrops-header__title{font-size:1em;font-weight:400;flex:1;margin:0 7em 0 0;text-align:center;text-transform:lowercase}.codrops-header__title::before,.codrops-header__title::after{font-size:22px;font-weight:700;display:inline-block;padding:0 .25em;color:#42454c}.codrops-header__title::after{content:"⌉";vertical-align:sub}.codrops-header__title::before{content:"⌊"}.github-corner{position:absolute;top:0;right:0}.github-corner__svg{fill:#82888a;color:#2c2d31;position:absolute;top:0;border:0;right:0}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.codrops-links{position:relative;display:flex;justify-content:space-between;align-items:center;height:2.75em;margin:0 0 0 2.25em;text-align:center;white-space:nowrap;background:#1f2125}.codrops-links::after{content:"";position:absolute;top:-10%;left:calc(50% - 1px);width:2px;height:120%;background:#2c2d31;transform:rotate3d(0,0,1,22.5deg)}.codrops-icon{display:inline-block;padding:0 .65em}.control--grids{margin:0 0 2.5em;text-align:right}.control__title{font-size:.85em;display:block;width:100%;margin:0 0 1em;color:#e6629a}.control__item{position:relative;display:block;margin:0 0 .5em}.control__radio{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0}.control__label{white-space:nowrap}.control__radio:checked+.control__label{color:#fff;background:#673ab7}.control__radio:not(:checked):hover+.control__label,.control__btn:hover{color:white}.control__btn{display:block;width:100%;margin:0 0 .5em;padding:0;text-align:left;color:inherit;border:none;background:0 0}.control__btn:focus{outline:none}.grid--hidden{position:fixed!important;z-index:1;top:0;left:0;width:100%;pointer-events:none;opacity:0}.grid--loading::before,.grid--loading::after{content:"";z-index:1000}.grid--loading::before{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#2c2d31}.grid--loading::after{position:absolute;top:0;left:50%;width:40px;height:40px;margin:0 0 0 -20px;border:8px solid #383a41;border-bottom-color:#565963;border-radius:50%;animation:animLoader .8s linear forwards infinite}.grid__deco{position:absolute;top:0;left:0;pointer-events:none}.grid__deco path{fill:none;stroke:#fff;stroke-width:2px}.grid__reveal{position:absolute;z-index:50;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;background-color:#2c2d31}@media screen and (max-width:50em){.codrops-links{margin:0}.codrops-header__title{width:100%;text-align:left;flex:none;margin:1em 0}.control{margin:0 0 1em;text-align:left}.control__item,.control__btn{display:inline-block}.control__btn{width:auto}}