.project-card{background-color:hsl(var(--accent));overflow:hidden;cursor:pointer;position:relative;border-radius:.75em;z-index:1}.project-card:hover .image-overlay,.project-card:hover .project-card-content,.project-card:hover:before{opacity:1}.project-card:before{pointer-events:none;top:0;left:0;height:100%;width:100%;content:"";background:linear-gradient(45deg,transparent 5%,hsl(var(--primary)) 50%,transparent 98%);z-index:1}.project-card-content,.project-card:before{position:absolute;border-radius:inherit;opacity:0;transition:opacity .4s ease-in-out}.project-card-content{display:flex;color:#fff;inset:1px;padding:10px;flex-direction:column;justify-content:start;gap:25%;align-items:start;z-index:2}.project-date{position:absolute;bottom:5px;right:5px;font-size:.875rem;opacity:.8}.image-wrapper{top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:calc(100% - 1px);height:calc(100% - 1px)}.image-overlay,.image-wrapper{border-radius:inherit;position:absolute;z-index:2}.image-overlay{background:linear-gradient(to top left,rgba(0,0,0,.1),rgba(0,0,0,.1));inset:0;transition:opacity .4s ease}.project-image{position:absolute;padding:1px;border-radius:inherit;width:100%;height:100%;object-fit:cover;left:100%;top:0;transition:transform .4s ease,opacity .4s ease}.project-image.active{transform:translateX(0);left:0;opacity:1}.project-image.inactive{transform:translateX(-100%);left:-100%;opacity:0}.projects-grid{display:grid;position:relative;grid-row-gap:40px;grid-template-columns:1fr;grid-auto-flow:row;align-content:stretch;width:100%}@media screen and (min-width:768px){.projects-grid{display:grid;position:relative;grid-template-columns:1fr 1fr 1fr;grid-column-gap:40px;grid-row-gap:40px;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center}}.scroll-to-top-button{transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(20px)}.scroll-to-top-button.visible{opacity:1;transform:translateY(0)}@keyframes subtleRotate{0%{transform:rotate(30deg)}50%{transform:rotate(35deg)}to{transform:rotate(30deg)}}@keyframes subtleYMovement{0%{translate:2px 3px}50%{translate:0 0}to{translate:2px 3px}}@keyframes subtleXMovement{0%{translate:10px -2px}50%{translate:0 2px}to{translate:10px -2px}}@keyframes cogAnimation{0%{transform:rotate(0deg)}50%{transform:rotate(20deg)}to{transform:rotate(0deg)}}.cog-animation{animation:cogAnimation 60s linear infinite}.noodle-animation{animation:subtleRotate 10s ease-in-out infinite,subtleYMovement 5s ease-in-out infinite}.cylinder-animation{animation:subtleXMovement 10s ease-in-out infinite}.nav__link{transition:color .3s;letter-spacing:-.5px;font-size:1.2rem}.test{background-color:hsla(0,0%,100%,.8);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}