.portfolio-project{background-color:#fff;overflow:hidden;padding:6.25rem 0;position:relative}.portfolio-project:nth-child(2n){background-color:#f8f8f8}.portfolio-content{align-items:center;display:grid;gap:5rem;grid-template-columns:1fr 1fr}.portfolio-right .portfolio-info{order:1}.portfolio-right .portfolio-computer-link{order:2}.portfolio-computer-link{display:block;text-decoration:none;transition:transform .3s ease}.portfolio-computer-link:hover{transform:scale(1.02)}.portfolio-computer-link:hover .portfolio-screen{box-shadow:0 1.5625rem 4.375rem rgba(0,0,0,.4)}.portfolio-computer{margin:0 auto;max-width:37.5rem;position:relative}.portfolio-screen{background:#000;border:1.25rem solid #333;border-radius:.625rem;box-shadow:0 1.25rem 3.75rem rgba(0,0,0,.3);overflow:hidden;position:relative}.portfolio-screen:before{background:linear-gradient(135deg,hsla(0,0%,100%,.1),transparent 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.portfolio-screen img{display:block;height:auto;width:100%}.portfolio-stand{background:#333;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);height:3.75rem;margin:0 auto;width:6.25rem}.portfolio-base{background:#333;border-radius:.3125rem;height:.625rem;margin:0 auto;width:12.5rem}.portfolio-info{max-width:31.25rem}.portfolio-left .portfolio-info{margin-left:0;margin-right:auto}.portfolio-right .portfolio-info{margin-left:auto;margin-right:0}.portfolio-topper{color:#0c0;display:block;font-size:.875rem;font-weight:600;letter-spacing:.125em;margin-bottom:.625rem;text-transform:uppercase}.portfolio-title{color:#1a1a1a;font-size:2.5rem;line-height:1.2;margin-bottom:1.25rem}.portfolio-text{color:#666;font-size:1.125rem;line-height:1.6;margin-bottom:1.25rem}.portfolio-tech{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:1.875rem}.tech-tag{background:rgba(0,200,0,.1);border:1px solid rgba(0,200,0,.3);border-radius:1.25rem;color:#0c0;font-size:.875rem;padding:.3125rem .9375rem;transition:all .3s ease}.tech-tag:hover{background:rgba(0,200,0,.2);border-color:#0c0}.portfolio-project .cs-button-solid{align-items:center;display:inline-flex;gap:.625rem;transition:all .3s ease}.portfolio-arrow{transition:transform .3s ease}.portfolio-project .cs-button-solid:hover .portfolio-arrow{transform:translateX(.3125rem)}.portfolio-bg-accent{background:radial-gradient(circle,rgba(0,200,0,.05) 0,transparent 70%);border-radius:50%;height:31.25rem;pointer-events:none;position:absolute;width:31.25rem}.portfolio-left .portfolio-bg-accent{right:-15.625rem;top:50%;transform:translateY(-50%)}.portfolio-right .portfolio-bg-accent{left:-15.625rem;top:50%;transform:translateY(-50%)}.portfolio-project{opacity:0;transform:translateY(1.875rem);transition:all .8s ease}.portfolio-project.visible{opacity:1;transform:translateY(0)}body.dark-mode .portfolio-project{background-color:#0a0a0a}body.dark-mode .portfolio-project:nth-child(2n){background-color:#111}body.dark-mode .portfolio-title{color:#fff}body.dark-mode .portfolio-text{color:#ccc}body.dark-mode .portfolio-topper{color:#0f0}body.dark-mode .portfolio-screen{border-color:#222;box-shadow:0 1.25rem 3.75rem rgba(0,255,0,.1)}body.dark-mode .portfolio-screen:before{background:linear-gradient(135deg,rgba(0,255,0,.05),transparent 50%)}body.dark-mode .portfolio-base,body.dark-mode .portfolio-stand{background:#222}body.dark-mode .tech-tag{background:rgba(0,255,0,.1);border-color:rgba(0,255,0,.3);color:#0f0}body.dark-mode .tech-tag:hover{background:rgba(0,255,0,.2);border-color:#0f0}body.dark-mode .portfolio-bg-accent{background:radial-gradient(circle,rgba(0,255,0,.08) 0,transparent 70%)}body.dark-mode .portfolio-computer-link:hover .portfolio-screen{box-shadow:0 1.5625rem 4.375rem rgba(0,255,0,.15)}@media (max-width:64rem){.portfolio-content{gap:3.125rem;grid-template-columns:1fr}.portfolio-right .portfolio-computer-link,.portfolio-right .portfolio-info{order:0}.portfolio-info{margin:0 auto!important;max-width:37.5rem;text-align:center}.portfolio-tech{justify-content:center}.portfolio-computer{max-width:31.25rem}.portfolio-title{font-size:2rem}}@media (max-width:48rem){.portfolio-project{padding:3.75rem 0}.portfolio-computer{max-width:25rem}.portfolio-screen{border-width:.9375rem}.portfolio-title{font-size:1.75rem}.portfolio-text{font-size:1rem}.portfolio-bg-accent{height:18.75rem;width:18.75rem}.portfolio-left .portfolio-bg-accent{right:-9.375rem}.portfolio-right .portfolio-bg-accent{left:-9.375rem}}@media (max-width:30rem){.portfolio-computer{max-width:100%}.portfolio-screen{border-radius:.5rem;border-width:.625rem}.portfolio-stand{height:2.5rem;width:3.75rem}.portfolio-base{height:.375rem;width:7.5rem}.portfolio-title{font-size:1.5rem}.tech-tag{font-size:.75rem;padding:.25rem .75rem}.portfolio-content{gap:1.875rem}}