.intro{position:relative;background-image:url(/img/jd-puppet-desk.jpg);background-size:cover;background-position:75% 20%;padding:12rem 4rem 2rem;.intro-content{position:relative;z-index:50}h1{font-size:4rem;margin-bottom:1rem;text-wrap:balance;max-width:820px;text-shadow:0 4px 12px #000}p{font-size:1.25rem;font-weight:400;line-height:2rem;max-width:820px;text-wrap:pretty;text-shadow:0 4px 12px #000;span{font-weight:900}}&:after{content:"";z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0,transparent)}}@media (min-width:768px){.intro{min-height:88dvh}}.skills-section{display:flex;flex-direction:column;justify-content:center;background:var(--color-fore);padding:4rem;h2{width:-moz-fit-content;width:fit-content;font-size:2.5rem;margin:0 auto 2rem}}.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:4rem;div{display:flex;gap:8px;flex-direction:column;justify-content:center;align-items:center}img{max-width:60px}}.skills-section{.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1200px;margin:4rem auto 2rem;.skill-card{background:hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:15px;border:1px solid hsla(0,0%,100%,.2);transition:transform .3s}.skill-card h3{margin-bottom:1rem;font-size:1.3rem}.skill-list{list-style:none;display:flex;flex-direction:column}.skill-list li{padding:.5rem 0;background:none;border-bottom:1px solid hsla(0,0%,100%,.2);border-radius:0}.skill-list li:last-child{border-bottom:none}}}@media (max-width:1260px){.skills-section{.skills-grid{grid-template-columns:1fr 1fr}}}@media (max-width:768px){.skills-section{margin-top:28px;.skills-grid{grid-template-columns:1fr}}}@media (min-width:769px) and (max-width:1420px){.intro-content{max-width:640px}}@media (max-width:860px){.intro{margin-top:-60px;display:flex;flex-direction:column;justify-content:flex-end;min-height:105dvh;padding:0;background-position:85%;background-size:cover;.intro-content{display:block;margin-top:60px;padding:24rem 2rem 4rem;height:-moz-fit-content;height:fit-content}h1{font-size:2.2rem;margin-bottom:1rem}p{font-size:1rem;line-height:1.5rem}&:after{content:"";z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0,transparent)}}.skills-section{padding:2rem;p{font-size:1rem;margin-bottom:1rem}}.skills{gap:2rem;display:grid;grid-template-columns:1fr 1fr 1fr;img{max-width:40px}}}.photo-interlude-1{z-index:0;position:relative;height:840px;background-image:url(/img/jd-puppet-karaoke.jpg);background-size:cover;background-position:50%;&:after{content:"";z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(0deg,#000 0,transparent 30%)}}.photo-interlude-2{z-index:0;position:relative;height:640px;background-image:url(/img/jd-puppet-paint.jpg);background-size:cover;background-position:50%}@media (max-width:500px){.photo-interlude-2{height:440px}}.projects{display:flex;flex-direction:column;justify-content:center;padding:4rem;background:var(--color-fore);h2{width:-moz-fit-content;width:fit-content;font-size:2.5rem;margin:0 auto 2rem}}@media (max-width:768px){.projects{padding:4rem 1rem}}.project-section{display:flex;flex-direction:row;gap:8px;background-color:var(--color-black);color:var(--color-white);padding:2rem;align-items:center;justify-content:center;border-radius:1rem;&.vertical{flex-direction:column;align-items:flex-start}}.project-content{display:flex;flex-direction:column;padding-right:1rem;flex-grow:1}.project-media{flex-grow:1}.project-title{font-size:2rem;margin-bottom:.5rem}.project-subtitle{text-transform:uppercase;font-size:1rem;margin-bottom:1rem}.project-description{margin-bottom:1rem;font-size:.9rem;flex-grow:1}.skill-list{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}.skill-list li{padding:.25rem .75rem;font-size:.75rem;font-family:var(--font-headline);font-weight:700;background-color:var(--color-primary);border-radius:999px}.project-image,.project-video{width:100%;height:auto;min-width:380px}@media (max-width:860px){.project-image,.project-video{min-width:unset}}.project-image-bordered{border:1px solid rgba(0,0,0,.2)}.offsite-button{padding:.75rem 1.5rem;font-family:var(--font-family-headline);text-transform:uppercase;font-size:.8rem;font-weight:700;background-color:var(--color-secondary);color:var(--color-black);transition:background-color .3s;border-radius:1.5rem;&:hover{background-color:var(--color-primary);color:#fff}}@media (max-width:768px){.project-section{flex-direction:column;.project-content{order:2}.project-media{order:1;width:100%;margin-bottom:1rem;video{max-height:60vh}}}}