:root{font-size:16px;--page-padding:2rem;--color-text:#000;--color-bg:#fff;--color-link:rgba(0,0,0,0.8);--color-link-hover:#000;--color-list-item:#000;--color-title:#000;--color-number:#000;--color-bg-effect:white;--blendmode-effect:difference;--bg-blur:0px;--font-size-list-item:18px;}
body{height:100vh;margin:0;color:#111;background-color:#eee;font-family:'LEMONMILK-Regular', "JetBrains Mono", 'Roboto', sans-serif; font-weight:300;font-optical-sizing:auto;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
body::before{content:'';position:fixed;top:-100%;left:-50%;width:300%;height:300%;background-image:url(../assets/noise.png);opacity:1;animation:grain 8s steps(10) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0);}10%{transform:translate(-5%,-10%);}20%{transform:translate(-15%,5%);}30%{transform:translate(7%,-25%);}40%{transform:translate(-5%,25%);}50%{transform:translate(-15%,10%);}60%{transform:translate(15%,0%);}70%{transform:translate(0%,15%);}80%{transform:translate(3%,35%);}90%{transform:translate(-10%,10%);}}
@font-face{font-family:'LEMONMILK-Regular';src:url('../assets/LEMONMILK-Regular.otf') format('opentype');font-display:swap;}
.demo-2{--color-text:#111;--color-bg:#eee;--color-link:#555;--color-link-hover:#111;--color-list-item:#c7c0b3;--color-title:#000;--color-number:#111;}
.demo-2{display:flex;flex-direction:column; height:100vh; justify-content:space-between;}
a{text-decoration:none;color:#555;outline:none;cursor:pointer;}
a:hover{text-decoration:none;color:#111;outline:none;}
.unbutton{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;}
.unbutton:focus{outline:none;}
.frame{font-size:12px;font-weight:bold;letter-spacing:1px;padding:2rem;position:relative;display:flex;justify-content:space-between;align-items:center;}
.frame #cdawrap{justify-self:start;}
.frame a{pointer-events:auto;}
.frame__title,.frame__back,.frame__archive,.frame__sub,.frame__github,.frame__tags,.frame__hire{grid-area:inherit;}
.frame__demos{grid-area:demos;display:flex;gap:1rem;}
.marquee{position:absolute;top:20%;width:100%;margin:0 auto;white-space:nowrap;overflow:hidden;z-index:3;}
.marquee-content{display:flex;align-items:center;}
.marquee span{font-family:'LEMONMILK-Regular','Roboto',sans-serif;font-weight:400;letter-spacing:-10px;color:#111;background-color:transparent;mix-blend-mode:normal !important;font-size:12em;text-transform:uppercase;display:inline-block;padding-left:-10%;animation:marquee-animation 80s linear infinite;filter:url(#minFilter);display:flex;align-items:center;}
@keyframes marquee-animation{0%{transform:translateX(0%);}100%{transform:translateX(-50%);}}
.marquee-img{position:relative;top:0;width:200px;height:200px;object-fit:cover;vertical-align:middle; display: flex; justify-content: center; align-items: center; border:4px solid transparent;box-shadow:0 0 0 2px #000;backdrop-filter:blur(8px);border-radius:0px;}
.marquee-img img{ width: 100%; height: 100%;}
.footer{position:absolute;bottom:0%;width:100%;display:flex;flex-direction:column;padding:0 var(--page-padding) 2rem;justify-content:center;}
.footer__title{font-size:12px;color:var(--color-title);}
.footer p{padding:5vh var(--page-padding) 0;font-size:12px;max-width:900px;}
.spacer{margin-top:15vh;}
.list{margin:0;padding:0;width:100%;list-style:none;display:flex;flex-direction:column;counter-reset:item 0;}
.list__item{font-size:var(--font-size-list-item);cursor:pointer;color:#111;width:100%;display:grid;grid-column-gap:2rem;padding:0.5rem 0;grid-template-columns:100%;justify-content:space-between;align-items:start;justify-items:start;}
.list__item:hover{color:#111;}
.list__item::before{color:var(--color-number);content:counter(item,decimal-leading-zero);counter-increment:item;font-weight:500;padding:3px 3px 0;line-height:0.8;}
.list--alt .list__item::before{content:"EVT#" counter(item,decimal-leading-zero) "0";}
.list__item-col{flex:none;padding:3px 3px 0;line-height:0.8;}
.hover-effect{font-kerning:none;position:relative;white-space:nowrap;}
.hover-effect .word{white-space:nowrap;}
.hover-effect .char{position:relative;}
.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));filter:url(#minFilter);}
.hover-effect--bg-south::after{z-index:-1;left:-8px;right:-8px;top:-8px;bottom:-8px;border-radius:2px;height:auto;width:auto;transform-origin:50% 100%;transform:scaleY(var(--anim));filter:url(#minFilter);}
/*.min-txt{position:absolute;left:0;bottom:0;width:100vw;height:100vh;z-index:-1;}*/
@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 30% 1fr 1fr 1fr;}.demo-4 .list__item{grid-template-columns:100px 1fr 1fr auto;}.list__item-col:last-child{justify-self:end;}}
@media (max-width:500px){.frame{flex-direction: column; height: fit-content;} .marquee{top:10%;}.marquee span{height:20vh;font-size:20vw;letter-spacing:-1vw;}.marquee-img{width:100px;height:100px;}.footer{bottom:0vh;} .demo-2{ min-height: 150vh;}}