:root{--color1: rgb(0, 231, 255);--color2: rgb(255, 0, 231);--charizard1: #fac;--charizard2: #ddccaa;--pika1: #54a29e;--pika2: #a79d66;--eevee1: #ec9bb6;--eevee2: #ccac6f;--eevee3: #69e4a5;--eevee4: #8ec5d6;--eevee5: #b98cce;--mewtwo1: #efb2fb;--mewtwo2: #acc6f8}.cards[data-astro-cid-cadpvj5l]{min-height:100vh;background-color:#000;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(17vmax,1fr));place-content:start;--pad: 2vmax;gap:var(--pad);padding:var(--pad);place-content:center;@media (width <= 1111px){--pad: 4.3vmax;grid-template-columns:repeat(auto-fit,minmax(16vmax,1fr))}.three-d-wrapper{perspective:50vmax;isolation:isolate;transform:translate3d(.1px,.1px,.1px)}.card{min-width:16vw;width:100%;aspect-ratio:12 / 17;position:relative;overflow:hidden;z-index:10;touch-action:none;isolation:isolate;border-radius:5%/3.5%;box-shadow:-.25vmax -.25vmax .25vmax -.25vmax var(--color1),.25vmax .25vmax .25vmax -.25vmax var(--color2),0 0 .25vmax #fff0,0 2.75vmax 1.75vmax -1vmax #00000080;transition:transform .5s ease,box-shadow .2s ease;will-change:transform,filter;background-color:#040712;background-image:var(--bg);background-size:cover;background-repeat:no-repeat;background-position:50% 50%;transform-origin:center;&:before,&:after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:color-dodge;transition:all .33s ease}&:before{background-image:linear-gradient(115deg,transparent 0%,var(--color1) 25%,transparent 47%,transparent 53%,var(--color2) 75%,transparent 100%);background-size:300% 300%;filter:brightness(.5) contrast(1);z-index:1}&:after{background-image:url(https://assets.codepen.io/13471/sparkles.gif),url(https://assets.codepen.io/13471/holo.png),linear-gradient(125deg,#ff008450 15%,#fca40040 30%,#ffff0030 40%,#00ff8a20 60%,#00cfff40 70%,#cc4cfa50 85%);background-position:50% 50%;background-size:160%;background-blend-mode:overlay;filter:brightness(1) contrast(1);z-index:2;opacity:.5}&:hover,&.active{animation:none;transition:box-shadow .1s ease-out;&:before{background-image:linear-gradient(110deg,transparent 25%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-size:250% 250%;filter:brightness(.66) contrast(1.33);opacity:.88;transition:none}&:after{filter:brightness(1) contrast(1);opacity:1;transition:none}}&.animated{animation:holoCard 12s ease 0s 1;&:before{animation:holoGradient 12s ease 0s 1}&:after{animation:holoSparkle 12s ease 0s 1}}&:hover{box-shadow:0 0 1.5vmax -.25vmax #fff,0 0 .5vmax -.1vmax #fff,0 2.75vmax 1.75vmax -1vmax #00000080;&:before{background-image:linear-gradient(115deg,transparent 20%,var(--color1) 36%,var(--color2) 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%)}}&.charizard{--color1: var(--charizard1);--color2: var(--charizard2)}&.pika{--color1: var(--pika1);--color2: var(--pika2)}&.mewtwo{--color1: var(--mewtwo1);--color2: var(--mewtwo2)}&.eevee{--color1: var(--eevee1);--color2: var(--eevee2);--color3: var(--eevee3);--color4: var(--eevee4);--color5: var(--eevee5)}}}@keyframes holoSparkle{0%,to{opacity:.75;background-position:50% 50%;filter:brightness(1.2) contrast(1.25)}5%,8%{opacity:1;background-position:40% 40%;filter:brightness(.8) contrast(1.2)}13%,16%{opacity:.5;background-position:50% 50%;filter:brightness(1.2) contrast(.8)}35%,38%{opacity:1;background-position:60% 60%;filter:brightness(1) contrast(1)}55%{opacity:.33;background-position:45% 45%;filter:brightness(1.2) contrast(1.25)}}@keyframes holoGradient{0%,to{opacity:.5;background-position:50% 50%;filter:brightness(.5) contrast(1)}5%,9%{background-position:100% 100%;opacity:1;filter:brightness(.75) contrast(1.25)}13%,17%{background-position:0% 0%;opacity:.88}35%,39%{background-position:100% 100%;opacity:1;filter:brightness(.5) contrast(1)}55%{background-position:0% 0%;opacity:1;filter:brightness(.75) contrast(1.25)}}@keyframes holoCard{0%,to{transform:rotate(0) rotateX(0)}50%{transform:rotate(1deg) rotateX(1deg)}}.container[data-astro-cid-5wnvluim]{min-height:100vh;background-color:#111}.am-hero{display:flex;flex-wrap:wrap;height:100vh;background-color:#000;background-position:center;position:relative;.am-canvas{width:100%;height:100%;position:absolute}.am-logo-react{width:5.6vmax;height:5.6vmax;left:1vmax;bottom:1vmax;position:absolute;object-fit:contain}}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue}@font-face{font-family:ChocoladineDemo;src:url(/20-projects-with-react/assets/ChocoladineDemo.ttf) format("truetype");font-weight:400;font-style:normal}h1,h2{font-family:ChocoladineDemo}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{background-color:transparent;border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column}body{--sb-track-color: #000;--sb-thumb-color: #58c4dc;--sb-size: .7vmax;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)}}@media (width <= 1111px){.tp-dfwv{display:none!important}}