h3{margin:1rem;font-family:var(--font-secondary);font-weight:var(--semi-bold);font-size:1.3rem;text-align:center}h4{font-family:var(--font-secondary);font-weight:var(--extra-light);font-size:1rem;color:var(--colour-primary);text-align:center;margin-left:1rem}.instructions{margin:1rem auto;text-align:center}[data-theme=light] .instructions{color:var(--colour-secondary)}.projects{color:var(--colour-primary);font-family:var(--font-primary);padding:2rem}.card-content{& p{margin:1rem;text-align:left;line-height:2rem;font-size:.9rem;font-weight:var(--semi-bold);font-family:var(--font-primary)}}.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;width:85vw;height:100%;margin:2.5rem auto;overflow-y:hidden;scrollbar-width:none}.cards::-webkit-scrollbar{display:none}.card{background-color:#040404;border:2px solid var(--gold);color:var(--colour-primary);height:650px;width:85%;scroll-snap-align:start;flex-shrink:0;margin-right:20px;border-radius:10px;transform-origin:center center;transform:scale(1);transition:transform .5s;position:relative}[data-theme=light] .card{border:2px solid var(--colour-secondary)}.card-content{height:100%;display:flex;flex-direction:column;align-items:start;justify-items:start;justify-content:space-evenly}.card-img{width:100%;height:100%;object-fit:fill;border-radius:10px;transition:transform .3s ease}.blur{filter:blur(4px)}.card-slide-content{position:absolute;border-radius:10px;bottom:0;left:0;right:0;background:inherit;padding:1rem;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}@media (hover: hover) and (pointer: fine){.card:hover .card-slide-content{transform:translateY(0);opacity:1}.card:hover .card-slide-content:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0,0,0) 45%,rgba(0,0,0,.982) 90%,transparent 100%);z-index:-1}}.card.active .card-slide-content{transform:translateY(0);opacity:1}.card.active .card-slide-content:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0,0,0) 45%,rgba(0,0,0,.982) 70%,transparent 100%);z-index:-1}.tech-container{display:flex;flex-wrap:wrap;justify-content:center;flex-direction:column}.tech-btns{display:flex;flex-wrap:wrap;justify-content:center}.tech{border:2px solid var(--gold);border-radius:.875rem;background-color:#f8a9101a;font-size:.6rem;margin:.5rem;font-weight:var(--bold);font-family:var(--font-secondary);width:5rem;height:1.7rem;text-align:center;align-content:center}.links{display:flex;justify-content:space-between;width:100%;padding:2rem;margin-top:auto;& a{color:var(--colour-primary);text-decoration:underline}}[data-theme=light] h2{font-family:var(--font-secondary);font-weight:var(--extra-light);font-size:2rem;color:var(--colour-secondary);font-style:italic;text-align:center}[data-theme=dark] h2{font-family:var(--font-secondary);font-weight:var(--extra-light);font-size:2rem;color:var(--colour-primary);font-style:italic;text-align:center}.slider-buttons{display:flex;justify-content:center;align-items:center;margin-top:1rem;padding:2rem}.slider-button{height:1rem;width:1rem;background-color:transparent;border:1px solid var(--gold);border-radius:33%;margin:0 .5rem;cursor:pointer;transition:background-color .3s,border .3s}[data-theme=light] .slider-button{background-color:transparent;border:1px solid var(--colour-secondary)}.active{background-color:var(--gold)}[data-theme=light] .active{background-color:var(--gold);border:2px solid var(--gold)}@media screen and (min-width: 768px){.cards{width:60vw}.card{height:550px;margin-right:50px}.tech{width:4rem;height:1.5rem;font-size:.5rem}h3{font-size:1.2rem}h4{font-size:1rem}.card:hover{& img{filter:blur(4px)}}}@media screen and (min-width: 1024px){.cards{position:relative;width:100%;justify-content:center;overflow:hidden}.card{position:relative;flex-shrink:1;margin-right:20px;border-radius:10px;height:500px;width:400px;& img{width:100%;height:100%;object-fit:cover;border-radius:10px;transition:transform .3s ease}}.card-content{& p{font-size:.7rem;line-height:1.5rem;margin:.5rem}}.card-slide-content{position:absolute;border-radius:10px;bottom:0;left:0;right:0;background:inherit;padding:1rem;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}.card:hover .card-slide-content{transform:translateY(0);opacity:1}.card:hover .card-slide-content:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0,0,0) 45%,rgba(0,0,0,.982) 70%,transparent 100%);z-index:-1}.tech-container{& h3,h4{margin:0;padding:.5rem}}.tech{width:4.5rem;height:1.25rem;font-size:.6rem}[data-theme=dark] h2,[data-theme=light] h2{font-size:3rem}.slider-buttons{display:none}.links{padding:1rem}.instructions{padding:2rem;text-align:center}}@media screen and (min-width: 1280px){.cards{width:80vw}.card{height:600px;width:500px}.card-content{& p{font-size:.8rem;line-height:1.8rem;margin:.5rem}}.tech-btns{padding:1rem}.tech{width:5rem;height:1.5rem;font-size:.75rem}}