.project{background-color:hsl(from var(--background) h s l / 80%);border-radius:.5rem;box-shadow:0 10px 20px -10px var(--dark-alpha);color:var(--primary);flex:1 1 100%;flex-basis:calc(75% - 1rem);max-width:calc(75% - 1rem);padding:1rem;position:relative;transform-origin:center;transition:.2s all ease-in-out;display:flex;flex-direction:column;&[data-hiding=true]{opacity:0;transform:scale(.8)}&:before{background:linear-gradient(-135deg,var(--light-alpha) 0%,transparent 50%),radial-gradient(circle at var(--x, 50%) var(--y, 50%),hsl(from var(--accent) h s l / 15%) 0%,transparent 50%);content:"";border-radius:.5rem;position:absolute;width:100%;height:100%;left:0;top:0;background-size:200%;box-shadow:inset 0 10px 20px #00000080;transition:.2s all ease-in-out}picture{flex-basis:40%;padding:0;margin:0;transform-style:preserve-3d;transform-origin:center;transition:all .6s cubic-bezier(.175,.885,.32,1.275);filter:drop-shadow(0 5px 10px rgba(0,0,0,.1))}&:hover{box-shadow:0 10px 30px -10px #000c;z-index:10;&:before{background-position:50%}.glow:before{opacity:1}picture.popup{transform:perspective(800px) rotateX(-25deg) translateY(-40px) translateZ(50px) scale(1.15);filter:drop-shadow(0 35px 35px rgba(0,0,0,.4))}picture img.popup{transform-origin:bottom;transform:perspective(800px) rotateX(-15deg) translateY(-10px);filter:drop-shadow(0 35px 35px rgba(0,0,0,.4))}picture:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;opacity:1;transition:opacity .6s ease}picture img{transform:translateZ(25px) rotateY(-5deg);transition:transform .6s cubic-bezier(.175,.885,.32,1.275)}}p{color:var(--accent)}a{height:calc(100% - 6rem);display:block;padding:2em;position:relative;transition:.2s transform ease,.3s drop-shadow ease}picture{flex-basis:40%;padding:0;margin:0;aspect-ratio:16/9;position:relative;z-index:10;img{display:block;height:auto;margin:auto;max-width:100%}img[src*=codepen]{box-shadow:0 0 20px -10px var(--dark-alpha);border:2px solid var(--dark-alpha);border-radius:1rem;width:100%;aspect-ratio:16/9}img[src$=svg]{display:block;fill:currentColor;height:auto;width:auto;max-height:10rem}}}@media (min-width: 768px){.project{flex:0 1 calc(33% - 3rem)}}.text{flex-basis:60%;text-align:left;& h2>a,h2>span{padding:0 .15em}}.embed{display:none;height:0;max-width:780px;padding-bottom:calc(100vh - 10rem);position:relative;width:100%;margin:2rem auto;& iframe{box-shadow:0 0 5em -2em;height:100%;left:0;position:absolute;top:0;width:100%;max-height:100%}}.image{height:100%;position:relative;width:100%;img{display:block;height:auto;margin:auto;width:80%}img[src$=svg]{display:block;fill:currentColor;height:auto;max-width:90%;min-height:90%;max-height:150px;width:auto}}.links{align-items:flex-end;bottom:.5rem;display:flex;flex-direction:column;padding:.5em;position:absolute;right:0;a{padding:.2em}h2{display:inline-block;opacity:.7;font-weight:500;font-size:1.2rem;margin:0 .2em}}.glow{position:absolute;inset:-2rem;pointer-events:none;z-index:1;border-radius:.5rem;mask-image:conic-gradient(from calc(var(--angle, 0deg) + 45deg) at center,transparent 0%,black 5%,black 15%,transparent 20%,transparent 100%);opacity:var(--edge, 0);mix-blend-mode:lighter;transition:opacity .2s ease}.glow:before{opacity:0;content:"";position:absolute;inset:2rem;border-radius:inherit;box-shadow:inset 0 0 0 1px hsl(from var(--accent) h s l / 100%),inset 0 0 3px hsl(from var(--accent) h s l / 50%),inset 0 0 6px hsl(from var(--accent) h s l / 40%),inset 0 0 15px hsl(from var(--accent) h s l / 30%),inset 0 0 25px 2px hsl(from var(--accent) h s l / 20%),inset 0 0 50px 2px hsl(from var(--accent) h s l / 10%),0 0 3px hsl(from var(--accent) h s l / 50%),0 0 6px hsl(from var(--accent) h s l / 40%),0 0 15px hsl(from var(--accent) h s l / 30%),0 0 25px 2px hsl(from var(--accent) h s l / 20%),0 0 50px 2px hsl(from var(--accent) h s l / 10%)}.projects{align-items:stretch;display:flex;flex-wrap:wrap;gap:1rem;height:100%;justify-content:center;max-width:1120px;padding:0 1rem;width:100%}fieldset{display:flex;gap:1rem;align-items:center;margin:1rem 0 3rem;padding:0;border:0;flex-wrap:wrap;justify-content:center}input[type=checkbox]{display:none}input[type=checkbox]:checked+span{color:var(--accent);transform:scale(1.1)}label{display:flex;align-items:center;gap:.5rem;cursor:pointer;transform-origin:center;transition:.2s all ease-in-out;&:hover{transform:scale(1.1)}}button{padding:.5rem 1rem;background:var(--accent);color:var(--background);border:none;border-radius:.25rem;cursor:pointer}button:hover{opacity:.8}.contributions{display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:2rem;& h3{margin:0 0 2rem;font-weight:300;font-size:2rem}@media only screen and (min-width: 840px){display:flex;min-height:110px}}.heatmap{max-width:980px;height:auto;min-height:250px;&:hover{& text{opacity:1}}& text{font-size:7px;fill:var(--primary);opacity:.3;transition:.2s all ease-in-out;text-transform:uppercase;text-rendering:optimizeLegibility}& rect{transition:.2s all ease-in-out;stroke:#0000;stroke-width:1px}& rect:hover{stroke:var(--primary);stroke-width:1px;cursor:pointer}}.calendar{width:100%;margin:0 auto;max-width:1120px;position:relative;overflow-x:auto;text-align:center}.smallText{font-size:5px}.color-0{fill:var(--info);opacity:.1}.color-1{fill:var(--info);opacity:.3}.color-2{fill:var(--info);opacity:.5}.color-3{fill:var(--info);opacity:.8}.color-4{fill:var(--info)}.tooltip{background-color:var(--background);border-radius:5px;border:1px solid var(--primary);box-shadow:0 4px 12px #0006;color:var(--primary);font-size:.8rem;padding:8px 12px;pointer-events:none;position:fixed;transform:translate(-50%);white-space:nowrap;z-index:10000;.date{font-weight:600;margin-bottom:2px}.contribution{font-size:.6rem;opacity:.9}}.page-section[data-astro-cid-2hwget37]{align-items:center;display:flex;flex-direction:column;margin:0 1rem;max-width:1240px;width:100%;h1{flex-basis:100%;width:100%;text-align:center;text-transform:uppercase;font-weight:400;font-size:3em;letter-spacing:1px;margin:3rem 1rem}}@media (min-width: 768px){.page-section[data-astro-cid-2hwget37]{h1{font-size:4em}}}
