*,*::after,*::before{box-sizing:border-box}.js .loading::before{content:'';position:fixed;z-index:100000;top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading::after{content:'';position:fixed;z-index:100000;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim 0.7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:none;color:var(--color-link);outline:none}a:hover,a:focus{color:var(--color-link-hover);outline:none}.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}main{position:relative;margin:0 auto}.codrops-header{position:relative;z-index:100;display:flex;flex-direction:row;align-items:center;width:100%;padding:10vw;background-image:linear-gradient(110deg,#1e089b,#4702a0);font-size:75%}.codrops-header__inner{display:flex;max-width:500px;flex-direction:column;align-items:flex-start}.codrops-header__title{font-size:1.5rem;line-height:1;font-weight:600;margin:0;padding:.5rem 0;font-family:'IBM Plex Mono',monospace;font-weight:500;background:linear-gradient(90deg,#f7c53d 0%,#9302a0 50%,#6dbaa3 100%);background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent}.info{margin:1rem 0;color:var(--color-info)}.github{display:block}.codrops-links{position:relative;display:flex;justify-content:center;text-align:center;white-space:nowrap}.codrops-icon{display:inline-block;margin:.15em;padding:.25em}.grid__item{position:relative;display:grid;grid-template-columns:100%;grid-template-rows:100%;align-items:center;justify-items:center;overflow:hidden;height:100vw;width:100vw;background:var(--color-item-bg)}.grid__item-title{font-size:.85rem;color:var(--color-item-title);align-self:flex-start;margin:0}.action{position:absolute;top:0;right:0;background:none;margin:2rem;color:var(--color-action);border:0;padding:0;opacity:0;pointer-events:none}.action:focus{outline:none}.theme-1{--color-item-bg:linear-gradient(120deg,#a8edea 0%,#fed6e3 100%);--color-action:#121019;--color-button-bg:#121019;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:5px;--border-button:0}.theme-2{--color-item-bg:linear-gradient(120deg,#7f54e6,#3F51B5);--color-action:#f3f3f3;--color-button-bg:#f3f3f3;--color-button-text:#3c2e9e;--button-padding:1.8rem 4rem;--radius-button:5px;--border-button:0}.theme-3{--color-item-bg:linear-gradient(120deg,#152bc3,#5366d8);--color-action:#0e19a2;--color-button-bg:#0e19a2;--color-button-text:#fff;--button-padding:2rem 4rem;--radius-button:0;--border-button:0}.theme-4{--color-item-bg:linear-gradient(120deg,#ecef3a,#ec6b9b);--color-action:#e85577;--color-button-bg:#transparent;--color-button-text:#e85577;--button-padding:1.5rem 3rem;--radius-button:15px;--border-button:4px solid #e85577}.theme-5{--color-item-bg:linear-gradient(120deg,#baedff,#07a2da);--color-action:#003ff1;--color-button-bg:#003ff1;--color-button-text:#fff;--button-padding:1rem 2rem;--radius-button:5px;--border-button:0}.theme-6{--color-item-bg:linear-gradient(120deg,#9C27B0,#090772);--color-action:#f7d337;--color-button-bg:#f7d337;--color-button-text:#000;--button-padding:1.5rem 3rem;--radius-button:40px;--border-button:0}.theme-7{--color-item-bg:linear-gradient(-20deg,#f794a4 0%,#fdd6bd 100%);--color-action:#e2405b;--color-button-bg:#e2405b;--color-button-text:#e9e9e9;--button-padding:1.8rem 4.5rem;--radius-button:0;--border-button:0}.theme-8{--color-item-bg:linear-gradient(120deg,#84fab0,#8fd3f4);--color-action:blue;--color-button-bg:linear-gradient(to top,#22b9d2 0%,#5389ec 100%);--color-button-text:#fff;--button-padding:2rem 4rem;--radius-button:10px;--border-button:0}.theme-9{--color-item-bg:linear-gradient(120deg,#d299c2 0%,#fef9d7 100%);--color-action:#c13a3a;--color-button-bg:#c13a3a;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:10px;--border-button:0}.theme-10{--color-item-bg:linear-gradient(120deg,#fddb92 0%,#d1fdff 100%);--color-action:#b1b1b1;--color-button-bg:#b1b1b1;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:0;--border-button:0}.theme-11{--color-item-bg:linear-gradient(120deg,#fff1eb 0%,#ace0f9 100%);--color-action:#1b81ea;--color-button-bg:#fff;--color-button-text:#1b81ea;--button-padding:2rem 4.5rem;--radius-button:7px;--border-button:0}.theme-12{--color-item-bg:linear-gradient(to right,#f78ca0 0%,#f9748f 19%,#fd868c 60%,#fe9a8b 100%);--color-action:#ff4d73;--color-button-bg:#ff4d73;--color-button-text:#fff;--button-padding:1.5rem 7rem;--radius-button:40px;--border-button:0}@media screen and (min-width:50em){.codrops-header{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;min-height:100vh}.codrops-header__title{font-size:3rem}.codrops-header::after{content:'Scroll';position:absolute;bottom:0;left:0;width:100%;text-align:center;margin-bottom:1rem;color:var(--color-scroll)}.github{position:absolute;top:0;left:0;margin:2rem}.grid{display:grid;grid-gap:22px;grid-template-columns:repeat(2,calc(50vmax - 11px))}.grid__item{height:auto;width:auto;padding:40px 0 70px}.codrops-header{font-size:100%;padding:0 0 2rem 0;border:22px solid black}}none}.action:focus{outline:none}.theme-1{--color-item-bg:linear-gradient(120deg,#a8edea 0%,#fed6e3 100%);--color-action:#121019;--color-button-bg:#121019;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:5px;--border-button:0}.theme-2{--color-item-bg:linear-gradient(120deg,#7f54e6,#3F51B5);--color-action:#f3f3f3;--color-button-bg:#f3f3f3;--color-button-text:#3c2e9e;--button-padding:1.8rem 4rem;--radius-button:5px;--border-button:0}.theme-3{--color-item-bg:linear-gradient(120deg,#152bc3,#5366d8);--color-action:#0e19a2;--color-button-bg:#0e19a2;--color-button-text:#fff;--button-padding:2rem 4rem;--radius-button:0;--border-button:0}.theme-4{--color-item-bg:linear-gradient(120deg,#ecef3a,#ec6b9b);--color-action:#e85577;--color-button-bg:#transparent;--color-button-text:#e85577;--button-padding:1.5rem 3rem;--radius-button:15px;--border-button:4px solid #e85577}.theme-5{--color-item-bg:linear-gradient(120deg,#baedff,#07a2da);--color-action:#003ff1;--color-button-bg:#003ff1;--color-button-text:#fff;--button-padding:1rem 2rem;--radius-button:5px;--border-button:0}.theme-6{--color-item-bg:linear-gradient(120deg,#9C27B0,#090772);--color-action:#f7d337;--color-button-bg:#f7d337;--color-button-text:#000;--button-padding:1.5rem 3rem;--radius-button:40px;--border-button:0}.theme-7{--color-item-bg:linear-gradient(-20deg,#f794a4 0%,#fdd6bd 100%);--color-action:#e2405b;--color-button-bg:#e2405b;--color-button-text:#e9e9e9;--button-padding:1.8rem 4.5rem;--radius-button:0;--border-button:0}.theme-8{--color-item-bg:linear-gradient(120deg,#84fab0,#8fd3f4);--color-action:blue;--color-button-bg:linear-gradient(to top,#22b9d2 0%,#5389ec 100%);--color-button-text:#fff;--button-padding:2rem 4rem;--radius-button:10px;--border-button:0}.theme-9{--color-item-bg:linear-gradient(120deg,#d299c2 0%,#fef9d7 100%);--color-action:#c13a3a;--color-button-bg:#c13a3a;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:10px;--border-button:0}.theme-10{--color-item-bg:linear-gradient(120deg,#fddb92 0%,#d1fdff 100%);--color-action:#b1b1b1;--color-button-bg:#b1b1b1;--color-button-text:#fff;--button-padding:1.5rem 3rem;--radius-button:0;--border-button:0}.theme-11{--color-item-bg:linear-gradient(120deg,#fff1eb 0%,#ace0f9 100%);--color-action:#1b81ea;--color-button-bg:#fff;--color-button-text:#1b81ea;--button-padding:2rem 4.5rem;--radius-button:7px;--border-button:0}.theme-12{--color-item-bg:linear-gradient(to right,#f78ca0 0%,#f9748f 19%,#fd868c 60%,#fe9a8b 100%);--color-action:#ff4d73;--color-button-bg:#ff4d73;--color-button-text:#fff;--button-padding:1.5rem 7rem;--radius-button:40px;--border-button:0}@media screen and (min-width:50em){.codrops-header{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;min-height:100vh}.codrops-header__title{font-size:3rem}.codrops-header::after{content:'Scroll';position:absolute;bottom:0;left:0;width:100%;text-align:center;margin-bottom:1rem;color:var(--color-scroll)}.github{position:absolute;top:0;left:0;margin:2rem}.grid{display:grid;grid-gap:22px;grid-template-columns:repeat(2,calc(50vmax - 11px))}.grid__item{height:auto;width:auto;padding:40px 0 70px}.codrops-header{font-size:100%;padding:0 0 2rem 0;border:22px solid black}}