:root{--font-family-primary:"Fredoka One",sans-serif;--font-family-secondary:"Source Sans Pro",sans-serif;--font-family-monospace:"Source Code Pro",monospace;--color-text:#121212;--color-yellow:#fbe8a6;--color-yellow-alt:#e6c513;--color-yellow-tint:#cfb011;--color-red:#f76d6d;--color-red-tint:#f53d3d;--color-orange:#f4976c;--color-cyan:#a8d1e7;--color-white:#f5f5f5;--color-blue:#24315e}*,:after,:before{box-sizing:border-box}h1,h2,h3,p{font-weight:400;margin:0}code{font-family:var(--font-family-monospace)}pre{color:var(--color-text);font-size:20px;overflow-x:auto;white-space:nowrap}img{display:block;height:auto;max-width:100%}figure{display:inline-block;margin:0}body{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-osx-font-smoothing:grayscale;color:var(--color-white);font-family:var(--font-family-primary);font-size:24px;line-height:1.6;min-width:1330px}.container{padding:8rem 1.5rem 18rem;position:relative}.container--yellow{background-color:var(--color-yellow)}.container--blue{background-color:var(--color-blue);color:var(--color-white)}.container--dark,.container--dark h1{color:var(--color-text)}.container--cyan{background-color:var(--color-cyan)}.container--red{background-color:var(--color-red)}.container--orange{background-color:var(--color-orange)}.container--hero{padding-bottom:12rem}.container__wrapper{margin:0 auto;max-width:1440px}.divider{bottom:0;left:0;line-height:0;overflow:hidden;position:absolute;transform:rotate(180deg);width:100%}.divider svg{display:block;height:100px;position:relative;width:calc(100% + 1.3px)}.divider--cyan .shape-fill{fill:var(--color-cyan)}.divider--red .shape-fill{fill:var(--color-red)}.divider--yellow .shape-fill{fill:var(--color-yellow)}.divider--orange .shape-fill{fill:var(--color-orange)}.divider--blue .shape-fill{fill:var(--color-blue)}.hero{display:flex;gap:3rem;justify-content:space-between}.hero article{flex:1 1 580px;max-width:650px}.hero figure{animation:a 4s ease-in-out infinite alternate;flex-shrink:0;margin-bottom:-20rem;transform-origin:50% 50%;z-index:2}.hero .title{letter-spacing:.025em;line-height:1;text-transform:uppercase}.hero .bg{--clay-background:var(--color-red);padding:4rem 3rem}.hero .card{--clay-background:var(--color-white);--clay-shadow-inset-secondary:8px 8px 8px 0 hsla(0,0%,100%,.9);color:var(--color-text);font-size:28px;margin-right:-12rem;padding:3rem}.hero p{margin-bottom:2rem}@keyframes a{0%{transform:translateZ(0)}50%{transform:translate3d(-1.5rem,-1.5rem,0)}to{transform:translateZ(0)}}.button{--clay-border-radius:1rem;--clay-shadow-outset:4px 4px 8px 0 rgba(0,0,0,.25);--clay-shadow-inset-primary:-8px -8px 12px 0 rgba(0,0,0,.2);--clay-shadow-inset-secondary:8px 8px 12px 0 hsla(0,0%,100%,.3);align-items:center;color:var(--color-white);cursor:pointer;display:inline-flex;font-size:24px;justify-content:center;line-height:1;padding:1.5rem 2rem;text-decoration:none;text-transform:uppercase;transition:all .15s ease}.button+.button{margin-left:1rem}.button:visited{color:var(--color-white)}.button--red{--clay-background:var(--color-red)}.button--red:hover{--clay-background:var(--color-red-tint)}.button--yellow{--clay-background:var(--color-yellow-alt)}.button--yellow:hover{--clay-background:var(--color-yellow-tint)}.button:active{transform:scale3d(.95,.95,1)}.title{color:var(--color-white);font-size:88px;line-height:1;margin-bottom:4rem;text-shadow:0 .075em rgba(0,0,0,.25)}.title--section{margin-bottom:6rem}.install{display:flex;gap:5rem;justify-content:space-between;padding-right:7rem}.install article{padding:3rem 4rem}.apply pre,.install pre,.mixin .code,.mold pre,.options pre{--clay-background:var(--color-white);--clay-shadow-inset-secondary:8px 8px 8px 0 hsla(0,0%,100%,.9);margin-right:-8rem;padding:2rem 3rem;user-select:all}.npm{--clay-background:var(--color-red)}.cdn{--clay-background:var(--color-blue)}.apply .card,.mixin .card,.mold .css,.mold .html,.options .css{--clay-background:var(--color-red);padding:3rem 4rem}.apply,.mixin,.mold,.options{align-items:flex-start;display:flex;gap:8rem;justify-content:space-between;margin-top:5rem}.mold .css,.options .css{--clay-background:var(--color-blue)}.apply .example{max-width:568px}.mold article+article{margin-top:4rem}.mold .example{--clay-background:var(--color-red);--clay-border-radius:48px;color:var(--color-white);max-width:568px;padding:48px;position:sticky;top:2rem}.mixin pre{font-size:18px}.mixin img{margin-bottom:-18rem;z-index:1}.footer{text-align:center}.footer div a{color:var(--color-cyan)}.footer .yellow{color:var(--color-yellow)}.footer p{margin-bottom:2rem}.footer{padding-bottom:5rem}.hero p a{color:var(--color-orange)}a img{display:inline-block;margin-left:16px;vertical-align: middle;}