@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Roboto:wght@100;300;400;500;700&family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{width:100%;margin:0 auto;padding:0 15px}.container:before,.container:after{content:"";display:table}@media (width>=576px){.container{max-width:540px}}@media (width>=768px){.container{max-width:720px}}@media (width>=992px){.container{max-width:960px}}@media (width>=1200px){.container{max-width:1140px}}.flex-row,.flex-column{justify-content:center;align-items:center;display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}:root{--blue:#2f74b5;--blue-hover:#2c5d87;--blue-fill:#2c5d87;--blue-deep:#2c5d87;--blue-soft:#7fa9d1;--blue-softer:#bfd4e8;--lightblue:#2c5d8759;--darkblue:#234a6c;--gray:#888;--lightgray:#ccc;--darkgray:#666;--background:#fff;--surface:#f8f8f8;--navbar-bg:#f8f8f8;--box-bg:#f6f6f6;--menu-bg:#f6f6f6;--menu-bg-hover:#f0f0f0;--btn-bg:#efefef;--btn-bg-hover:#e4e4e4;--text-color:#242424;--text-color-secondary:#444;--text-color-bg:#222;--error-text:#c70000;--border-soft:#ccc;--border-medium:#888;--border-hard:#666}:root[data-theme=dark]{--blue-softer:#7fa9d159;--blue-deep:#7fa9d1;--blue:#7fa9d1;--blue-hover:#a6c4e1;--lightblue:#7fa9d166;--background:#292929;--surface:#121212;--navbar-bg:#1f1f1f;--box-bg:#1f1f1f;--menu-bg:#2d2d2d;--menu-bg-hover:#353535;--btn-bg:#242424;--btn-bg-hover:#1c1c1c;--text-color:#e1e1e1;--text-color-secondary:#a5a5a5;--text-color-bg:#e8e8e8;--border-soft:#333;--border-medium:#777;--border-hard:#999}ul{margin:0;padding:0;list-style:none}a{color:var(--blue);text-decoration:none;display:inline-block}a:hover{color:var(--blue-hover);text-decoration:underline}input,select,textarea,button,.btn{font:inherit;color:inherit;background:var(--background);border:1px solid var(--border-soft);border-radius:2px;outline:none;padding:4px 10px}input::placeholder,textarea::placeholder{color:var(--border-medium);font-size:15px}input[type=submit],button,.btn{background-color:var(--btn-bg);cursor:pointer;border-radius:4px;padding:8px 12px;transition:color .2s,background-color .2s,border-color .2s}input[type=submit]:hover,button:hover,.btn:hover{background-color:var(--btn-bg-hover);text-decoration:none}textarea{resize:vertical}img{vertical-align:middle;max-width:100%}h1{margin:10px 0 20px;font-size:2.5rem;font-weight:500}h2{margin:10px 0 20px;font-size:1.6rem}.h2-underline{text-align:center}.h2-underline:not(#about-me .h2-underline){margin-top:0}.h2-underline:after{content:"";background:var(--border-soft);width:80px;height:4px;margin:0 auto;transition:width .4s .6s;display:table}p{margin:0 0 10px;font-size:1rem}.navbar-toggler{background-color:var(--surface);border:1px solid var(--border-soft);cursor:pointer;border-radius:.25rem;padding:.5rem .625rem}.toggler-bar{background-color:var(--text-color);border-radius:1px;width:1.375rem;height:.125rem;display:block}.toggler-bar+.toggler-bar{margin-top:.25rem}hr{border:0;border-bottom:1px solid var(--border-soft);margin:1rem 0}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.skip-link{z-index:100;background:var(--background);padding:8px 12px;position:absolute;top:8px;left:8px;transform:translateY(-200%)}.skip-link:focus{transform:none}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes popup{0%{opacity:.4}to{opacity:1}}@keyframes slide-right{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes expand-width{0%{width:0}to{width:80px}}@keyframes shake{0%{transform:rotate(-2deg)}to{transform:rotate(8deg)}}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;font-size:100%}body{letter-spacing:.5px;word-spacing:.5px;color:var(--text-color);background-color:var(--background);margin:0;font-family:Roboto,Arial,sans-serif;font-weight:400;line-height:1.5}section{padding:60px 0}header{min-height:650px}nav{z-index:99;background-color:#0000;width:100%;padding:25px 0;transition:padding .25s,background-color .25s,box-shadow .25s;position:fixed;top:0;left:0}.navbar{margin:0 -15px}.logo-container{padding:0 15px}.brand,.brand:hover{color:var(--text-color);gap:10px;text-decoration:none}.brand-name{letter-spacing:.01em;white-space:nowrap;font-size:1.3rem}.brand-first{font-weight:700}.brand-last{font-weight:300}.brand-name .brand-last{margin-left:4px}.brand-dot{color:var(--blue);font-weight:700}nav.scrolled{background-color:var(--navbar-bg);box-shadow:0 1px 2px var(--border-soft);padding:4px 0}.navbar-toggler{margin-left:auto}.main-nav.show-main-nav{visibility:visible;border-top:1px solid var(--border-soft);height:208px;display:flex}.main-nav{visibility:hidden;background-color:var(--menu-bg);width:100%;height:0;box-shadow:0px 1px 2px var(--border-soft);flex-direction:column;transition:top .2s,height .2s,visibility .2s;position:absolute;top:100%;left:0;overflow:hidden}.main-nav li{width:100%}.main-nav a{color:inherit;text-align:center;padding:10px 15px;font-size:1.125rem;text-decoration:none;transition:color .3s;display:block}.main-nav a:hover{background-color:var(--menu-bg-hover)}.main-nav a.active{color:var(--blue)}.light-dark-mode{padding:0 15px}.theme-switch,.theme-switch:hover{border:1px solid var(--border-medium);cursor:pointer;background:0 0;border-radius:30px;width:52px;height:28px;padding:0;transition:border-color .2s;display:block;position:relative}.theme-switch:hover{border-color:var(--text-color)}.theme-switch-knob{width:22px;height:22px;color:var(--background);background:var(--text-color);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;transition:transform .3s;display:flex;position:absolute;top:2px;left:2px}.theme-switch.is-dark .theme-switch-knob{transform:translate(24px)}.logo-container .brand{display:flex}.hero-container{margin-top:120px;position:relative}.hero-content{max-width:640px}.hero-image,.animated-loading{width:160px;margin:20px}.hero-image img{transform-origin:50%;border-radius:40%;animation:.4s ease-in-out popup}.animated-loading img{width:80%;margin:20px auto 0;display:block}.hero-title{text-align:center}.hero-heading{margin:0;font-size:1.8rem;line-height:1.4}.small-text{letter-spacing:1px;font-weight:500}.thin-text{font-weight:300}.hero-details{max-width:80%;margin-top:20px}.hero-desc{text-align:center}.hero-image{position:relative}.hero-socials{gap:8px;display:flex;position:absolute;bottom:8px;right:-6px}.hero-social-tile{background:var(--background);width:38px;height:38px;box-shadow:2px 2px 6px var(--border-soft);border-radius:10px;justify-content:center;align-items:center;font-size:1.15rem;transition:color .2s;display:inline-flex}.hero-social-tile.github{color:var(--text-color);transform:rotate(-6deg)}.hero-social-tile.linkedin{color:#1182c9;transform:rotate(5deg)}.hero-social-tile:hover{color:var(--blue)}.hero-actions{flex-wrap:wrap;gap:12px 24px;margin-top:24px}.hero-button,.hero-button:hover{color:#fff;background-color:var(--blue-fill);border-radius:30px;align-items:center;gap:12px;padding:5px 5px 5px 20px;font-weight:500;text-decoration:none;transition:background-color .2s;display:inline-flex}.hero-button:hover{background-color:var(--darkblue)}.hero-button-chip{width:32px;height:32px;color:var(--blue-fill);background-color:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;display:inline-flex}.hero-link{color:var(--text-color);text-decoration:underline;-webkit-text-decoration-color:var(--border-medium);text-decoration-color:var(--border-medium);text-underline-offset:6px;align-items:center;gap:8px;padding:6px 2px;font-weight:500;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s;display:inline-flex}.hero-link:hover{color:var(--blue);-webkit-text-decoration-color:var(--blue);text-decoration-color:var(--blue)}.my-skills-content{background:var(--box-bg);border-radius:10px;width:760px;margin:0 -15px;padding:20px 15px 40px}.case-study{background-color:var(--background);width:100%;max-width:760px;box-shadow:2px 2px 6px var(--border-soft);border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:40px;padding:20px 20px 30px;position:relative}.case-study h3{margin:0;font-size:1.5rem;font-weight:500}.case-study-header{margin-bottom:15px}.case-study-meta{flex-wrap:wrap;justify-content:space-between;gap:4px 15px}.case-study-meta a{font-size:.93rem}.case-study-note{color:var(--text-color);align-items:baseline;gap:8px;margin:20px 0 0;font-size:.85rem;font-weight:300;display:flex}.case-study-note svg{color:var(--blue-soft);flex-shrink:0}.case-study-users{flex-direction:column;align-items:flex-start;gap:24px}.case-study-logo{flex-shrink:0;width:180px;height:96px}.case-study-logo img{object-fit:contain;mix-blend-mode:multiply;max-height:100%}:root[data-theme=dark] .case-study-logo img:not(.logo-round){filter:invert()hue-rotate(180deg)brightness(1.1);mix-blend-mode:screen}.case-study-logo .logo-round{clip-path:circle(47%);mix-blend-mode:normal}.tech-used{color:var(--text-color-secondary);text-transform:uppercase;font-size:.8rem}.case-study-steps{flex-wrap:wrap;justify-content:flex-start;gap:8px 0;margin:15px 0 5px;padding:0;list-style:none}.case-study-steps li{align-items:center;display:flex}.step-pill{border:1px solid var(--blue-soft);background:linear-gradient(135deg,#7fa9d138,#7fa9d10f);border-radius:30px;align-items:center;gap:8px;padding:3px 14px 3px 3px;font-size:.93rem;font-weight:500;display:inline-flex}.step-icon{color:#fff;background:var(--blue-fill);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.7rem;display:inline-flex}.step-connector{background:linear-gradient(90deg, transparent 0%, #fffffff2 50%, transparent 100%) no-repeat, var(--blue-soft);background-size:50% 100%,100% 100%;border-radius:2px;width:26px;height:2px;margin:0 8px 0 6px;animation:1.8s linear infinite step-flow;position:relative}.step-connector:after{content:"";border-top:2px solid var(--blue-soft);border-right:2px solid var(--blue-soft);width:6px;height:6px;position:absolute;top:50%;right:-2px;transform:translateY(-50%)rotate(45deg)}.case-study-steps{align-items:flex-start}.step-branch{--outcome-width:124px;position:relative;align-items:flex-start!important}.step-branch .step-pill{font-size:.85rem}@media (width<=575px){.step-branch{zoom:.92}}@media (width<=359px){.step-branch{zoom:.78}}@media (width>=576px){.step-branch{--outcome-width:136px}.step-branch .step-pill{font-size:.93rem}}.step-outcomes{flex-direction:column;gap:10px;display:flex;position:relative}.step-outcomes .step-pill{width:var(--outcome-width)}.step-branch-row{align-items:center;display:flex}.step-outcomes .step-branch-row:first-child .step-connector{width:40px}.step-branch-below{padding-left:54px}.step-curve{fill:none;stroke-width:2px;stroke-linecap:round;width:36px;height:48px;position:absolute;top:14px;left:12px;overflow:visible}.step-curve-line,.step-curve-head{stroke:var(--blue-soft)}.step-curve-head{stroke-linejoin:round}.step-merge-curve{top:14px;left:calc(54px + var(--outcome-width));fill:none;stroke-width:2px;stroke-linecap:round;width:24px;height:48px;position:absolute;overflow:visible}.step-curve-flow{stroke:#fffffff2;stroke-dasharray:12 80;animation:1.8s linear infinite step-curve-flow}@keyframes step-curve-flow{0%{stroke-dashoffset:12px}to{stroke-dashoffset:-80px}}@keyframes step-flow{0%{background-position:-100% 0,0 0}to{background-position:200% 0,0 0}}.case-study h4{margin:20px 0 5px;font-weight:500}.case-study-list li{color:var(--text-color-secondary);font-size:.93rem}.case-study-list li:before{content:"•";padding:0 5px}.case-study-list strong{color:var(--text-color);font-weight:500}.codepen-card{text-align:center;background:var(--box-bg);border-radius:10px;flex-direction:column;gap:15px;width:100%;max-width:760px;padding:25px 20px}.codepen-icon{border:2px solid var(--lightblue);border-radius:50%;flex-shrink:0;width:56px;height:56px;font-size:1.6rem}.codepen-text{flex:1}.codepen-text h3{margin:0 0 2px;font-size:1.1rem;font-weight:500}.codepen-text p{color:var(--text-color-secondary);margin:0;font-size:.93rem}.codepen-button{color:var(--blue);border:1px solid var(--blue);border-radius:30px;flex-shrink:0;padding:6px 18px;font-size:.93rem;transition:color .2s,background-color .2s}.codepen-button:hover{color:#fff;background-color:var(--blue-fill);border-color:var(--blue-fill);text-decoration:none}.tech-stack-title{margin:10px 0 20px;font-size:1.15rem;font-weight:500}.tech-stack-groups{gap:25px;width:100%;max-width:640px;display:grid}.tech-stack-group+.tech-stack-group{margin-top:15px}.tech-stack-group h4{letter-spacing:.12em;text-align:center;text-transform:uppercase;color:var(--text-color-secondary);margin:0 0 12px;font-size:.8rem;font-weight:500}.tech-stack{flex-wrap:wrap;justify-content:center;gap:14px 12px;padding:0 0 10px;display:flex}.tech-chip{background-color:var(--background);box-shadow:2px 2px 4px var(--border-soft);border-radius:30px;align-items:center;gap:8px;padding:6px 16px;font-size:.93rem;font-weight:500;display:inline-flex}.tech-chip svg{font-size:1.1rem}.tech-chip:nth-child(3n+1){transform:rotate(-2deg)}.tech-chip:nth-child(3n+2){transform:rotate(1.5deg)}.tech-chip:nth-child(3n){transform:rotate(-.5deg)}.about-me-text{text-align:center;max-width:600px;margin-bottom:25px;font-size:1.05rem}.contact-content{background:var(--box-bg);border-radius:10px;width:700px;margin:0 -15px;padding:20px 15px 40px}.contact-content>*{max-width:600px}.contact-caption{text-align:center;color:var(--text-color-secondary);margin-top:5px}#contact .copy-email,#contact .copy-email:hover{vertical-align:middle;height:28px;color:var(--text-color-secondary);background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;margin:0 1px 0 0;padding:0 2px 0 6px;font-size:.85rem;display:inline-flex}#contact .copy-email:hover{color:var(--blue)}.contact-form{background:var(--background);width:100%;box-shadow:2px 2px 6px var(--border-soft);border-radius:12px;flex-direction:column;gap:14px;margin:25px auto 0;padding:20px;display:flex}.form-row{gap:14px;display:grid}.form-field{position:relative}#contact .form-field input,#contact .form-field textarea{background:var(--background);border:1px solid var(--border-soft);border-radius:8px;width:100%;margin:0;padding:20px 14px 6px;transition:border-color .15s,box-shadow .15s}#contact .form-field input:focus,#contact .form-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--lightblue);outline:none}.form-field label{color:var(--text-color-secondary);pointer-events:none;font-size:.95rem;transition:top .15s,font-size .15s,color .15s;position:absolute;top:13px;left:15px}#contact .form-field textarea{field-sizing:content;min-height:120px}.form-field input:focus+label,.form-field input:not(:placeholder-shown)+label,.form-field textarea:focus+label,.form-field textarea:not(:placeholder-shown)+label{background:var(--background);letter-spacing:.04em;border-radius:4px;margin-left:-4px;padding:2px 4px 0;font-size:.72rem;top:1px}.form-field input:focus+label,.form-field textarea:focus+label{color:var(--blue)}.field-counter{text-align:right;color:var(--text-color-secondary);margin-top:4px;font-size:.72rem;display:block}#contact .send-button{color:#fff;background-color:var(--blue-fill);border:0;border-radius:30px;align-self:center;align-items:center;gap:8px;padding:10px 26px;font-weight:500;transition:background-color .2s;display:inline-flex}#contact .send-button:hover{background-color:var(--darkblue)}#contact .smile-message{animation:1s ease-in-out infinite alternate shake}#contact .error-message{color:var(--error-text);font-weight:500}footer{color:var(--border-hard);background-color:var(--box-bg);background:linear-gradient(to right bottom, var(--box-bg), var(--background));padding:60px 0 0}.footer-profile{margin-bottom:80px}.footer-courses h4,.footer-codes h4,.footer-active-on h4{letter-spacing:.12em;text-transform:uppercase;color:var(--text-color);border-bottom:1px dashed var(--border-soft);margin:0 0 14px;padding-bottom:8px;font-size:.8rem;font-weight:500}.footer-about-me{border-left:3px solid var(--lightblue);max-width:420px;margin:0 15px 40px;padding:4px 0 4px 20px}.footer-about-me-header{justify-content:flex-start;gap:14px;margin-bottom:12px}.footer-about-me h4{color:var(--text-color);margin:0;font-size:1.1rem;font-weight:500}.footer-role{letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);font-size:.75rem}.footer-about-me p{margin:0 0 12px;font-size:.95rem}.back-to-top{font-size:.85rem}.footer-profile .back-to-top svg{padding-right:4px;font-size:.75rem}.footer-about-me-img{border:2px solid var(--lightblue);background-position:38% 0;background-repeat:no-repeat;background-size:175%;background-clip:content-box;border-radius:50%;flex-shrink:0;width:72px;height:72px;padding:2px;transform:scaleX(-1)}div.footer-courses-codes{flex-wrap:wrap;margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0}.footer-courses,.footer-codes{margin:0 15px 30px;padding:0}@media (width>=768px){.footer-courses,.footer-codes{margin:0 30px 30px}}.footer-courses,.footer-codes{justify-content:flex-start;align-items:flex-start}.footer-links li+li{margin-top:8px}.footer-links a{color:var(--text-color-secondary);align-items:center;gap:10px;transition:color .2s;display:flex}.footer-links a:hover{color:var(--text-color);text-decoration:none}.footer-icon-tile{background:var(--background);width:32px;height:32px;box-shadow:2px 2px 4px var(--border-soft);border-radius:8px;justify-content:center;align-items:center;font-size:1rem;display:inline-flex}.footer-icon-tile .fa-youtube{color:#c41e1e}.footer-icon-tile .fa-linkedin{color:#1182c9}.footer-icon-tile .fa-twitter{color:#1d9bf0}.footer-icon-tile .fa-stack-overflow{color:#f48024}.footer-icon-tile.mono{color:var(--text-color)}footer .web-developer-name{text-align:center;margin:1rem 1rem 0;padding-bottom:2rem}.web-developer-name{font-size:14px}@media (width>=768px){.navbar-toggler{display:none}.main-nav{width:unset;height:unset;box-shadow:none;visibility:visible;background-color:#0000;flex-direction:row;margin-left:auto;position:static}.main-nav li{width:unset}.main-nav a{text-align:unset;font-size:1rem;position:relative}.main-nav a:after{content:"";background:var(--blue);opacity:0;border-radius:50%;width:5px;height:5px;transition:transform .3s,opacity .3s;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)scale(0)}.main-nav a.active:after{opacity:1;transform:translate(-50%)scale(1)}.main-nav a:hover{color:var(--gray);background-color:#0000}.hero-container{margin-top:200px}.hero-header{flex-direction:row}.tech-stack-groups{grid-template-columns:1fr 1fr;gap:40px}.tech-stack-column+.tech-stack-column{border-left:1px dashed var(--border-soft);margin-left:-40px;padding-left:40px}.form-row{grid-template-columns:1fr 1fr}.codepen-card{text-align:left;flex-direction:row}.case-study-users{flex-direction:row;justify-content:space-between;align-items:center;gap:60px}.case-study-logo{width:260px;height:130px}.hero-image,.animated-loading{width:180px;margin-bottom:0 0 30px}.hero-title{text-align:initial}.hero-heading{font-size:2.5rem}.footer-profile{flex-flow:wrap;justify-content:space-around;align-items:flex-start}}@media (width<=200px){body{width:200px}}