@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-Light.eot);src:url(../fonts/apercu/Apercu-Light.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-Light.woff2) format("woff2"),url(../fonts/apercu/Apercu-Light.woff) format("woff"),url(../fonts/apercu/Apercu-Light.ttf) format("truetype"),url(../fonts/apercu/Apercu-Light.svg#Apercu-Light) format("svg");font-weight:300;font-style:normal}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-LightItalic.eot);src:url(../fonts/apercu/Apercu-LightItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-LightItalic.woff2) format("woff2"),url(../fonts/apercu/Apercu-LightItalic.woff) format("woff"),url(../fonts/apercu/Apercu-LightItalic.ttf) format("truetype"),url(../fonts/apercu/Apercu-LightItalic.svg#Apercu-LightItalic) format("svg");font-weight:300;font-style:italic}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-Regular.eot);src:url(../fonts/apercu/Apercu-Regular.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-Regular.woff2) format("woff2"),url(../fonts/apercu/Apercu-Regular.woff) format("woff"),url(../fonts/apercu/Apercu-Regular.ttf) format("truetype"),url(../fonts/apercu/Apercu-Regular.svg#Apercu-Regular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-Italic.eot);src:url(../fonts/apercu/Apercu-Italic.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-Italic.woff2) format("woff2"),url(../fonts/apercu/Apercu-Italic.woff) format("woff"),url(../fonts/apercu/Apercu-Italic.ttf) format("truetype"),url(../fonts/apercu/Apercu-Italic.svg#Apercu-Italic) format("svg");font-weight:400;font-style:italic}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-Medium.eot);src:url(../fonts/apercu/Apercu-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-Medium.woff2) format("woff2"),url(../fonts/apercu/Apercu-Medium.woff) format("woff"),url(../fonts/apercu/Apercu-Medium.ttf) format("truetype"),url(../fonts/apercu/Apercu-Medium.svg#Apercu-Medium) format("svg");font-weight:500;font-style:normal}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-MediumItalic.eot);src:url(../fonts/apercu/Apercu-MediumItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-MediumItalic.woff2) format("woff2"),url(../fonts/apercu/Apercu-MediumItalic.woff) format("woff"),url(../fonts/apercu/Apercu-MediumItalic.ttf) format("truetype"),url(../fonts/apercu/Apercu-MediumItalic.svg#Apercu-MediumItalic) format("svg");font-weight:500;font-style:italic}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-Bold.eot);src:url(../fonts/apercu/Apercu-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-Bold.woff2) format("woff2"),url(../fonts/apercu/Apercu-Bold.woff) format("woff"),url(../fonts/apercu/Apercu-Bold.ttf) format("truetype"),url(../fonts/apercu/Apercu-Bold.svg#Apercu-Bold) format("svg");font-weight:700;font-style:normal}@font-face{font-family:Apercu;src:url(../fonts/apercu/Apercu-BoldItalic.eot);src:url(../fonts/apercu/Apercu-BoldItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/apercu/Apercu-BoldItalic.woff2) format("woff2"),url(../fonts/apercu/Apercu-BoldItalic.woff) format("woff"),url(../fonts/apercu/Apercu-BoldItalic.ttf) format("truetype"),url(../fonts/apercu/Apercu-BoldItalic.svg#Apercu-BoldItalic) format("svg");font-weight:700;font-style:italic}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}::-moz-selection{background:#ffdc00}::selection{background:#ffdc00}body,html{margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#444452;font-family:Apercu,"Source Sans Pro",system,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;width:100%}body.night,html.night{background-color:#171c28;color:#afafbf}body.night ::-moz-selection,html.night ::-moz-selection{color:#36363c;background:#ffdc00}body.night ::selection,html.night ::selection{color:#36363c;background:#ffdc00}body.night .switch-wrapper .sun,html.night .switch-wrapper .sun{background:url(../img/switch/sun-white.svg) no-repeat center;background-size:100%}body.night .switch-wrapper .moon,html.night .switch-wrapper .moon{background:url(../img/switch/moon-white.svg) no-repeat center;background-size:100%}body.night .experience .job__time,body.night .footer__copyright,body.night .intro,body.night .skills .skillz__category__label,body.night .status,body.night a,body.night strong,html.night .experience .job__time,html.night .footer__copyright,html.night .intro,html.night .skills .skillz__category__label,html.night .status,html.night a,html.night strong{color:#e7e7e7}body.night .section__content .underline-link:after,html.night .section__content .underline-link:after{background:#e7e7e7}a{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;text-decoration:none;font-weight:700;color:inherit}ul{list-style:none;padding:0;margin:0}svg{width:100%;height:100%;fill:currentColor}img{max-width:100%;vertical-align:middle}strong{font-weight:700;color:#36363c}.emoji{display:inline-block;vertical-align:text-top;background-size:contain;background-repeat:no-repeat;background-position:center}.section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:100px 170px}@media screen and (max-width:1280px){.section{padding:100px}}@media screen and (max-width:1024px){.section{padding:50px}}@media screen and (max-width:768px){.section{display:block}}@media screen and (max-width:480px){.section{padding:50px 35px}}.section__title{-ms-flex-negative:0;flex-shrink:0;width:200px;margin-right:70px;color:#007bff;text-transform:uppercase;text-align:right;font-weight:700;letter-spacing:2px}@media screen and (max-width:1024px){.section__title{margin-right:50px}}@media screen and (max-width:850px){.section__title{width:150px}}@media screen and (max-width:768px){.section__title{text-align:left;width:auto}}.section__content{font-weight:300;font-size:1rem;width:100%;max-width:650px}@media screen and (max-width:768px){.section__content{padding-top:30px;padding-left:50px}}@media screen and (max-width:480px){.section__content{padding-left:30px}}.section__content p{margin-top:0;margin-bottom:25px}.section__content .underline-link{position:relative;display:inline-block}.section__content .underline-link:after{position:absolute;top:100%;left:0;width:100%;height:1px;background:#36363c;content:'';opacity:0;-webkit-transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,transform .3s;transition:height .3s,opacity .3s,transform .3s,-webkit-transform .3s;-webkit-transform:translateY(-5px);transform:translateY(-5px)}.section__content .underline-link:focus:after,.section__content .underline-link:hover:after{height:2px;border-radius:3px;opacity:1;-webkit-transform:translateY(-2px);transform:translateY(-2px)}.arrow-link{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;font-weight:700;display:inline-block;background-color:transparent;white-space:nowrap}.arrow-link:after{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:relative;bottom:2px;margin-left:15px;content:'';background:url(../img/arrow.png) no-repeat center;background-size:100%;width:15px;height:15px;display:inline-block;vertical-align:middle}.arrow-link:hover:after{-webkit-transform:translateX(7px);transform:translateX(7px)}.small{font-family:Inconsolata,monospace;font-size:.85rem;display:inline-block;margin-top:15px}.small:after{display:none}#top-button{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:0 0;border:none;outline:0;width:40px;position:fixed;bottom:25px;right:10px;cursor:pointer;display:none}@media screen and (max-width:1024px){#top-button{bottom:20px;right:7px;width:35px}}@media screen and (max-width:480px){#top-button{bottom:15px;right:3px}}#top-button:focus,#top-button:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}#top-button img{width:100%}.waypoint{opacity:0;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);-webkit-transition:opacity .6s cubic-bezier(.694,0,.335,1),-webkit-transform .6s cubic-bezier(.694,0,.335,1);transition:opacity .6s cubic-bezier(.694,0,.335,1),-webkit-transform .6s cubic-bezier(.694,0,.335,1);transition:opacity .6s cubic-bezier(.694,0,.335,1),transform .6s cubic-bezier(.694,0,.335,1);transition:opacity .6s cubic-bezier(.694,0,.335,1),transform .6s cubic-bezier(.694,0,.335,1),-webkit-transform .6s cubic-bezier(.694,0,.335,1)}.in-view{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.switch-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:20px;right:30px}@media screen and (max-width:480px){.switch-wrapper{top:10px;right:20px}}.switch-wrapper .moon,.switch-wrapper .sun{width:17px;height:17px}.switch-wrapper .sun{background:url(../img/switch/sun.svg) no-repeat center;background-size:100%}.switch-wrapper .moon{background:url(../img/switch/moon.svg) no-repeat center;background-size:100%}.switch-wrapper .toggle-wrapper{margin:10px}.switch-wrapper .toggle-wrapper #switch{height:0;width:0;visibility:hidden;position:absolute}.switch-wrapper .toggle-wrapper #switch:checked+label{background:#bae67e}.switch-wrapper .toggle-wrapper #switch:checked+label:after{left:calc(100% - 3px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.switch-wrapper .toggle-wrapper label{cursor:pointer;text-indent:-9999px;width:45px;height:25px;background:grey;display:block;border-radius:100px;position:relative}.switch-wrapper .toggle-wrapper label:after{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:100%}.intro{padding:120px 100px;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;max-width:1440px;margin:0 auto}@media screen and (max-width:630px){.intro{padding:120px 70px}}@media screen and (max-width:550px){.intro{padding:120px 50px}}@media screen and (max-width:480px){.intro{padding:70px 50px}}.intro__hello,.intro__tagline{font-size:2.5rem}@media screen and (max-width:1024px){.intro__hello,.intro__tagline{font-size:2.25rem}}@media screen and (max-width:768px){.intro__hello,.intro__tagline{font-size:2rem}}@media screen and (max-width:550px){.intro__hello,.intro__tagline{font-size:1.75rem}}@media screen and (max-width:360px){.intro__hello,.intro__tagline{font-size:1.5rem}}@media screen and (max-width:330px){.intro__hello,.intro__tagline{font-size:1.4rem}}.intro__hello .emoji,.intro__tagline .emoji{width:40px;height:40px}@media screen and (max-width:1024px){.intro__hello .emoji,.intro__tagline .emoji{width:35px;height:35px}}@media screen and (max-width:768px){.intro__hello .emoji,.intro__tagline .emoji{width:30px;height:30px}}@media screen and (max-width:360px){.intro__hello .emoji,.intro__tagline .emoji{width:25px;height:25px}}.intro__hello{font-weight:300}.intro__hello .wave-hand{background-image:url(../img/emojis/wave.png);margin-left:10px;cursor:pointer}.intro__hello .wave-hand.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.intro__hello .wave-hand.wave{-webkit-animation-name:wave;animation-name:wave}@-webkit-keyframes wave{from{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-20%,0,0) rotate3d(0,0,1,-10deg);transform:translate3d(-20%,0,0) rotate3d(0,0,1,-10deg)}30%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,7deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,7deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-10deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-10deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,5deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,5deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-2deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-2deg)}to{-webkit-transform:none;transform:none}}@keyframes wave{from{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-20%,0,0) rotate3d(0,0,1,-10deg);transform:translate3d(-20%,0,0) rotate3d(0,0,1,-10deg)}30%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,7deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,7deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-10deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-10deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,5deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,5deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-2deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-2deg)}to{-webkit-transform:none;transform:none}}.intro__tagline{font-weight:300;max-width:700px}.intro__tagline .name{font-weight:700}.intro__tagline .technologist{background-image:url(../img/emojis/technologist.png)}.intro__contact{font-size:1.25rem;font-weight:400}@media screen and (max-width:550px){.intro__contact{font-size:1rem}}.intro__contact .emoji.pointer{background-image:url(../img/emojis/pointright.png);width:30px;height:30px;margin:0 5px;vertical-align:text-bottom}@media screen and (max-width:550px){.intro__contact .emoji.pointer{width:25px;height:25px}}.intro__contact .highlight-link{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;font-weight:400;text-decoration:none;display:inline-block;padding:2px 3px;text-decoration:none;-webkit-box-shadow:inset 0 -3px 0 #007bff;box-shadow:inset 0 -3px 0 #007bff}.intro__contact .highlight-link:hover{-webkit-box-shadow:inset 0 -33px 0 0 #007bff;box-shadow:inset 0 -33px 0 0 #007bff;color:#fff}.skills .skillz{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:630px){.skills .skillz{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:630px){.skills .skillz__category{width:47%;margin-right:5px;margin-bottom:25px}}.skills .skillz__category__label{font-weight:700;color:#36363c;text-transform:uppercase}.skills .skillz__category__item{margin:3px 0;font-size:.9rem}.experience .jobs{margin-bottom:100px}.experience .job{margin-bottom:25px}.experience .job .time-place{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:480px){.experience .job .time-place{display:block}}.experience .job__company{font-weight:700}.experience .job__time{font-size:.9rem;font-family:Inconsolata,monospace}@media screen and (max-width:480px){.experience .job__time{font-size:.8rem}}.experience .arrow-link{font-size:1.25rem}.experience .arrow-link:after{width:20px;height:20px}.status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1rem;margin-top:70px}.status__light{width:30px;height:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.status__light__ring{position:absolute;width:25px;height:25px;-webkit-animation:pulsate 2s ease-out;animation:pulsate 2s ease-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;opacity:0;border:3px solid #bae67e;border-radius:30px}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(.1,.1);transform:scale(.1,.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}}@keyframes pulsate{0%{-webkit-transform:scale(.1,.1);transform:scale(.1,.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}}.status__light__led{position:absolute;width:13px;height:13px;background:#bae67e;border-radius:100%}.status__message{margin-left:15px}.featured-projects a:after{display:none}.featured-projects .project{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:100px;margin-left:-5%;width:125%}@media screen and (max-width:1280px){.featured-projects .project{width:115%}}@media screen and (max-width:1024px){.featured-projects .project{width:105%}}@media screen and (max-width:768px){.featured-projects .project{width:100%;display:block;margin-bottom:70px}}.featured-projects .project.screentime{margin-bottom:70px}.featured-projects .project:last-of-type{margin-bottom:0}.featured-projects .project__pic{max-width:700px;overflow:visible;margin:0}.featured-projects .project__pic a{display:block}.featured-projects .project__pic.phones a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.featured-projects .project__pic.phones .phone{margin:0 -7%}.featured-projects .project__pic.phones .phone:first-of-type{margin-left:-5%}.featured-projects .project__pic img{width:100%;max-width:100%;vertical-align:bottom}.featured-projects .project__caption{width:125px;-ms-flex-negative:0;flex-shrink:0;margin-left:30px}@media screen and (max-width:768px){.featured-projects .project__caption{width:100%;margin-top:25px;margin-left:0}}.featured-projects .project__name{margin-bottom:10px}.featured-projects .project__name a{font-weight:700}.featured-projects .project p{font-size:.85rem;line-height:1.3}.other-projects .project{max-width:600px;margin-bottom:50px}.other-projects .project__name{margin-bottom:10px}.other-projects .project p{font-size:.9rem;margin-bottom:20px}.other-projects .project__used__item{display:inline-block;margin:3px 3px 3px 0;font-family:Inconsolata,monospace;font-size:.75rem;font-weight:700;padding:2px 7px;border-radius:3px;color:#007bff;border:1px solid #007bff;background:0 0}.other-projects .project__used__item:first-of-type{margin-left:0}.footer{padding:50px 80px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:1024px){.footer{padding:50px}}@media screen and (max-width:630px){.footer{display:block}}@media screen and (max-width:480px){.footer{padding:50px 30px}}.footer__copyright{font-weight:700;width:200px}@media screen and (max-width:630px){.footer__copyright{width:auto;text-align:center;margin-bottom:25px}}@media screen and (max-width:630px){.footer__copyright .bottom,.footer__copyright .top{display:inline-block}}@media screen and (max-width:480px){.footer__copyright .bottom,.footer__copyright .top{display:block}}.footer__copyright .emoji{width:20px;height:20px;margin:0 3px;vertical-align:text-bottom}@media screen and (max-width:630px){.footer__links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.footer__links a{position:relative;display:inline-block;color:#007bff!important;text-transform:uppercase;font-weight:700;margin:0 15px;outline:0}@media screen and (max-width:1024px){.footer__links a{margin:0 10px}}.footer__links a:after{position:absolute;top:100%;left:0;width:100%;height:1px;background:#007bff;content:'';opacity:0;-webkit-transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,transform .3s;transition:height .3s,opacity .3s,transform .3s,-webkit-transform .3s;-webkit-transform:translateY(-5px);transform:translateY(-5px)}@media screen and (max-width:850px){.footer__links a:after{display:none}}.footer__links a:focus:after,.footer__links a:hover:after{height:2px;border-radius:3px;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.footer__links a .text{font-size:.9rem;display:inline;letter-spacing:1px}@media screen and (max-width:850px){.footer__links a .text{display:none}}.footer__links img{display:none;width:22px}@media screen and (max-width:850px){.footer__links img{display:inline-block}}.not-found{width:100%;height:100vh!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;padding:0 20px}.not-found .name{position:absolute;top:25px;left:30px;font-weight:700;color:#007bff;font-size:1.5rem}@media screen and (max-width:480px){.not-found .name{top:20px;left:25px;font-size:1.25rem}}.not-found h1{font-size:4rem;margin:10px 0}.not-found h2{font-size:1.5rem}@media screen and (max-width:480px){.not-found h2{font-size:1.25rem}}@media screen and (max-width:360px){.not-found h2{font-size:1.1rem}}.not-found a{font-weight:700;color:#007bff!important;position:relative;display:inline-block}.not-found a:after{position:absolute;top:100%;left:0;width:100%;height:3px;background:#007bff;content:'';opacity:0;-webkit-transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,-webkit-transform .3s;transition:height .3s,opacity .3s,transform .3s;transition:height .3s,opacity .3s,transform .3s,-webkit-transform .3s;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.not-found a:focus:after,.not-found a:hover:after{height:3px;opacity:1;-webkit-transform:translateY(-5px);transform:translateY(-5px)}

/* - - - - - Intro section - - - - - */

/* Temporary placeholder style for empty sections */
.placeholder {
  opacity: 0.6;
  font-style: italic;
  border: 1px dashed currentColor;
  padding: 12px 14px;
  border-radius: 6px;
  display: inline-block;
}

/* Make Intro resume link match Experience size */
.intro .arrow-link{font-size:1.25rem}
.intro .arrow-link:after{width:20px;height:20px}

/* === Intro: equal gaps between the 3 blocks, tight spacing inside CTA === */

/* Center the 3 blocks in the viewport and control the between-gaps explicitly */
.intro {
    justify-content: center;   /* keep content centered vertically in 100vh */
    gap: 80px;                 /* <- this is the space between Hello ↔ Tagline ↔ CTA */
  }
  
  /* Remove default margins so 'gap' is the only spacing between the 3 blocks */
  .intro h1,
  .intro h2,
  .intro h3 {
    margin: 0;
  }
  
  /* Inside the CTA block: make the two lines sit very close (like pressing Enter) */
  .intro__cta .arrow-link {
    display: inline-block;
    margin: 0 0 4px;           /* tiny gap above "Let's connect" */
  }
  .intro__cta .intro__contact {
    margin: 0;                 /* kill the default <h3> margin */
  }

  /* === Intro: two-column layout with circular headshot === */

/* Tweakable variables */
.intro {
  --intro-gap: 32px;           /* space between text block and photo (adjust this) */
  --intro-block-gap: 88px;     /* vertical spacing inside the text block (Hello ↔ Tagline ↔ CTA) */
  --intro-photo-size: clamp(180px, 30vw, 360px);  /* photo size scales; right edge stays fixed */
}

/* Inner row: two columns */
.intro .intro__row {
  display: grid;
  grid-template-columns: minmax(0, 700px) auto;  /* left column maxes at 700px (your current width) */
  align-items: center;
  column-gap: var(--intro-gap);
}

/* Keep your left text block exactly sized, with clean internal spacing */
.intro .intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--intro-block-gap);
}

