canvas[data-astro-cid-y3soregm]{width:100%;height:100vh;position:fixed;z-index:-1;background-color:#000}:root{--ease: linear( 0 0%, .2342 12.49%, .4374 24.99%, .6093 37.49%, .6835 43.74%, .7499 49.99%, .8086 56.25%, .8593 62.5%, .9023 68.75%, .9375 75%, .9648 81.25%, .9844 87.5%, .9961 93.75%, 1 100% )}.container{width:80.31vmax;padding:1.04vmax;max-width:calc(90vw - 2.08vmax);margin-top:3.13vmax;clip-path:inset(-100% -100% 0 -100%);position:relative;touch-action:none;h3{font-weight:600;position:absolute;bottom:100%;font-size:2.08vmax;left:2.08vmax;margin:0}ul{display:grid;grid-template-columns:repeat(calc(var(--swatch-count) + 3),1fr);list-style-type:none;padding:0;margin:0;pointer-events:none;translate:0 calc(var(--offset-y) * 1%)}li{position:relative;aspect-ratio:1 / 4;pointer-events:all;--delay: calc(sin(((var(--i)) / var(--swatch-count)) * 45deg)*1s) ;animation:enter .2s var(--delay) var(--ease) both}li button:is(:hover){translate:0 calc(clamp(.9,var(--power),1) * (var(--distance, 40) * -1.3%))}}@keyframes enter{0%{translate:0 100%}}[data-dark=true] button{color:#fff}[data-dark=false] button{color:#000}li button{container-type:inline-size;font-family:Montserrat,serif;font-weight:600;background:var(--color);width:400%;aspect-ratio:3/4;display:grid;place-items:start;position:absolute;border:0;rotate:calc(var(--power, 0) * (calc(var(--rotate, 0) * 1deg)));translate:0 calc(clamp(0,var(--power),1) * (var(--distance, 40) * -1%));transition:translate .12s,rotate .12s;transition-timing-function:var(--ease);outline-color:red;padding:1.04vmax;border-radius:1.25vmax;outline-offset:.21vmax;cursor:pointer;img{pointer-events:none;width:100%;height:100%;border-radius:1vmax;opacity:0;object-fit:cover;translate:0 50%;transition:all .22s var(--ease)}}li button:is(:hover,:focus-visible) img{opacity:1;translate:0 0}li button:hover{z-index:999}@layer base{:root{--font-size-min: 16;--font-size-max: 20;--font-ratio-min: 1.2;--font-ratio-max: 1.33;--font-width-min: 375;--font-width-max: 1500}html{color-scheme:light dark}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}:where(.fluid){font-size:3vmax}.body{display:grid;place-items:center;min-height:100vh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}.body:before{--size: 45px;--line: color-mix(in hsl, canvasText, transparent 70%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size);mask:linear-gradient(-20deg,transparent 60%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}}.scene[data-astro-cid-kmetj66o]{perspective:26.04vmax;*{transform-style:preserve-3d;font-size:4vmax;@media (width <= 1111px) and (orientation: portrait){font-size:2.4vmax}}}.layeredText[data-astro-cid-kmetj66o]{--layers-count: 24;--layer-offset: .07vmax;position:relative;font-family:Montserrat,sans-serif;font-weight:900;transform:rotateX(30deg);.am-logo{position:absolute;width:6vmax;bottom:-10vmax;left:50%;transform:translate(-50%)}span{display:inline-block;color:transparent;text-shadow:0 0 .1vmax #003}.layers,.layer{position:absolute;inset:0}.layer{--n: calc(var(--i) / var(--layers-count));--delay: calc(var(--n) * .3s);color:hsl(100 30% calc(var(--n) * 100%));transform:translateZ(calc(var(--i) * var(--layer-offset)))}:is(span,.layer){animation:pulsing 2s var(--delay, 0s) infinite ease-out}}@keyframes pulsing{0%,to{scale:1}20%{scale:1.2}}.am-hero[data-astro-cid-bbe6dxrz]{height:100vh;position:relative;display:flex;flex-wrap:wrap;place-content:center}.tp-dfwv{display:none}@font-face{font-family:Montserrat;font-style:normal;font-weight:900;src:url(/20-projects-with-pico-css/assets/mons.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--gradient: linear-gradient(to bottom, #c0d7b4, transparent)}body{--sb-track-color: #000;--sb-thumb-color: var(--gradient);--sb-size: .7vmax}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column;overflow-x:hidden}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}