.app-container{display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;text-align:center;padding-top:2vh;background:linear-gradient(135deg,#c1cdd0,#8195be);height:100dvh}.portfolio-header{margin-bottom:40px;color:#333}.cards-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2vw}.details-container{display:flex;flex-wrap:wrap;justify-content:center}.portfolio-footer{margin-top:40px;color:#555}.project-card{position:relative;background:#fff;color:#333;min-width:158px;width:20vw;aspect-ratio:10/16;border-radius:12px;overflow:hidden;box-shadow:0 6px 9px #0003;transform:perspective(1000px) rotateX(0) rotateY(0)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:2% 5%;background:#f9f9f9}.card-header .card-title{font-size:calc(11px + .5vw);color:#333;font-weight:700}.card-symbol{font-size:1em;color:#444;border:1px solid #ccc;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 5px #0000004d}.project-card.animate{animation:tiltCard .8s ease-in-out forwards}.project-card.animate:after{animation:holoSheen .8s ease-in-out forwards}.project-card:after{content:"";position:absolute;top:0;left:-70%;width:300%;height:100%;background:linear-gradient(120deg,red,orange,#ff0,green,#00f,indigo,violet);transform:skew(-25deg);opacity:0;mask-image:radial-gradient(circle,white 70%,transparent 100%);-webkit-mask-image:radial-gradient(circle,white 70%,transparent 100%)}@keyframes tiltCard{0%{transform:perspective(1000px) rotateX(0) rotateY(0)}50%{transform:perspective(1000px) rotateX(10deg) rotateY(10deg)}to{transform:perspective(1000px) rotateX(0) rotateY(0)}}@keyframes holoSheen{0%{transform:translate(-120%) skew(-25deg);opacity:0}50%{transform:translate(0) skew(-25deg);opacity:.3}to{transform:translate(50%) skew(-25deg);opacity:0}}.card-image-container{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background-color:#e0e0e0}.placeholder-image{width:85%;aspect-ratio:1;background:linear-gradient(135deg,#ff8a80,#ff80ab,#b388ff,#8c9eff);border-radius:12px;box-shadow:0 4px 6px #0000001a}.project-image{width:85%;aspect-ratio:1;object-fit:scale-down;border-radius:12px;background:linear-gradient(135deg,#ff8a80,#ff80ab,#b388ff,#8c9eff);box-shadow:0 4px 6px #0000001a}.card-content{padding:3%;text-align:center;justify-content:center}.card-description{font-size:calc(10px + .5vw);margin-bottom:4%;color:#333}.details-area{margin-top:5%;padding:14px;width:90%;max-width:800px;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;opacity:0;transition:opacity .5s ease-in-out;min-height:150px}.details-area-header{display:flex;flex-direction:row;font-size:calc(16px + .5vw);color:#333;font-weight:700;justify-content:space-between;margin-left:2%}.details-area-header-flex{display:flex;flex:1}.details-area-header-title{justify-content:center;display:flex;flex:2}.details-area-header-link{justify-content:right;font-size:calc(14px + .5vw);display:flex;flex:1}.details-area.visible{opacity:1}*{margin:0;padding:0;box-sizing:border-box}body{color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}