/* Remove default heading margins so gap controls spacing precisely */
.intro h1, .intro h2, .intro h3 { margin: 0; }

/* Right photo: circle, right edge anchored */
.intro .intro__media {
  justify-self: end; /* anchors the photo's right edge; gap grows/shrinks on the left side of the photo */
}

.intro .intro__photo {
  width: var(--intro-photo-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Keep your previous intro link size matching Experience */
.intro .arrow-link { font-size: 1.25rem; }
.intro .arrow-link:after { width: 20px; height: 20px; }

/* Tighten the two lines inside CTA (resume above, connect below) */
.intro__cta .arrow-link { display: inline-block; margin: 0 0 4px; }
.intro__cta .intro__contact { margin: 0; }

/* Responsive: stack image on top, with the same gap as Hello ↔ Tagline */
/* Force the headshot above the text on mobile */
@media screen and (max-width: 768px) {
  .intro .intro__row {
    display: grid;             /* ensure it's still a grid */
    grid-template-columns: 1fr;/* stack into a single column */
  }

  .intro .intro__media {
    order: -1;                 /* move image above */
    justify-self: center;      /* center the circle image */
    margin-bottom: 24px;       /* gap between image and "Hello" block */
  }

  .intro .intro__text {
    gap: 32px; /* or 24px for tighter spacing */
  }
}

/* 1) Make the whole intro section fill the viewport and let inner grid fill it */
.intro {
  min-height: 100svh; /* mobile-safe viewport height */
}

/* Ensure the inner layout stretches full height */
.intro .intro__row {
  height: 100%;
}

/* 2) DESKTOP (default): equal vertical spacing inside the LEFT text column */
.intro .intro__text {
  height: 100%;                 /* stretch to intro height */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;/* equal space above/between/below: Hello, Tagline, CTA group */
}

/* Remove default heading margins so spacing is controlled only by space-evenly */
.intro h1, .intro h2, .intro h3 {
  margin: 0;
}

/* 3) MOBILE: stack headshot + the three text items, all spaced evenly edge-to-edge */
@media screen and (max-width: 768px) {
  /* Stack the whole intro column and distribute items (image, h1, h2, cta) evenly */
  .intro .intro__row {
    display: flex;                  /* override your grid on mobile */
    flex-direction: column;
    justify-content: space-evenly;  /* equal space top/between/bottom for ALL items */
    height: 100%;
  }

  /* Make the text wrapper “transparent” so its CHILDREN join the same flex stack */
  .intro .intro__text {
    display: contents;              /* h1, h2, .intro__cta become siblings with the headshot */
    height: auto;                   /* no fixed height here */
  }

  /* Headshot first, centered */
  .intro .intro__media {
    order: -1;
    align-self: center;
    margin: 0;                      /* let space-evenly handle spacing */
  }
}

/* === Mobile portrait: evenly spaced stack with left-aligned text === */
@media screen and (max-width: 768px) {

  /* Make the whole intro fill the viewport height */
  .intro {
    min-height: 100svh;           /* more reliable on mobile than 100vh */
    padding-top: 48px;            /* your top/bottom gutters — tweak if you like */
    padding-bottom: 48px;
  }

  /* Stack: headshot, Hello, Tagline, CTA — spaced evenly including top/bottom */
  .intro .intro__row {
    display: grid;
    grid-template-columns: 1fr;              /* single column */
    grid-template-rows: repeat(4, max-content);
    align-content: space-evenly;             /* <-- equal space above/between/below */
    justify-items: start;                    /* keep items left-aligned */
    row-gap: 0;                              /* gaps are handled by space-evenly */
  }

  /* Ensure order: headshot first, then the text block pieces */
  .intro .intro__media {
    order: -1;                 /* image goes above */
    justify-self: center;      /* image centered horizontally */
    margin: 0;                 /* no extra margins that would break even spacing */
  }

  /* Inside the text block, remove margins so spacing is controlled by the grid */
  .intro .intro__text {
    display: contents;         /* flatten children so rows are: h1, h2, CTA */
  }

  .intro h1,
  .intro h2,
  .intro .intro__cta {
    margin: 0;                 /* kill default margins */
    text-align: left;          /* prevent unexpected centering */
    width: 100%;
  }

  /* Keep CTA tight internally (resume line above, connect line below) */
  .intro__cta .arrow-link { display: inline-block; margin: 0 0 4px; }
  .intro__cta .intro__contact { margin: 0; }
}

.intro {
  --intro-photo-size: clamp(240px, 25vw, 400px);
}























/* - - - - - Sections after intro - - - - - */

/* - - - - - Sections after intro - - - - - */

/* Project images */
.other-projects .project__image {
  margin-bottom: 18px;         /* space between image and title */
}

.other-projects .project__image img {
  display: block;
  max-width: 100%;             /* never exceed the container width */
  width: 520px;                /* default size on desktop */
  height: auto;
  border-radius: 32px;         /* optional: rounded corners */
}

/* Responsive: make image shrink to fit mobile width */
@media screen and (max-width: 768px) {
  .other-projects .project__image img {
    width: 100%;               /* expands to edge of right margin */
    max-width: 100%;           /* respect container padding */
  }
}

/* === Certifications & Professional Certificates featured layout
      caption fixed, image fills the middle === */

.certifications.featured-projects .project,
.professional-certificates.featured-projects .project {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-left: 0;        /* cancel theme's bleed by default (see bleed section below) */
}

/* Middle column (image) = fills all space between left title and right caption */
.certifications.featured-projects .project__pic,
.professional-certificates.featured-projects .project__pic {
  flex: 1 1 auto;        /* take remaining space */
  max-width: none;       /* remove theme cap */
  min-width: 0;          /* allow flex shrink when needed */
  margin: 0;             /* keep tight to columns */
}

.certifications.featured-projects .project__pic img,
.professional-certificates.featured-projects .project__pic img {
  display: block;
  width: 100%;           /* upscale to fill column (even if low-res) */
  height: auto;          /* no cropping; preserve aspect ratio */
  border-radius: 32px;   /* match projects rounding */
}

/* Right column (caption) = fixed width so its right edge stays on page gutter */
.certifications.featured-projects .project__caption,
.professional-certificates.featured-projects .project__caption {
  flex: 0 0 125px;       /* EXACTLY like the original theme */
  width: 125px;          /* explicit for safety */
  max-width: 125px;
  margin-left: 30px;     /* gap between image and caption */
  /* let text wrap naturally; DON'T clip */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.certifications.featured-projects .project__name,
.professional-certificates.featured-projects .project__name {
  display: block;
}

/* Make the title + arrow wrap instead of overflowing */
.certifications.featured-projects .project__name .arrow-link,
.professional-certificates.featured-projects .project__name .arrow-link {
  display: inline;               /* keep arrow inline with text */
  white-space: normal;           /* allow wrapping */
  overflow-wrap: anywhere;       /* break long words if needed */
  word-break: break-word;        /* safety for very long tokens */
  line-height: 1.3;
}

/* Show the same arrow as "Other Projects" inside Certifications/Prof Certs */
.certifications.featured-projects .project__name .arrow-link:after,
.professional-certificates.featured-projects .project__name .arrow-link:after {
  display: inline-block !important; /* override the theme's featured-projects rule */
}

/* Optional: keep the original wider image bleed OFF for this section
   (width reset to 100%) */
.certifications.featured-projects .project.screentime,
.certifications.featured-projects .project,
.professional-certificates.featured-projects .project {
  width: 100%;
}

/* Mobile: stack like the theme */
@media (max-width: 768px) {
  .certifications.featured-projects .project,
  .professional-certificates.featured-projects .project {
    display: block;
  }
  .certifications.featured-projects .project__caption,
  .professional-certificates.featured-projects .project__caption {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-top: 25px;
  }
}

/* === RESTORE DEVELOPER GUTTERS & BLEED === */

/* Sections: developer defaults (already declared earlier) — force them back if overridden */
.section {
  padding: 100px 170px !important;
}
@media screen and (max-width: 1280px) {
  .section { padding: 100px !important; }
}
@media screen and (max-width: 1024px) {
  .section { padding: 50px !important; }
}
@media screen and (max-width: 480px) {
  .section { padding: 50px 35px !important; }
}

/* Footer: developer defaults */
.footer {
  padding: 50px 80px !important;
}
@media screen and (max-width: 1024px) {
  .footer { padding: 50px !important; }
}
@media screen and (max-width: 480px) {
  .footer { padding: 50px 30px !important; }
}

/* Featured Projects: restore developer's wider "bleed" */
.featured-projects .project {
  margin-left: -5% !important;
  width: 125% !important;
}
@media screen and (max-width: 1280px) {
  .featured-projects .project { width: 115% !important; }
}
@media screen and (max-width: 1024px) {
  .featured-projects .project { width: 105% !important; }
}
@media screen and (max-width: 768px) {
  .featured-projects .project {
    width: 100% !important;
    margin-left: 0 !important;
    display: block; /* same as developer */
  }
}

/* Make Certifications & Professional Certificates match Featured Projects layout exactly (same bleed) */
.certifications.featured-projects .project,
.professional-certificates.featured-projects .project {
  margin-left: -5% !important;
  width: 125% !important;
}
@media screen and (max-width: 1280px) {
  .certifications.featured-projects .project,
  .professional-certificates.featured-projects .project { width: 115% !important; }
}
@media screen and (max-width: 1024px) {
  .certifications.featured-projects .project,
  .professional-certificates.featured-projects .project { width: 105% !important; }
}
@media screen and (max-width: 768px) {
  .certifications.featured-projects .project,
  .professional-certificates.featured-projects .project {
    width: 100% !important;
    margin-left: 0 !important;
    display: block; /* stack like the theme */
  }
}

/* Other Projects: keep the developer's non-bleeding layout */
.other-projects .project {
  width: 100% !important;
  margin-left: 0 !important;
}

.project-detail .project__pic img { border-radius: 32px; }

/* === Skills: equal column widths + equal gaps === */
.skills .skillz {
  display: grid;                          /* replace flex */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 equal columns */
  gap: 32px;                               /* uniform space between columns & rows */
  align-items: start;
}

/* kill old flex-era widths/margins on categories */
.skills .skillz__category {
  width: auto !important;
  margin: 0;                               /* spacing now handled by grid gap */
}

/* Responsive steps (tweak if you like) */
@media (max-width: 1024px) {
  .skills .skillz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .skills .skillz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .skills .skillz { grid-template-columns: 1fr; }
}

/* Awards: image above text, left-aligned with the text container */
.awards .award {
  margin-bottom: 40px;            /* space between awards */
}

.awards .award__image {
  /* make the wrapper follow the text container’s left edge */
  width: 100%;
  text-align: left;               /* kill any inherited centering */
  margin: 0;                      /* no side margins */
  padding: 0;                     /* no side padding */
  margin-bottom: 16px;            /* space between image and text */
}

.awards .award__image img {
  display: block;
  width: 100%;                    /* responsive width of wrapper */
  max-width: 520px;               /* same cap as project thumbnails */
  height: auto;
  border-radius: 32px;            /* same 32px rounding */
  margin: 0;                      /* ensure no auto-centering */
}

/* Projects: let titles wrap to match the description width */
.other-projects .project__name { 
  max-width: 100%;
}

.other-projects .project__name .arrow-link {
  display: inline;           /* keep arrow inline with text */
  white-space: normal;       /* allow line wrapping */
  overflow-wrap: anywhere;   /* break very long words/URLs if needed */
  word-break: break-word;    /* extra safety */
  line-height: 1.3;
}

/* Leadership: 2-column layout (details + time), stacked position/description */
.leadership .time-place {
  display: grid;
  grid-template-columns: 1fr auto;  /* details take space, time fixed */
  column-gap: 30px;
  align-items: start;
}

.leadership .job__company {
  font-weight: 700;
  margin-bottom: 6px;
}

.leadership .job__desc {
  font-size: 0.95rem;
  line-height: 1.4;
}

.leadership .job__time {
  font-size: 0.9rem;
  font-family: Inconsolata, monospace;
  text-align: right;
  white-space: nowrap;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .leadership .time-place {
    grid-template-columns: 1fr;
  }
  .leadership .job__time {
    text-align: left;
    margin-top: 8px;
  }
}

/* Leadership/Experience job rows */
.experience .job .time-place {
  display: flex;
  justify-content: space-between;
  gap: 70px; /* adjust this value until spacing looks equal */
}

/* Leadership: scale down arrow-link to match description text */
.leadership .job__links .arrow-link {
  font-size: 1rem;        /* same as description */
  line-height: 1.5;       /* keep vertical rhythm */
  font-weight: 400;       /* normal weight like description */
}

.leadership .job__links .arrow-link:after {
  width: 12px;            /* smaller arrow */
  height: 12px;           /* keep proportions */
  margin-left: 8px;       /* tighter gap between text and arrow */
  bottom: 1px;            /* align baseline with text */
}

/* Leadership: links stacked tightly like text lines */
.leadership .job__links {
  display: flex;
  flex-direction: column;
  margin-top: 8px;        /* spacing above the FIRST link only */
}

.leadership .job__links p {
  margin: 0;              /* kill default paragraph spacing */
}

.leadership .job__links .arrow-link {
  font-size: 1rem;        /* match description size */
  line-height: 1.4;       /* normal text rhythm */
  font-weight: 400;
  margin: 0;              /* no extra gap between links */
}

.leadership .job__links .arrow-link:after {
  width: 12px;            /* smaller arrow */
  height: 12px;
  margin-left: 8px;
  bottom: 1px;
}

/* Leadership entries */
.leadership .job {
  margin-bottom: 0px; /* space between different leadership entries */
}

/* Inside a single entry, keep position + description + links close */
.leadership .job__company,
.leadership .job__position,
.leadership .job__links {
  margin-bottom: 0px;   /* minimal spacing, like single line height */
}





/* Leadership: keep Position (left) + Time (right) on the SAME row on small screens */
@media (max-width: 780px) {
  /* make the row flex again (theme sets it to block on mobile) */
  .leadership.experience .job .time-place {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;             /* small breathing room */
  }

  /* let the position grow and wrap; prevent it from pushing the date down */
  .leadership.experience .job__company {
    flex: 1 1 auto;
    min-width: 0;          /* allow wrapping instead of forcing the date to a new line */
  }

  /* keep the date on the right, one line */
  .leadership.experience .job__time {
    flex: 0 0 auto;
    white-space: nowrap;   /* stops the date from wrapping and dropping to next line */
    text-align: right;
  }

  /* description sits below the row normally */
  .leadership.experience .job__position {
    width: 100%;
    margin-top: 6px;       /* tiny gap under the position/date row (adjust to taste) */
  }
}

/* Leadership (mobile): remove vertical gap between row (Position+Time) and Description */
@media (max-width: 780px) {
  .leadership.experience .job .time-place {
    margin-bottom: 0;          /* no gap under the row */
  }
  .leadership.experience .job__company,
  .leadership.experience .job__time {
    margin: 0;                  /* ensure no margins here either */
  }
  .leadership.experience .job__position {
    margin-top: 0 !important;   /* override the 6px you set earlier */
  }
  .leadership.experience .job__position p {
    margin: 0;                  /* kill default p margins */
    line-height: 1.35;          /* tidy single-line-ish spacing; tweak 1.2–1.4 to taste */
  }
}

/* Leadership (mobile & desktop): tighten spacing under Position+Time row */
.leadership.experience .job__position p {
  margin-top: 0 !important;     /* no gap above description */
  margin-bottom: 0 !important;  /* no gap below description */
  line-height: 1.35;            /* keep readable line spacing */
}

/* Optional: if you want just a *tiny* breathing room (like half a line), use margin-top: 2px instead */

/* Leadership entries: restore spacing between entries */
.leadership .job {
  margin-bottom: 50px;   /* same as developer’s Experience section */
}

/* Keep Position + Time row tight with Description */
.leadership .job__position p {
  margin-top: 0 !important;     /* no extra gap above */
  margin-bottom: 0 !important;  /* no extra gap below */
  line-height: 1.35;            /* readable spacing */
}

/* Add space between description and links */
.leadership .job__links {
  margin-top: 24px;   /* roughly like one <br>, adjust to 10–14px if needed */
}

/* Restore bullets only for Internship descriptions */
.internship .job__position ul {
  list-style: disc;       /* show bullets */
  margin-left: 20px;      /* indent bullets a bit */
  padding-left: 10px;
}

.internship .job__position li {
  margin-bottom: 6px;     /* spacing between bullet points */
}




















/* - - - - - Sub-pages - - - - - */

   .project-detail {
    /* Keep the developer's section padding/gutters */
    display: block;              /* ensure single column behavior */
  }
  
  /* Inner content column uses the same max width as other sections */
  .project-detail__content {
    max-width: 650px;
    width: 100%;
  }
  
  /* ---- Global knobs (tweak these once) ---- */
  :root {
    /* Title + body type sizes for project pages */
    --project-title-size: 2rem;          /* change to 2.25rem, etc. */
    --project-body-size: 1rem;
  
    /* Global body image max width */
    --project-body-img-max: 900px;       /* you can change this globally */
  }
  
  /* Page title & text sizes (can be changed globally via the vars above) */
  .project-detail__title {
    font-size: var(--project-title-size);
    line-height: 1.2;
    margin: 20px 0 10px;
  }
  
  .project-detail__summary,
  .project-detail__body {
    font-size: var(--project-body-size);
  }
  
  /* Tags (simple chips) */
  .project-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
  }
  .project-detail__tags .tag {
    display: inline-block;
    padding: 2px 7px;
    font-family: Inconsolata, monospace;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 3px;
  }
  
  /* CTA uses the site's arrow-link style */
  .project-detail__cta { margin: 8px 0 18px; }
  
  /* ---- Body images (non-hero) ---- */
  /* Centered, rounded, responsive.
     Default max width is the global var, but can be overridden per-image. */
  .project-detail__body img {
    display: block;
    margin: 18px auto;                 /* centered */
    width: 100%;
    height: auto;
    max-width: min(100%, var(--img-max, var(--project-body-img-max)));
    border-radius: 32px;               /* same 32px corner radius */
  }
  
  /* Make markdown images not overflow on tiny screens */
  @media (max-width: 480px) {
    .project-detail__body img {
      border-radius: 24px; /* optional, slightly smaller radius on phones */
    }
  }

/* Back link above hero — reuse the site's arrow but flip it to point left */
.project-detail__nav { margin: 0 0 16px; }

/* The default .arrow-link uses :after for a right arrow.
   For "Back", hide :after and show a flipped :before instead. */
.arrow-link--back:after { display: none; }

.arrow-link--back {
  display: inline-block;
  white-space: nowrap;
}

.arrow-link--back:before {
  content: '';
  position: relative;
  bottom: 2px;
  margin-right: 15px;
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  background: url(../img/arrow.png) no-repeat center;
  background-size: 100%;
  transform: scaleX(-1);                 /* flip horizontally */
  transition: transform .2s ease-in-out; /* match site feel */
}

/* Move the left-arrow LEFT on hover */
.arrow-link--back:hover:before {
  transform: scaleX(-1) translateX(7px);
}

/* ========== Project hero: full-bleed, fixed height, center-cropped ========== */

/* Pull the hero out of the section gutters to span edge-to-edge */
.project-hero {
  /* Make the element extend to the viewport edges, regardless of parent padding */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  /* Fixed height (tweak globally here) */
  --project-hero-height: clamp(220px, 45vh, 520px);
  height: var(--project-hero-height);

  /* Optional: if you want zero rounding on the hero */
  border-radius: 0;
  overflow: hidden; /* hide cropped parts */
}

/* Make the image behave like a cover photo */
.project-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crop to fill the box */
  object-position: center;  /* crop from the center */
}

/* Optional: adjust hero height on very small screens */
@media (max-width: 480px) {
  .project-hero {
    --project-hero-height: 220px; /* or any value you like */
  }
}

/* Full-bleed hero image like a cover photo */
.project-hero {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  --project-hero-height: clamp(220px, 45vh, 520px);
  height: var(--project-hero-height);

  border-radius: 0;
  overflow: hidden;
}

.project-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Space between the metadata block (title/tags/summary/repo) and the body */
.project-detail__body {
  margin-top: 48px; /* tweak to taste (e.g., 24–40px) */
}

.project-detail__links { margin: 12px 0 18px; }
.project-detail__link  { margin: 6px 0; }

:root{
  --swup-duration: 280ms;
  --swup-ease: cubic-bezier(.22,.61,.36,1);
}

html.is-animating .swup-transition { will-change: opacity; }

@keyframes swupFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes swupFadeOut{ from {opacity: 1} to {opacity: 0} }

/* Swup v4 adds is-leaving / is-entering to the container during swaps */
html.is-animating .swup-transition.is-leaving {
  animation: swupFadeOut var(--swup-duration) var(--swup-ease) forwards;
}
html.is-animating .swup-transition.is-entering {
  animation: swupFadeIn  var(--swup-duration) var(--swup-ease) forwards;
}

/* Ensure the toggle is always above content (including full-bleed hero) */
.switch-wrapper {
  position: fixed;   /* not absolute */
  top: 20px;
  right: 30px;
  z-index: 2000;
}

.project-hero { position: relative; z-index: 0; }