:root{font-family:Nunito,monospace,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#545044;background:#cfc9b2;background:linear-gradient(90deg,#d6cfb6,#e8e1be 15% 85%,#d6cfb6);--font-primary: rgb(84, 80, 68);--fg-primary: rgb(252, 248, 204);--fg-secondary: rgb(194, 190, 159);--bg-primary: rgb(105, 102, 83);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{text-align:center;margin:0 auto;min-height:100vh}#app{max-width:1280px;margin:0 auto;text-align:center}a{text-decoration:inherit}section{padding-bottom:2em;border-bottom:2px solid var(--fg-secondary);padding-top:1em}h1{font-size:4.2em;font-family:Montserrat;text-transform:uppercase;width:fit-content;margin:0 auto}h1,h2{font-family:Montserrat;line-height:1.1;text-transform:uppercase}h3{background-color:var(--bg-primary);color:var(--fg-primary);font-weight:500;letter-spacing:2px;width:fit-content;margin:0 auto .5em;padding:0 1em;font-size:1.6em}button{cursor:pointer}img{filter:grayscale(80%) sepia(30%);opacity:.8}#hero{margin-top:20vh;margin-bottom:4em}.shortcut-links{display:flex;justify-content:space-around;align-items:center;width:fit-content;gap:12px;margin:0 auto 1em;list-style:none}.shortcut-links a,.shortcut-links button{display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;min-height:unset;min-width:unset;box-shadow:none}.shortcut-links button:hover{border:none;background:none}.shortcut-icon{font-size:38px;padding:.2em;background-color:var(--fg-secondary);color:var(--font-primary);transition:.2s;border:2px solid var(--font-primary);box-shadow:4px 5px #1a1a1a23}.shortcut-icon:hover{background-color:var(--bg-primary);color:var(--fg-primary);border:2px solid transparent}.email-status{transform:translate(100%);opacity:0;transition:transform .2s ease-out,opacity .1s ease-out}.show{transform:translate(0);opacity:1}nav{display:flex;justify-content:center;align-items:center;border-bottom:2px solid var(--fg-secondary);position:sticky;top:0;padding-top:1em;padding-bottom:.2em;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background-color:#e3dcbcbd;z-index:4;letter-spacing:2px}nav ul{display:flex;justify-content:space-around;align-items:center;gap:1em;list-style:none;width:100%;margin-bottom:.5em;border-left:8px double var(--font-primary)}nav a{color:var(--font-primary);text-transform:uppercase;background-color:var(--fg-secondary);padding:.2em 2em .2em 1em;border-left:4px double #1a1a1a;transition:.2s;font-weight:700}nav a:hover{background-color:var(--fg-primary);color:#1a1a1a;box-shadow:5px 0 5px #1a1a1a23;padding-bottom:.7em}h2{text-shadow:5px 4px 1px #1a1a1a23;font-weight:600;text-align:center;letter-spacing:12px;line-height:1.3;margin-bottom:.5em;border:2px double transparent;padding:8px 0;position:relative;overflow:hidden;z-index:0;font-size:2em}.hover-slide{position:relative;overflow:hidden}.hover-slide:hover:before{transform:translate(0)}.hover-slide:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#1a1a1a85;transform:translate(-105%);transition:transform .2s ease-in}.hover-slide:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background-color:#1a1a1a85;transform:translate(105%);transition:transform .2s ease-out}.hover-slide:hover:after{transform:translate(0)}button{background-color:var(--bg-primary);color:var(--fg-primary);min-height:40px;min-width:40px;padding:.5em 1em;font-weight:700;text-transform:capitalize;font-family:inherit;font-size:1.2em;border:none;box-shadow:4px 5px #1a1a1a23;transition:.2s;border:1px solid transparent}button:hover{background-color:var(--fg-primary);color:#1a1a1a;border:1px solid black;cursor:pointer}.cta{display:flex;justify-content:center;text-align:left;padding-block:3em;gap:1em}.cta button{margin-right:1em;margin-top:.5em}.cta h2{text-align:left;letter-spacing:4px;font-size:1.6em}.cta p{font-size:1.2em;font-weight:600;max-width:50ch;margin-right:1em}.section-title{margin-inline:6vw}.projects{max-width:1280px;text-align:left}.project-card{position:relative;padding:.2em 1em 2em;background-color:var(--fg-primary);margin:0 0 0 1em;box-shadow:.4em .4em 2px #1a1a1a23;width:100%;opacity:0;transform:translate(30%);position:absolute}.active-card{display:flex;flex-direction:column;gap:7px;text-align:left;font-weight:600;font-size:1.2em;width:100%;height:500px;min-height:300px;padding:.7em 1.5em 1em;opacity:1;transform:translate(0);position:relative;transition:display .1s linear,opacity .5s linear,transform .45s ease-in-out}.active-card p{margin-top:6px;margin-bottom:8px;line-height:1.2;max-width:50ch}.project-content{display:flex;overflow:hidden;border-block:2px solid #12121223;padding:1em 0}.project-description{overflow-y:scroll;max-width:60ch;padding-right:1em}.projects-menu .active-tab{background-color:var(--bg-primary);color:var(--fg-primary)}.projects-container{display:grid;grid-template-columns:1fr 3fr;grid-template-rows:500px;align-items:start;justify-content:center;border-left:8px double var(--font-primary);margin-top:1.5em;overflow:hidden;padding:0 1em .5em}.projects-menu{background-color:var(--fg-primary);list-style:none;box-shadow:.4em 4px #1a1a1a23;padding:.2em .5em 1.2em 0;overflow-y:scroll;overflow-x:hidden}.projects-menu,.active-card{height:100%;max-height:500px;width:100%}.project-description::-webkit-scrollbar,.projects-menu::-webkit-scrollbar{width:5px}.project-description::-webkit-scrollbar-thumb,.projects-menu::-webkit-scrollbar-thumb{background-color:#1a1a1a23;border-radius:50px}.projects-menu::-webkit-scrollbar-thumb:hover{background-color:#1a1a1a50;border-radius:50px}.project-description::-webkit-scrollbar-track,.projects-menu::-webkit-scrollbar-track{background-color:var(--fg-primary);margin-block:3px}.projects-menu li{padding:4px 0}.projects-menu button{width:100%;background-color:var(--fg-primary);color:var(--font-primary);box-shadow:none;margin:2px 0;border:none;text-align:left}.projects-menu .project-menu-lbl{text-align:left;padding-left:.7em;margin-left:.2em;margin-bottom:0;border-bottom:2px solid #12121223;color:#1a1a1a70;font-style:italic}.projects-menu button:hover{background-color:var(--bg-primary);color:var(--fg-primary)}.project-cards-wrapper{position:relative;min-height:300px;max-height:700px}.project-title{width:100%;background-color:var(--fg-secondary);color:var(--font-primary);font-weight:600;margin:0;border-left:6px double black}.project-preview{display:flex;flex-direction:column;gap:15px;justify-content:center;align-items:center}.project-preview a{color:#1a1a1a;text-decoration:underline;font-style:italic}.project-thumbnail{margin:0 1em 0 auto;border:1px solid var(--font-primary);box-shadow:5px 5px #1a1a1a23;filter:sepia(0);height:300px;aspect-ratio:1/1;width:250px;border-radius:5px;object-fit:cover;object-position:top;position:relative}.techstack-ul{margin-bottom:15px;display:flex;width:100%;flex-wrap:wrap;gap:1em;list-style-type:none;background-color:#c2be9f80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:8px;position:sticky;top:0}.pill{border:1px solid transparent;padding:2px .7em 2px .5em;display:flex;gap:5px;align-items:center;justify-content:space-between;box-shadow:3px 2px #1a1a1a23;transition:.2s;font-weight:700;background-color:var(--bg-primary);color:var(--fg-primary)}.pill:hover{background-color:var(--fg-primary);color:var(--font-primary);border-color:#1a1a1a}.techstack-ul li i{font-size:1.2em;background:none;border:none;box-shadow:none}#about{max-width:1080px;text-align:left}.about-info{display:flex;align-items:start;justify-content:center}.about-info img{width:20%;display:inline-block;vertical-align:top;border:4px solid var(--fg-primary);box-shadow:5px 5px #1a1a1a23;filter:grayscale(40%)}.about-info div{background-color:var(--fg-primary);box-shadow:5px 5px #1a1a1a23;padding:1.2em 1em 2em;font-weight:600;display:inline-block;margin-left:1em}.about-info p{max-width:60ch;margin:0 auto 12px;line-height:1.2;font-size:1.1em}.about-info a{color:var(--font-primary);text-decoration:underline;font-weight:700;transition:.2s}.about-info a:hover{background-color:var(--bg-primary);color:var(--fg-primary);padding:0 6px 0 3px}footer{margin-top:6px;padding:.5em 0 1em;font-size:1.2rem;font-weight:600;background:var(--fg-secondary);border-top:2px solid var(--bg-primary);width:100%;margin-bottom:0}
