.example,.follow-box,.implementation-box h2,.implementation-box h3,.implementation-box p,.options,.share-box,.share-button,.shares,.suggestion-box,.warning,footer,header [data-label]:before{-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.example img,.share-button,.shares{-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-drag:none}.options a,footer a{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;tap-highlight-color:transparent;touch-callout:none}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*,:after,:before{box-sizing:inherit;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;text-rendering:optimizeLegibility}html{box-sizing:border-box;font-family:sans-serif;font-display:swap}body{font:100%/1.4 Alegreya Sans,sans-serif;background:#d3d0c9;padding:10px 0}@media (min-width:1500px){body{padding:40px 20px}}h1{cursor:default;font-size:40px;line-height:.95;margin:0}h1,h2{font-weight:400}h2{font-size:25px;line-height:1}h3{font-weight:400;font-size:20px}.implementation-box h3{margin-top:20px}h3 code{font-size:16px;border-bottom:1px solid #aca8a3}a{color:inherit;text-decoration:none}p{font-size:18px;margin-top:10px}p code{font-size:14px;border-bottom:1px solid #aca8a3}p a{font-weight:500;color:#3960ab;border-bottom:1px solid}p a:hover{color:#2e4d89;background:#c4c5c6}p a:active{color:#1d3056}hr{display:block;content:'';border:0;border-top:1px solid #aca8a3;width:100px;text-align:left;margin:10px 0}figcaption,figure{margin:0;padding:0}.container,.wrapper{position:relative;margin:0 auto}.container{display:block;padding:20px}header h2{margin:10px 0}header h2 a{font-size:15px;font-weight:500;color:#3960ab;border-bottom:1px solid;margin-left:10px;vertical-align:middle;cursor:pointer}header h2 a:hover{color:#2e4d89;background:#c4c5c6}header h2 a:active{color:#1d3056}header hr{margin:20px 0}header [data-label]:before{display:inline-block;font-size:13px;margin-right:5px;font-weight:700;text-transform:uppercase;cursor:default;content:attr(data-label);color:#726d69}.example{width:140px;float:left;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.25);padding:10px;font-size:14px;line-height:1.1;margin:0 20px 5px 0;cursor:default}.example img{cursor:zoom-in}.example img:hover{opacity:.6}.example figcaption{margin-top:5px}.grid{margin:0 5px}@media (min-width:650px){.grid{margin:0 10px}}.grid-item,.grid-sizer{display:block;width:100%}@media (min-width:650px){.grid-item,.grid-sizer{width:50%}}@media (orientation:landscape) and (max-width:650px){.grid-item,.grid-sizer{width:50%}}@media (min-width:1200px){.grid-item,.grid-sizer{width:33.33%}}.box{margin:5px;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.25)}@media (min-width:650px){.box{margin:10px}}.title{padding-bottom:0}.title h2 [data-name]{display:inline-block;cursor:pointer}.title h2 [data-name]:before{content:attr(data-name)}.title h2 [data-name]:hover{color:#3960ab;text-transform:lowercase}.title h2 [data-name]:hover:before{content:attr(href)}.title h2 .created-by{display:inline-block;font-size:16px;float:right;line-height:25px}.title h2 .created-by:before{font-style:italic;content:"Idea from "}.title h2 .created-by:hover{text-decoration:underline}.preview{margin:10px 20px 20px}.preview img{width:100%;vertical-align:top;opacity:0}.warning{display:block;font:13px/1.3 Monaco,monospace;background:#1d1f21;color:#969896;padding:20px 20px 0;cursor:default}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))) and (background-blend-mode:difference){.pencil-effect+.warning{display:none}}@supports ((-webkit-filter:blur(2px)) or (filter:blur(2px))) and (mix-blend-mode:multiply){.emboss-effect+.warning,.watercolor-effect+.warning{display:none}}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))) and (mix-blend-mode:color){.colored-pencil-effect+.warning{display:none}}@supports ((-webkit-filter:grayscale(1)) or (filter:grayscale(1))) and (background-blend-mode:difference){.chalkboard-effect+.warning{display:none}}@supports ((-webkit-filter:brightness(2)) or (filter:brightness(2))) and (background-blend-mode:color,difference){.colored-chalkboard-effect+.warning{display:none}}@supports ((-webkit-filter:brightness(.5) blur(5px)) or (filter:brightness(.5) blur(5px))) and (mix-blend-mode:color-dodge){.glow-effect+.warning{display:none}}@supports (mix-blend-mode:multiply){.hallucination-effect+.warning{display:none}}@supports ((-webkit-filter:blur(5px) contrast(10)) or (filter:blur(5px) contrast(10))) and (mix-blend-mode:multiply){.airbrush-effect+.warning{display:none}}@supports (background-blend-mode:overlay){.flannel-effect+.warning{display:none}}@supports (background-blend-mode:screen,overlay){.low-ink-x-effect+.warning,.low-ink-y-effect+.warning{display:none}}@supports (background-blend-mode:overlay){.collage-effect+.warning,.mosaic-effect+.warning{display:none}}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))){.infrared-effect+.warning{display:none}}@supports (background-blend-mode:overlay){.night-vision-effect+.warning{display:none}}@supports (background-blend-mode:color){.warhol-effect+.warning{display:none}}@supports ((-webkit-filter:brightness(3)) or (filter:brightness(3))) and (mix-blend-mode:color){.selective-color-effect+.warning{display:none}}@supports (transform:scaleX(-1)){.mirror-x-effect+.warning,.mirror-y-effect+.warning{display:none}}.support{padding:12px 0;list-style:none}.background-blend-mode-color:before,.background-blend-mode-difference:before,.background-blend-mode:before,.clip-path:before,.filter:before,.mix-blend-mode-color:before,.mix-blend-mode:before,.transform:before{white-space:pre;content:"  "}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))){.filter{display:none}}@supports (background-blend-mode:multiply){.background-blend-mode{display:none}}@supports (background-blend-mode:color){.background-blend-mode-color{display:none}}@supports (background-blend-mode:difference){.background-blend-mode-difference{display:none}}@supports (mix-blend-mode:multiply){.mix-blend-mode{display:none}}@supports (mix-blend-mode:color){.mix-blend-mode-color{display:none}}@supports (transform:scaleX(-1)){.transform{display:none}}@supports ((-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%)) or (clip-path:polygon(0 0,100% 0,100% 100%,0 100%))){.clip-path{display:none}}.output{background:#1d1f21}.implementation-box .output{font-size:14px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.25);white-space:normal;margin:10px 0;cursor:text}.css,.scss{display:none}.css code,.scss code{display:block;font:13px/1.3 Monaco,monospace;color:#c5c8c6;white-space:pre-wrap;-moz-tab-size:2;-ms-tab-size:2;tab-size:2}.showing-css .css,.showing-scss .scss{display:block}.class,.parent,.psuedo-element,.selector,.tag{color:#c66}.number,.url,.variable{color:#de935f}.attribute,.property{color:#f0c674}.keyword,.rule{color:#b294bb}.atrule,.function,.operator,.output,.punctuation,.string{color:#c5c8c6}.options{display:-ms-flexbox;display:flex;font:100%/1.4 Alegreya Sans,sans-serif;font-size:smaller;text-align:left;white-space:nowrap;padding:0 10px 10px;background:#1d1f21}.options a{display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;text-align:center;padding:10px 8px;background:#403b3a;margin:0 0 0 5px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.25);cursor:pointer;white-space:normal;color:#fff;transition:background .4s}.options a:first-child{margin:0}.options a.on{background:#706c6b}.options a.css-toggle{border-radius:4px 0 0 4px}.options a.scss-toggle{border-radius:0 4px 4px 0;margin-left:1px}.options a.copy{width:5em}.options a:hover{transition-duration:.2s;background:#706c6b}.options a:active{transition-duration:0s;background:#100a09}.icon{width:.9em;height:.9em;margin-right:.5em;vertical-align:middle}.follow-box,.implementation-box h2,.implementation-box h3,.implementation-box p,.share-box,.suggestion-box{cursor:default}.share{display:inline-block;margin-right:10px}.share-button,.shares{display:inline-block;border-radius:4px;font-size:16px;line-height:1;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.25);padding:10px 12px;background:#fff;margin-top:5px;transition:background .2s,color .2s}.share-button{cursor:pointer}.share-button:hover{transition-duration:.1s;box-shadow:0 2px 3px rgba(0,0,0,.25);color:#fff}.share-button:active{transition-duration:0s;color:hsla(0,0%,100%,.4);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}.share-button .icon{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-right:10px}.twitter:hover{background:#1da1f2}.twitter:active{background:#0f5179}.facebook:hover{background:#3c599f}.facebook:active{background:#1e2d50}.shares{background:#e9e8e4;cursor:default;margin-left:5px}.suggestion-box p{font-size:17px}footer ul{margin:15px 0;list-style:none}footer li:hover{color:#3960ab}footer li:hover span{background:#c4c5c6}footer li:hover+hr{border-color:#3960ab}footer li:active{color:#1d3056}footer a{display:block;line-height:1.1}footer small{display:block;cursor:default;font-size:1em;margin-top:10px}.ad-box:hover .box{box-shadow:0 2px 3px rgba(0,0,0,.25)}.ad-box .box{background:#1d1f21}#carbonads{cursor:pointer}#carbonads,#carbonads span{display:block;overflow:hidden}#carbonads span{position:relative}.carbon-img{float:left;margin-right:1rem}.carbon-img img{display:block;border-radius:4px;background:rgba(16,10,9,.1)}.carbon-text{font:13px/1.3 Monaco,monospace;float:left;width:calc(100% - 150px);text-align:left;color:#81a2be;text-decoration:none;cursor:pointer}.carbon-text:active{color:#c5c8c6}#carbonads:hover .carbon-text{color:#f0c674}.carbon-poweredby{position:absolute;right:0;bottom:0;display:block;font:11px/1 Monaco,monospace;color:#969896;text-decoration:none}.carbon-poweredby:before{content:"/* "}.carbon-poweredby:after{content:" */"}.pencil-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))) and (background-blend-mode:difference){.pencil-effect{background-image:url(photo.jpg),url(photo.jpg);background-blend-mode:difference;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1);box-shadow:inset 0 0 0 1px #000}}.watercolor-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:blur(2px)) or (filter:blur(2px))) and (mix-blend-mode:multiply){.watercolor-effect{position:relative;overflow:hidden}.watercolor-effect:after,.watercolor-effect:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover}.watercolor-effect:before{background-image:url(photo.jpg),url(photo.jpg);background-blend-mode:difference;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1);box-shadow:inset 0 0 0 1px #000}.watercolor-effect:after{background-image:url(photo.jpg);background-position:50%;mix-blend-mode:multiply;-webkit-filter:brightness(1.3) blur(2px) contrast(2);filter:brightness(1.3) blur(2px) contrast(2)}}.emboss-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))) and (background-blend-mode:difference,screen){.emboss-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg);background-blend-mode:difference,screen;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px),50%;-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1)}}.colored-pencil-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:invert(1)) or (filter:invert(1))) and (mix-blend-mode:color){.colored-pencil-effect{position:relative}.colored-pencil-effect:after,.colored-pencil-effect:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;box-shadow:inset 0 0 0 1px #000}.colored-pencil-effect:before{background-image:url(photo.jpg),url(photo.jpg);background-blend-mode:difference;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1)}.colored-pencil-effect:after{background:inherit;mix-blend-mode:color}}.chalkboard-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:grayscale(1)) or (filter:grayscale(1))) and (background-blend-mode:difference){.chalkboard-effect{background-image:url(photo.jpg),url(photo.jpg);background-blend-mode:difference;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);-webkit-filter:brightness(1.5) grayscale(1);filter:brightness(1.5) grayscale(1)}}.colored-chalkboard-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:brightness(2)) or (filter:brightness(2))) and (background-blend-mode:color,difference){.colored-chalkboard-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg);background-size:cover;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px),50%;background-blend-mode:color,difference;-webkit-filter:brightness(2);filter:brightness(2)}}.airbrush-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:blur(5px) contrast(5)) or (filter:blur(5px) contrast(5))) and (mix-blend-mode:multiply){.airbrush-effect{position:relative;overflow:hidden}.airbrush-effect:after{display:block;content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;-webkit-filter:brightness(1.5) saturate(100) blur(5px) contrast(5);filter:brightness(1.5) saturate(100) blur(5px) contrast(5);mix-blend-mode:multiply}}.hallucination-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (mix-blend-mode:multiply){.hallucination-effect{position:relative;overflow:hidden;background-color:#f0f;background-blend-mode:screen}.hallucination-effect:after,.hallucination-effect:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;mix-blend-mode:multiply;-webkit-transform:scale(1.05);transform:scale(1.05)}.hallucination-effect:before{background-color:#ff0;background-blend-mode:screen;-webkit-transform-origin:top left;transform-origin:top left}.hallucination-effect:after{background-color:cyan;background-blend-mode:screen;-webkit-transform-origin:bottom right;transform-origin:bottom right}}.flannel-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (background-blend-mode:overlay){.flannel-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg);background-position:50%;background-size:100%,100000% 100%,100% 100000%;background-blend-mode:overlay}}.low-ink-x-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (background-blend-mode:screen,overlay){.low-ink-x-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg);background-size:100% 100%,10000% 100%;background-blend-mode:screen,overlay}}.low-ink-y-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (background-blend-mode:screen,overlay){.low-ink-y-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg);background-size:100% 100%,100% 1000%;background-blend-mode:screen,overlay}}.collage-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (background-blend-mode:overlay){.collage-effect{background-image:url(photo.jpg),url(photo.jpg),url(photo.jpg),url(photo.jpg),url(photo.jpg),url(photo.jpg);background-size:200%,80%,60%,50%,40%,100%;background-position:50%,80%,30%,0;background-blend-mode:overlay;background-repeat:no-repeat}}.mosaic-effect{background-image:url(photo.jpg),url(photo.jpg);background-size:cover,5% 5%;background-position:50%;background-blend-mode:overlay}.photo-border-effect{background-image:url(photo.jpg),url(photo.jpg);background-position:50%;background-size:60%,20%;background-repeat:no-repeat,repeat}.infrared-effect{background-image:url(photo.jpg);-webkit-filter:hue-rotate(180deg) saturate(2);filter:hue-rotate(180deg) saturate(2)}.infrared-effect,.night-vision-effect{background-size:cover;background-position:50%}.night-vision-effect{background-image:url(photo.jpg),radial-gradient(#0f0,#000),repeating-linear-gradient(transparent,rgba(0,0,0,.1) 2.5px,transparent 5px);background-blend-mode:overlay}.warhol-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (background-blend-mode:color){.warhol-effect{background-image:linear-gradient(#14ebff,#14ebff 50%,#ffff70 0,#ffff70),linear-gradient(#ff85da,#ff85da 50%,#aaa 0,#aaa),url(photo.jpg);background-size:50% 100%,50% 100%,50% 50%;background-position:0 0,100% 0;background-repeat:no-repeat,no-repeat,repeat;background-blend-mode:color}}.selective-color-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports ((-webkit-filter:brightness(3)) or (filter:brightness(3))) and (mix-blend-mode:color){.selective-color-effect{position:relative}.selective-color-effect:after,.selective-color-effect:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;background-color:red;background-blend-mode:screen;mix-blend-mode:color;-webkit-filter:brightness(3);filter:brightness(3)}}.mirror-x-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (transform:scaleX(-1)){.mirror-x-effect{position:relative}.mirror-x-effect:after,.mirror-x-effect:before{display:block;content:"";position:absolute;top:0;bottom:0;background:inherit}.mirror-x-effect:before{left:0;right:50%;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mirror-x-effect:after{left:50%;right:0}}.mirror-y-effect{background-image:url(photo.jpg);background-size:cover;background-position:50%}@supports (transform:scaleY(-1)){.mirror-y-effect{position:relative}.mirror-y-effect:after,.mirror-y-effect:before{display:block;content:"";position:absolute;left:0;right:0;background:inherit}.mirror-y-effect:before{top:0;bottom:50%;-webkit-transform:scaleY(-1);transform:scaleY(-1)}.mirror-y-effect:after{top:50%;bottom:0}}[class$=-effect]{display:inline-block!important;position:relative!important}[class$=-effect] img{vertical-align:top!important;margin:0!important;visibility:hidden!important}