.demo-adsila{--color-text:#57585c;--color-background:#fff;--color-link:#5d93d8;--color-link-hover:#423c2b}.demo-tsula{--color-text:#fafae5;--color-background:#222328;--color-link:#4f515a;--color-link-hover:#fafae5}.demo-inola{--color-text:#8c8c8c;--color-background:#1f1e1e;--color-link:#e5d338;--color-link-hover:#8c8c8c}.demo-ama{--color-text:#9a9da7;--color-background:#fff;--color-link:#32343c;--color-link-hover:#9a9da7}.demo-yona{--color-text:#000;--color-background:#4520f3;--color-link:#fff;--color-link-hover:#000}.demo-salal{--color-text:#b5b5b5;--color-background:#222325;--color-link:#515152;--color-link-hover:#fff}.demo-dustu{--color-text:#fff;--color-background:#161616;--color-link:#565656;--color-link-hover:#fff}.demo-mohe{--color-text:#171754;--color-background:#2b34f5;--color-link:#9ad6fc;--color-link-hover:#171754}.js body{opacity:0;transition:opacity .3s}.js body.render{opacity:1}a{text-decoration:none;color:#5d93d8;color:var(--color-link);outline:0}a:focus,a:hover{color:#423c2b;color:var(--color-link-hover);outline:0}.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}.icon--keyboard{display:none}.content--fixed{position:fixed;z-index:100;top:0;left:0;display:grid;align-content:space-between;width:100%;max-width:none;height:100vh;padding:1.5em;pointer-events:none;grid-template-columns:50% 50%;grid-template-rows:auto auto 4em;grid-template-areas:'header ...' '... ...' 'github demos'}.codrops-header,.codrops-links,.demos,.menu,.menu__item{position:relative}.content--fixed a{pointer-events:auto}.codrops-header{z-index:100;display:flex;flex-direction:row;align-items:flex-start;align-items:center;align-self:start;grid-area:header;justify-self:start}.demos,.github{display:block;align-self:end}.codrops-header__title{font-size:1em;font-weight:400;margin:0;padding:.75em 0}.info{margin:0 0 0 1.25em;color:var(--color-link-hover)}.github{grid-area:github;justify-self:start}.demos{text-align:center;grid-area:demos}.demo{margin:0 .15em}.demo span{white-space:nowrap;letter-spacing:.1em;text-transform:lowercase;pointer-events:none}.demo span::before{content:'#'}a.demo--current{pointer-events:none;border:1px solid}.codrops-links{display:flex;justify-content:center;margin:0 1em 0 0;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:.15em;padding:.25em}.menu{z-index:10}.menu__item{line-height:1;display:inline-block;margin:1em 0;outline:0}.menu__item-label,.menu__item-name{position:relative;display:inline-block}.menu__item-name{font-size:1.25em}.menu__item-label{margin:0 0 0 .5em}@media screen and (min-width:50em){.icon--keyboard{position:absolute;right:.55em;bottom:-30%;display:block;width:54px;height:46px;fill:var(--color-link)}.demos{display:flex;padding-right:80px;justify-self:end}.demo{display:block;width:17px;height:17px;margin:0 5px 0 0;border:2px solid;border-radius:2px}a.demo--current{background:currentColor}.demo span{position:absolute;top:-.2em;right:100%;display:none;margin:0 1em 0 0}.demo--current span{display:block}}@media screen and (max-width:50em){.content{height:auto;min-height:0;padding-bottom:10em}.content--fixed{position:relative;z-index:1000;display:block;padding:.85em}.codrops-header{flex-direction:column;align-items:center}.codrops-header__title{font-weight:700;padding-bottom:.25em;text-align:center}.github{display:block;margin:1em auto}.codrops-links{margin:0}}.menu--ama .menu__item,.menu--ama .menu__item-name{font-weight:500;font-family:Poppins,sans-serif}.menu--ama{counter-reset:itemCounter}.menu--ama .menu__item{font-size:1.25em;margin:8px 14px;color:#32343c;line-height:64px}.menu--ama .menu__item:first-child{--menu-item-color:#56ab2f}.menu--ama .menu__item:nth-child(2){--menu-item-color:#1a2980}.menu--ama .menu__item:nth-child(3){--menu-item-color:#6cccff}.menu--ama .menu__item:nth-child(4){--menu-item-color:#3dd2c1}.menu--ama .menu__item:nth-child(5){--menu-item-color:#BDB76B}.menu--ama .menu__item:nth-child(6){--menu-item-color:#f7bd1f}.menu--ama .menu__item:nth-child(7){--menu-item-color:#6537f7}.menu--ama .menu__item:focus::before,.menu--ama .menu__item:hover::before{color:var(--menu-item-color)}.menu--ama .menu__item-name{font-size:13px;display:flex;flex-wrap:wrap;white-space:pre;text-transform:uppercase;letter-spacing:.1rem}.menu--ama .menu__item-name::after{background:var(--menu-item-color);transform:scale3d(0,1,1);transform-origin:0 50%;transition:transform .5s}.menu--ama .menu__item:focus .menu__item-name::after,.menu--ama .menu__item:hover .menu__item-name::after{transform:scale3d(1,1,1)}.menu--ama .menu__item-name span{display:inline-block}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation :portrait){.menu--ama .menu__item{margin:8px}}