@import"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700";:root{font-size:16px;--page-padding: 2rem;--color-text: #e7e7e7;--color-bg: #fff;--color-link: rgba(255, 255, 255, .8);--color-link-hover: #000;--color-list-item: #ffffff;--color-title: #b9b9b9;--color-number: #b3b3b3;--color-bg-effect: white;--blendmode-effect: difference;--bg-blur: 0px;--font-size-list-item: 18px}main{display:flex;flex-direction:column;min-height:100vh;justify-content:space-between}.demo-5 main{mix-blend-mode:difference}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer}a:hover{text-decoration:none;color:var(--color-link-hover);outline:none}a:focus{outline:none}a:focus-visible{outline:2px solid red}.unbutton{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer}.unbutton:focus{outline:none}.frame{font-size:12px;font-weight:700;letter-spacing:1px;padding:var(--page-padding);position:relative;display:grid;grid-row-gap:1rem;grid-column-gap:2rem;align-items:start;pointer-events:none;justify-items:start;grid-template-columns:auto auto;grid-template-areas:"title" "archive" "back" "github" "sponsor" "demos"}.frame #cdawrap{justify-self:start}.frame a{pointer-events:auto}.frame__title{grid-area:title;font-size:inherit;font-weight:inherit;margin:0}.frame__back{grid-area:back;justify-self:start}.frame__archive{grid-area:archive;justify-self:start}.frame__sub{grid-area:sub}.frame__github{grid-area:github}.frame__tags{grid-area:tags}.frame__hire{grid-area:hire}.frame__demos{grid-area:demos;display:flex;gap:1rem}.content{display:flex;flex-direction:column;padding:0 var(--page-padding) 2rem;justify-content:center;width:100%}.content__title{font-size:1em;color:var(--color-title)}.spacer{margin-top:15vh}.list{margin:0;padding:0;width:100%;list-style:none;display:flex;flex-direction:column;counter-reset:item 0}.content p{padding:5vh var(--page-padding) 0;font-size:12px;max-width:900px}.list__item{font-size:var(--font-size-list-item);cursor:pointer;width:100%;display:grid;color:var(--color-list-item);grid-column-gap:2rem;padding:.5rem 0;grid-template-columns:100%;justify-content:space-between;align-items:start;justify-items:start}.list__item-col{flex:none;padding:3px 3px 0;line-height:.8;font-family:Courier New,Courier,monospace}.list__item.animated{border-top:1px solid transparent;border-bottom:1px solid transparent}.list__item.animated:hover{border-top:1px solid white;border-bottom:1px solid white;transition:all .1s ease-in-out}.hover-effect .word{white-space:nowrap}.hover-effect .char{position:relative}.hover-effect{font-kerning:none;position:relative;white-space:nowrap}.hover-effect--cursor-square .char{--opa: 0}.hover-effect--cursor-square .char:after{content:"";width:1ch;top:0;left:0;position:absolute;opacity:var(--opa);background:currentColor;height:100%}.hover-effect--bg,.hover-effect--bg-south{--anim: 0}.hover-effect--bg:after,.hover-effect--bg-south:after{content:"";position:absolute;left:0;width:100%;height:calc(100% + 3px);top:0;background-color:var(--color-bg-effect);mix-blend-mode:var(--blendmode-effect);-webkit-backdrop-filter:blur(var(--bg-blur));backdrop-filter:blur(var(--bg-blur));transform-origin:0% 50%;transform:scaleX(var(--anim))}.hover-effect--bg-south:after{z-index:-1;inset:-8px;border-radius:2px;height:auto;width:auto;transform-origin:50% 100%;transform:scaleY(var(--anim))}@media screen and (min-width: 40em){.list__item{grid-template-columns:auto 1fr 1fr 1fr auto}}@media screen and (min-width: 53em){.frame{grid-template-columns:auto auto auto auto 1fr 1fr;grid-template-areas:"title back archive github demos sponsor"}.frame #cdawrap,.frame__demos{justify-self:end}.frame #cdawrap{text-align:right}}@media screen and (min-width: 73em){.list__item{grid-template-columns:100px auto auto auto 50px}.demo-4 .list__item{grid-template-columns:100px 1fr 1fr auto}.list__item-col:last-child{justify-self:end}}.miro{width:960px;height:720px;margin:10px;position:relative;border-radius:1em;overflow:hidden;box-shadow:0 0 10px #0003}@font-face{font-family:Icons;src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/134921/Icons.eot);src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/134921/Icons.eot?#iefix) format("eot"),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/134921/Icons.woff) format("woff"),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/134921/Icons.ttf) format("truetype"),url(../fonts/Icons.svg#Icons) format("svg");font-weight:400;font-style:normal}.section-contactboxes{font-family:Dosis,sans-serif;margin-top:6.25rem}a{color:inherit;text-decoration:none}.contact-box-cntr:first-child{margin-top:0}.contact-box{border:2px solid transparent;overflow:hidden;padding:1rem 0;position:relative;text-align:center;border-radius:1em}.contact-box:before{border-radius:50%;content:"";height:100px;left:50%;margin-left:-50px;margin-top:-50px;opacity:0;position:absolute;top:50%;width:100px;will-change:transform,opacity;z-index:0;transition-duration:.3s;transition-property:transform,opacity}.contact-box:hover{cursor:pointer}.contact-box:hover:before{opacity:1;transform:scale3d(3.4,3.4,1)}.contact-box:hover i,.contact-box:hover h4,.contact-box:hover p,.contact-box:hover a{position:relative;z-index:2;transition-property:color;transition-duration:.3s}.contact-box__title{margin:.375rem 0 0;font-size:2rem}.contact-box__info{margin:0}.contact-box__icon{font-size:2.5rem}.contact-box--teal{color:#fff;border-color:#fff}.contact-box--teal .contact-box__title{color:inherit}.contact-box--teal:before{background-color:#fff;border:1px solid #ffffff}.contact-box--teal:hover,.contact-box--teal:hover a{color:#fff}.contact-box--orange{color:#f49263;border-color:#f49263}.contact-box--orange .contact-box__title{color:inherit}.contact-box--orange:before{background-color:#f49263;border:1px solid #f49263}.contact-box--orange:hover,.contact-box--orange:hover a{color:#fff}.contact-box--green{color:#8ccc80;border-color:#8ccc80}.contact-box--green .contact-box__title{color:inherit}.contact-box--green:before{background-color:#8ccc80;border:1px solid #8ccc80}.contact-box--green:hover,.contact-box--green:hover a{color:#fff}.ico{line-height:0}.ico:before{display:inline-block;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ico-envelope:before{content:""}.ico-phone:before{content:""}.ico-clock:before{content:""}