:root{--card-padding: 24px;--card-gap: 16px;--card-content-gap: 8px;--card-default-border-radius: 16px;--card-container-padding: 24px;--anchor-card-height: 70vh;--about-card-width: 80%;--center-gap: calc(var(--card-gap) / 2);--menu-btn-width: 50px;--menu-btn-height: 50px;--menu-padding: 12px;--menu-bottom-offset: 16px;--menu-height: calc( var(--menu-btn-height) + 2 * var(--menu-padding) + var(--menu-bottom-offset) )}*{word-wrap:normal;margin:0;padding:0;box-sizing:border-box}em{font-style:italic}html,body{margin:0;padding:0;width:100vw;height:fit-content;min-height:100vh;overflow-x:hidden;scroll-behavior:smooth;background-color:var(--main)}body::-webkit-scrollbar{width:8px;background-color:transparent}body::-webkit-scrollbar-thumb{background-color:var(--alt);border-radius:4px}section{width:100vw;height:fit-content;min-height:100vh}strong{font-weight:600}*{font-size:18px;line-height:27px;color:#bebebe;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;text-decoration:none}h1{font-size:64px;line-height:84px;font-weight:600;color:var(--alt)}h2{font-size:29px;line-height:39px;font-weight:600;color:var(--alt)}h3{font-size:24px;line-height:33px;font-weight:600;color:var(--alt)}.font-alt{color:var(--alt)}.font-italicize{font-style:italic}.card{background-color:var(--primary-dark);border:solid 1px var(--border);border-radius:var(--card-default-border-radius);padding:var(--card-padding)}.card-sizing{width:clamp(0px,var(--about-card-width),540px)}.card-container{display:flex}.flex-tags-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--card-content-gap)}.flex-tags-container span{font-size:14px;padding:2px 8px;background-color:var(--primary-dark);border-radius:calc(var(--card-default-border-radius) / 2);border:solid 1px var(--border);cursor:default;transition:var(--hover-transition-time)}.flex-tags-container span:hover{color:var(--color-highlight)}@media (max-width: 767px){h1{font-size:36px;line-height:48px}h2{font-size:29px;line-height:39px}h3{font-size:31px;line-height:43px}.card-container{padding-top:var(--card-gap)!important;padding-bottom:calc(var(--card-gap) + var(--menu-height))!important;padding-left:var(--card-container-padding)!important;padding-right:var(--card-container-padding)!important;gap:var(--card-gap)!important}.card-sizing{width:clamp(0px,100%,540px)!important}}:root{--hover-transition-time: .15s;--page-transition-time: .5s}@keyframes slide-in{0%{padding-top:100px;opacity:0}to{padding-top:0;opacity:1}}@keyframes fade-in{0%{margin-top:100px;opacity:0}to{margin-top:0;opacity:1}}@keyframes fade-in-inverse{0%{margin-top:-100px;opacity:0}to{margin-top:0;opacity:1}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes highlight{0%{color:inherit}to{color:var(--fill1)}}@keyframes move-in{0%{bottom:-200%;opacity:0}to{bottom:0;opacity:1}}@keyframes move-out{0%{bottom:0;opacity:1}to{bottom:200%;opacity:0}}@keyframes dot-anim{0%{background-color:var(--secondary-dark)}50%{background-color:var(--color-highlight);scale:1.2}to{background-color:var(--secondary-dark)}}:root{--main: rgb(12, 12, 12);--alt: white;--border: rgb(53, 53, 53);--primary-dark: rgba(39, 39, 39, .7);--secondary-dark: rgba(59, 59, 59, .7);--fill1: #dbb46b;--fill2: #6bdb84;--fill3: #ee6bb7;--fill4: rgb(45, 191, 194);--fill5: #ff5d5d;--fill6: #8f49b8;--grad1: linear-gradient( 55deg, rgba(219, 180, 107, 1) 0%, rgba(219, 196, 153, 1) 100% );--grad2: linear-gradient( 210deg, rgba(107, 219, 132, 1) 0%, rgb(173, 212, 181) 100% );--grad3: linear-gradient( 135deg, rgba(238, 107, 183, 1) 0%, rgba(232, 169, 206, 1) 100% );--grad4: linear-gradient( 75deg, rgb(45, 191, 194) 0%, rgba(179, 211, 212, 1) 100% );--grad5: linear-gradient( 309deg, rgba(255, 93, 93, 1) 0%, rgba(255, 166, 166, 1) 100% );--grad6: linear-gradient( 11deg, rgba(143, 73, 184, 1) 0%, rgba(182, 160, 195, 1) 100% )}.color-highlight>*:nth-child(6n+1){--color-highlight: var(--fill1)}.color-highlight>*:nth-child(6n+2){--color-highlight: var(--fill2)}.color-highlight>*:nth-child(6n+3){--color-highlight: var(--fill3)}.color-highlight>*:nth-child(6n+4){--color-highlight: var(--fill4)}.color-highlight>*:nth-child(6n+5){--color-highlight: var(--fill5)}.color-highlight>*:nth-child(6n+6){--color-highlight: var(--fill6)}.grad-highlight>*:nth-child(6n+1){--grad-highlight: var(--grad1)}.grad-highlight>*:nth-child(6n+2){--grad-highlight: var(--grad2)}.grad-highlight>*:nth-child(6n+3){--grad-highlight: var(--grad3)}.grad-highlight>*:nth-child(6n+4){--grad-highlight: var(--grad4)}.grad-highlight>*:nth-child(6n+5){--grad-highlight: var(--grad5)}.grad-highlight>*:nth-child(6n+6){--grad-highlight: var(--grad6)}#menu{z-index:999;position:fixed;bottom:var(--menu-bottom-offset);width:100%;height:fit-content;pointer-events:none}.menu-container{position:relative;width:fit-content;height:fit-content;padding:var(--menu-padding);margin:0 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--card-content-gap);border-radius:24px;background-color:var(--primary-dark);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:var(--hover-transition-time)}.inactive>.menu-container{width:100px;cursor:pointer;height:54px;margin:10px auto}.inactive>.menu-container:hover{color:var(--fill5)}.menu-btn{position:relative;width:var(--menu-btn-width);height:var(--menu-btn-height);border-radius:var(--card-default-border-radius);pointer-events:all;-webkit-user-select:none;user-select:none;display:grid;place-items:center;transition:var(--hover-transition-time);cursor:pointer}.menu-btn:hover>.label{top:-46px;opacity:1}.menu-btn:hover{background-color:var(--secondary-dark)}.menu-btn.current{background-color:var(--color-highlight)}.divider{width:2px;height:36px;background-color:var(--border)}.icon{display:block;width:50%;height:50%;-webkit-user-select:none;user-select:none;transition:inherit;filter:invert(1)}.label{position:absolute;left:50%;transform:translate(-50%);padding:4px;pointer-events:none;font-size:.8rem;color:#8d8d8d;background-color:var(--primary-dark);border:solid 1px var(--border);border-radius:8px;top:-28px;opacity:0;transition:.2s}#landing-page{width:100%;height:fit-content}.landing-content-container{display:grid;place-items:center;height:fit-content;min-height:100vh;animation:slide-in var(--page-transition-time) ease-out forwards}.landing-content-wrapper{width:fit-content;padding:var(--card-padding);display:flex;flex-direction:row;flex-wrap:wrap-reverse;align-items:center;justify-content:center;gap:calc(4 * var(--card-content-gap))}.text-wrapper{width:100%;max-width:600px;display:flex;flex-wrap:wrap;flex-direction:column;align-items:start;justify-content:center;gap:var(--card-content-gap)}.text-wrapper span{font-size:inherit;color:inherit;animation:highlight 1s ease forwards}.text-wrapper h1{margin-left:-3px}.landing-btn>p{transition:color var(--hover-transition-time)}.landing-btn>p:hover{color:var(--fill1)}.img-wrapper{width:100%;max-width:380px}.img-wrapper img{display:block;width:100%;object-fit:fill}.experience-item{display:flex;flex-direction:column;gap:var(--card-content-gap);position:relative;border-left:3px solid var(--border);transition:all .3s ease;padding-left:40px}.experience-item:hover{transform:translateY(-5px);border-left-color:var(--color-highlight)}.experience-item:before{content:"";position:absolute;left:-12px;top:24px;width:20px;height:20px;border-radius:50%;background-color:var(--secondary-dark);border:3px solid var(--main);z-index:1;transition:background-color .3s ease}.experience-item:hover:before{background-color:var(--color-highlight)}.experience-header,.experience-subheader{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}.experience-title{color:var(--alt)}.experience-company{color:var(--alt);font-weight:500}.experience-dates,.experience-location{font-style:italic;color:#bebebe;font-size:.9rem}.experience-points{list-style-type:none;padding-left:0;margin-top:8px}.experience-points li{margin-bottom:.75rem;position:relative;padding-left:20px}.experience-points li:before{content:"›";position:absolute;left:0;color:var(--color-highlight);font-weight:700;font-size:1.2rem;line-height:1}#experiences{width:100%;padding:40px 0;animation:fade-in var(--page-transition-time) ease-out forwards}#experiences-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding-bottom:calc(var(--card-gap) + var(--menu-height))}.experiences-title{text-align:center;margin-bottom:40px;position:relative}.experiences-title:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:-10px;width:80px;height:4px;background:var(--fill1)}#experiences-card-wrapper{display:flex;flex-direction:column;gap:var(--card-gap);width:100%;max-width:900px;padding:0 var(--card-container-padding)}@media (max-width: 767px){#experiences-card-wrapper{padding:0 var(--card-container-padding)}}#projects{padding:40px 0}.projects-title{text-align:center;margin-bottom:40px;position:relative}.projects-title:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:-10px;width:80px;height:4px;background:var(--fill2)}.projects-container{width:100%;height:fit-content;padding:0 40px;display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--card-gap);padding-top:var(--card-gap)!important;padding-bottom:calc(var(--card-gap) + var(--menu-height))!important;animation:fade-in var(--page-transition-time) ease-out forwards}.project-item{width:100%;max-width:1200px;display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:calc(3 * var(--card-content-gap));overflow:hidden}.project-item:nth-child(2n){flex-direction:row-reverse}.project-info-wrapper{flex:1.2;display:flex;align-items:center;justify-content:center}.project-info{word-break:keep-all;width:fit-content;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:var(--card-content-gap)}.project-title{position:relative;word-break:keep-all}.project-title:after{content:"";position:absolute;left:0;bottom:0;width:40%;height:3px;background:var(--grad-highlight)}.project-desc{word-break:keep-all}.project-link{transition:.2s;padding:8px 16px;background-color:var(--primary-dark);border:solid 1px var(--border);border-radius:calc(var(--card-default-border-radius) * 3 / 4);color:var(--alt);font-weight:600}.project-link:hover{color:var(--color-highlight)}.project-img{display:grid;place-items:center;flex:1;padding:0 var(--card-padding);background:var(--grad-highlight);border-radius:var(--card-default-border-radius)}.project-img>img{display:inline-block;width:100%;object-fit:contain}#nav-bar{z-index:998;position:fixed;top:50%;right:0;translate:0 -50%;width:40px;display:flex;flex-direction:column;align-items:center;gap:20px}.nav-btn{width:16px;height:16px;background-color:var(--primary-dark);border:solid 1px var(--border);rotate:0deg;border-radius:4px;cursor:pointer;transition:var(--hover-transition-time)}.nav-btn:hover{rotate:45deg;border:solid 1px transparent;border-radius:0;background-color:var(--color-highlight)}@media (max-width: 767px){.projects-container{padding:0}.project-info-wrapper{place-items:start}.project-item{flex-direction:column}.project-item:nth-child(2n){flex-direction:column}.project-info{padding:0;width:100%}#nav-bar{pointer-events:none;visibility:hidden}}@media (max-width: 480px){.project-link{font-weight:400}}#profile-card{height:var(--anchor-card-height);aspect-ratio:1/1.2}#profile-card>img{display:block;width:100%;height:80%;object-fit:cover;border-radius:calc(var(--card-default-border-radius) * 3 / 4)}.profile-content{overflow-x:auto;pointer-events:all;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;gap:var(--card-content-gap);width:100%;height:20%;margin:var(--card-content-gap) 0}.profile-content::-webkit-scrollbar{height:8px;background-color:transparent}.profile-content::-webkit-scrollbar-thumb{background-color:var(--alt);border-radius:4px}.profile-content>h2{word-wrap:break-word}.socials-container{display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--card-content-gap)}.social-link{display:grid;place-content:center;background-color:var(--primary-dark);border:solid 1px var(--border);border-radius:var(--card-default-border-radius);padding:8px;width:fit-content;height:fit-content;pointer-events:all;transition:var(--hover-transition-time)}.social-link:hover{background-color:var(--color-highlight)}.social-img{display:block;width:30px;height:30px;object-fit:cover;filter:invert(1)}#anchored-card-wrapper{position:fixed;padding-right:var(--center-gap);display:flex;align-items:center;justify-content:end;width:50%;height:100%;pointer-events:none;animation:fade-in-inverse var(--page-transition-time) ease-out forwards}#about-card-container{position:absolute;top:calc((100vh - var(--anchor-card-height)) / 2);right:0;width:50%;height:fit-content;padding-bottom:calc((100vh - var(--anchor-card-height)) / 2);padding-left:var(--center-gap);display:flex;justify-content:start;animation:fade-in var(--page-transition-time) ease-out forwards}#about-card-wrapper{width:100%;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:var(--card-gap)}.about.card{display:flex;flex-direction:column;gap:var(--card-content-gap)}.about-content,.about-paragraph{display:grid;gap:var(--card-content-gap)}.about.card .divider{margin:0 auto;width:100%;height:1px}.about-content a{transition:var(--hover-transition-time)}.about-content a:hover{color:var(--color-highlight)}.about-subtitle{margin-bottom:var(--card-content-gap)}.focus-item{display:flex;flex-direction:column;gap:var(--card-content-gap)}.focus-bar{display:flex;align-items:center;gap:var(--card-content-gap)}.focus-bar p{vertical-align:center;line-height:14px}.focus-bar div{width:inherit;height:100%;background-color:var(--color-highlight);border-radius:8px}@media (max-width: 767px){#about-container{display:flex;flex-direction:column;align-items:center;animation:fade-in var(--page-transition-time) ease-out forwards}#anchored-card-wrapper{width:100%;position:static;justify-content:center;padding:0;pointer-events:all}#about-card-container{width:100%;position:static;padding:0}#about-card-wrapper{align-items:center}}#contact-form-wrapper{height:var(--anchor-card-height);min-height:450px}#contact-form{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--card-gap)}.form-section{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--card-gap)}.form-field{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:4px}.form-field input,button.form-field{padding:8px;border-radius:8px}.form-section h3,.form-field.form-field>*{width:100%!important;color:var(--alt)}.form-section h3 span{color:var(--fill5);font-size:inherit}.form-section:nth-child(3){flex-grow:1;flex-shrink:1;height:100%}#message-block{word-wrap:break-word;overflow-y:auto;height:100%}button.form-field{--btn-anim-dur: .3s;position:relative;cursor:pointer;overflow:hidden;transition:background-color var(--hover-transition-time),color var(--hover-transition-time),scale .1s}button.form-field:hover{background-color:var(--secondary-dark)}button.form-field:active{scale:.95}button.form-field:nth-child(1):hover span{color:var(--fill5)}button.form-field:nth-child(2):hover span{color:var(--fill2)}button.form-field.disabled,button.form-field.success,button.form-field.fail,button.form-field.restore{pointer-events:none}#submit-btn span{position:relative}#submit-btn.disabled span,#submit-btn.success span,#submit-btn.fail span{animation:move-out var(--btn-anim-dur) ease forwards}#submit-btn.restore span{animation:move-in var(--btn-anim-dur) ease forwards}.loading-bar{position:absolute;left:0;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;bottom:-200%;opacity:0}.disabled .loading-bar{animation:move-in var(--btn-anim-dur) ease forwards}.success .loading-bar,.fail .loading-bar{animation:move-out var(--btn-anim-dur) ease forwards}.loading-dot{--anim-dur: 2s;--delay-inc: .1s;width:10px;height:10px;border-radius:50%;background-color:var(--secondary-dark)}.disabled .loading-dot{animation:dot-anim var(--anim-dur) ease var(--btn-anim-dur) infinite}.disabled .loading-dot:nth-child(1){--color-highlight: var(--fill2)}.disabled .loading-dot:nth-child(2){--color-highlight: var(--fill2);animation-delay:calc(var(--btn-anim-dur) + var(--delay-inc) * 2)}.disabled .loading-dot:nth-child(3){--color-highlight: var(--fill2);animation-delay:calc(var(--btn-anim-dur) + var(--delay-inc) * 3)}.submit-state{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:center;bottom:-200%;opacity:0}.success .submit-state,.fail .submit-state{animation:move-in var(--btn-anim-dur) ease forwards}.restore .submit-state{animation:move-out var(--btn-anim-dur) ease forwards}.submit-state div{position:absolute;visibility:hidden}.success-state{color:var(--fill2)}.success .success-state{visibility:visible}.failed-state{color:var(--fill5)}.fail .failed-state{visibility:visible}#clear-btn span{position:relative;bottom:0}#clear-btn span:nth-child(2){height:100%;position:absolute;display:flex;align-items:center;justify-content:center;color:var(--secondary-dark);bottom:-200%}#clear-btn.disabled span:nth-child(1),#clear-btn.success span:nth-child(1),#clear-btn.fail span:nth-child(1){animation:move-out var(--btn-anim-dur) ease forwards}#clear-btn.disabled span:nth-child(2),#clear-btn.success span:nth-child(2),#clear-btn.fail span:nth-child(2){animation:move-in var(--btn-anim-dur) ease forwards}#clear-btn.restore span:nth-child(1){animation:move-in var(--btn-anim-dur) ease forwards}#clear-btn.restore span:nth-child(2){animation:move-out var(--btn-anim-dur) ease forwards}@media (max-width: 480px){#contact-form-wrapper{height:max(fit-content,var(--anchor-card-height))}.form-section{flex-direction:column}.form-section:nth-child(3){height:auto}#message-block{min-height:300px}}#contact{width:100vw;height:fit-content;animation:none}#contact #profile-card{min-height:450px}.contact-cards-wrapper{width:100%;height:fit-content;min-height:100vh;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--card-gap)}.contact-cards-wrapper .card{--about-card-width: 40% }#profile-card{animation:fade-in var(--page-transition-time) ease-out forwards}#contact-form-wrapper{animation:fade-in-inverse var(--page-transition-time) ease-out forwards}@media (max-width: 767px){#contact-form-wrapper{animation:fade-in var(--page-transition-time) ease-out forwards}}