.my-atropos[data-astro-cid-dohjnao5]{--width: 29.95vmax;width:var(--width);zoom:.8;cursor:pointer}@font-face{font-family:Jost;src:url(/20-projects-with-css-art/assets/card/jost-vf.woff2) format("woff2");font-display:swap}.card-container[data-astro-cid-dohjnao5]{--height: calc(var(--width) * 1.5);--border-size: calc(var(--width) / 19.5);--dark-color: color-mix(in srgb, var(--color), black 50%);--category-gradient: linear-gradient( var(--dark-color), var(--color), var(--dark-color) );width:var(--width);height:var(--height);background-image:var(--texture),linear-gradient(#141414,#141414);background-blend-mode:overlay,normal;background-clip:padding-box,border-box;border:var(--border-size) solid transparent;border-bottom-width:calc(var(--border-size) * 1.6);padding:var(--border-size);position:relative;display:inline-flex;flex-direction:column;&[data-astro-cid-dohjnao5]:before{--offset: calc(var(--border-size) * -1.5);content:"";border:.07vmax solid var(--color);display:block;position:absolute;width:calc(100% + var(--border-size));height:calc(100% + calc(var(--border-size) * 1.25));transform:translate(var(--offset),var(--offset));clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,80% 90%,20% 90%,20% 100%,0 100%)}&[data-astro-cid-dohjnao5]:after{content:"";background-image:var(--noise);mix-blend-mode:overlay;inset:0;display:block;position:absolute;pointer-events:none}}.image-container[data-astro-cid-dohjnao5],.description-container[data-astro-cid-dohjnao5]{--border-size: .2vmax;width:88%;height:55%;margin:0 auto;background:linear-gradient(#010011,#010011) padding-box,var(--category-gradient) border-box;padding:var(--border-size);border:var(--border-size) solid transparent;display:grid;place-items:center;user-select:none;position:relative}.image-container[data-astro-cid-dohjnao5]{margin-top:4.56vmax}img[data-astro-cid-dohjnao5]{top:.07vmax;left:.07vmax;width:calc(100% - .13vmax);height:calc(100% - .33vmax);object-fit:cover;object-position:center;position:absolute}.description-container[data-astro-cid-dohjnao5]{height:25%;display:grid;margin-top:1.63vmax;position:relative;background:linear-gradient(#341d14,#1a0f0a) padding-box,var(--category-gradient) border-box;p{font-family:Jost,sans-serif;font-size:1.35vmax;color:#ccc;padding:0 1.04vmax!important}}header[data-astro-cid-dohjnao5]{--shape: polygon(5% 0, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);--gradient: linear-gradient(to right, #fff, #222 30%, #222 70%, #fff 100%);display:grid;place-items:center;width:90%;background:var(--gradient);clip-path:var(--shape);box-sizing:border-box;position:absolute;z-index:2;top:0%;margin:unset;padding:unset;box-sizing:content-box;padding:.26vmax .9vmax;transform:translateY(.52vmax);height:3.51vmax;.text{display:grid;grid-template-columns:1fr 6.51vmax;width:calc(100% - .39vmax);height:calc(100% - .39vmax);padding:.26vmax 1.04vmax;background:#1d1d1d;clip-path:var(--shape);align-content:center;h1{margin:0;font-family:Jost,sans-serif;font-size:1.3vmax;color:#fff;background:linear-gradient(45deg,#ae8625,#f7ef8a,#d2ac47,#edc967);background-clip:text;-webkit-text-fill-color:transparent;padding:0 1.04vmax!important}.icons{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:#0000;gap:.33vmax;translate:-.5vmax;.icon{width:2.08vmax;height:2.08vmax;opacity:var(--opacity, .75);color:#fff;background-repeat:no-repeat;background-image:var(--icon-tech);background-position:center;background-size:cover;&.html{background-size:contain;translate:0 .07vmax;transform:scaleY(1.07)}&:nth-of-type(2){translate:.07vmax}}}}&.description{--gradient: linear-gradient( to right, #222, #fff5 15%, #fff 50%, #fff5 85%, #222 );--shape: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%);--opacity: 1;top:initial;bottom:32%;.text{grid-template-columns:1fr 3.26vmax}.icons .icon{clip-path:var(--shape);background-color:#edc967}}}.num[data-astro-cid-dohjnao5]{--size: 1.69vmax;margin-right:.52vmax;border:.13vmax solid #fff;display:grid;place-items:center;justify-self:end;border-radius:50%;font-weight:800;color:#fff;background:#000;width:var(--size);height:var(--size);position:absolute;bottom:calc(var(--size) * -.6);.logo-github{width:70%;height:70%;background-repeat:no-repeat;background-image:var(--github)}}.container-cards[data-astro-cid-5wnvluim]{content-visibility:auto;min-height:100vh;width:100%;height:max-content;background-color:#000;padding:3vmax;gap:5vmax;display:grid;place-content:center;place-items:center;grid-template-columns:repeat(auto-fit,minmax(25vmax,1fr))}.credits[data-astro-cid-bbe6dxrz]{position:absolute;width:18vmax;bottom:1vmax;left:1vmax}.hero[data-astro-cid-bbe6dxrz]{height:100vh;width:100%;background:#000;display:flex;flex-wrap:wrap;place-content:center;--square-size: 3.26vmax;--square-size-plus-one: calc(var(--square-size) + .07vmax);--square-size-negative: calc(var(--square-size) * -1);background-image:radial-gradient(ellipse,#0000 20%,#0004 40%,#000 65%),repeating-linear-gradient(to bottom,transparent 0 var(--square-size),#555 var(--square-size) var(--square-size-plus-one)),repeating-linear-gradient(to right,transparent 0 var(--square-size),#555 var(--square-size) var(--square-size-plus-one)),radial-gradient(ellipse 32.55vmax 39.06vmax at 50% 60%,#143071,transparent),radial-gradient(circle 19.53vmax at 40% 40%,#8e1765,transparent);animation:move 2.5s linear infinite;.am-titulo{width:40%;mix-blend-mode:lighten;@media (width <= 1111px) and (orientation: portrait){width:70%}}}@keyframes move{0%{background-position:0 0}to{background-position:0 0,var(--square-size-negative) var(--square-size-negative),var(--square-size-negative) var(--square-size-negative),0 0,0 0}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{background-color:#000}:root{--primary-black: #000;--primary-gray: #555}body{margin-inline:auto;min-height:100vh;height:max-content}a,button{-webkit-tap-highlight-color:transparent}body{--sb-track-color: var(--primary-black);--sb-thumb-color: var(--primary-gray);--sb-size: .7vmax}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(--primary-gray) var(--primary-black)}}:root{--html: url(/20-projects-with-css-art/assets/logos/html5.svg);--css: url(/20-projects-with-css-art/assets/logos/css.svg);--js: url(/20-projects-with-css-art/assets/logos/javascript.svg);--github: url(/20-projects-with-css-art/assets/logos/github.svg);--noise: url(/20-projects-with-css-art/assets/card/noise.webp);--texture: url(/20-projects-with-css-art/assets/card/texture-1.webp);--code-icon: path( "M31.1 15.55 23.77 22.88 21.94 21.05 27.44 15.55 21.94 10.05 23.77 8.22ZM3.66 15.55 9.16 21.05 7.33 22.88 0 15.55 7.33 8.22 9.16 10.06ZM12.68 27.21H9.93L18.42 3.88H21.18Z" )}card-of-a-project{--width: 16vmax;zoom:.7}@font-face{font-family:Jost;src:url(/20-projects-with-css-art/assets/card/jost-vf.woff2) format("woff2");font-display:swap}