@keyframes slideLeftToRight{0%{left:-30%;opacity:0}100%{left:0;opacity:1}}@keyframes slideRightToLeft{0%{right:-30%;opacity:0}100%{right:0;opacity:1}}@keyframes stretch{0%{width:0}100%{width:25rem}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}html{box-sizing:border-box;font-size:62.5%}@media only screen and (max-width: 75em){html{font-size:50%}}a,a:link,a:active{text-decoration:none;transition:all .4s ease}a::before,a::after,a:link::before,a:link::after,a:active::before,a:active::after{transition:inherit}img{max-width:100%;height:auto}.container{background-color:#0d1b2a;display:grid;font-family:"Barlow Condensed",sans-serif;font-size:2.2rem;grid-template-columns:[margin-left-start] 10rem [margin-left-end main-start] repeat(12, 1fr) [main-end margin-right-start] 10rem [margin-right-end];grid-template-rows:[header-start] 5rem [header-end main-start] 1fr [main-end footer-start] 15rem [footer-end];margin:0 auto;position:relative;z-index:1;color:#fff}.container.noscroll{overflow:hidden}@media only screen and (max-width: 56.25em){.container{grid-template-columns:[margin-left-start] 3rem [margin-left-end main-start] repeat(12, 1fr) [main-end margin-right-start] 3rem [margin-right-end];grid-template-rows:[header-start] 5rem [header-end main-start] 1fr [main-end footer-start] 5rem [footer-end]}}h1,h2,h3,h4,h5,h6{color:#00adb5;font-family:"Nunito",sans-serif;line-height:1.3}div,p,li,a{color:#eaeaea;font-family:"Barlow Condensed",sans-serif;letter-spacing:.03em;font-size:2.5rem;line-height:1.5}#loading-screen{align-items:center;background-color:#0d1b2a;display:flex;height:100vh;justify-content:center;opacity:1;position:fixed;transition:all .3s ease;width:100vw;z-index:1000}#loading-screen.hidden{opacity:0;z-index:-1}.button{align-items:center;color:#f9f9f9;display:grid;font-family:"Nunito",sans-serif;font-size:22px;font-weight:700;gap:5px 15px;grid-template-columns:min-content 1fr;grid-template-rows:repeat(2, 1fr);justify-content:center;max-height:6rem;max-width:fit-content;padding:1rem;position:relative;text-transform:uppercase;transition:all .2s ease}.button::before{background-position:center;background-repeat:no-repeat;background-size:contain;content:"";height:20px;width:20px;filter:invert(100%) sepia(4%) saturate(9%) hue-rotate(37deg) brightness(107%) contrast(95%)}.button::after{background-color:#00adb5;content:"";grid-column:span 2;grid-row:2/-1;height:3px;width:0%;transition:all .2s ease}.button--arrow-outward::before{background-image:url(../icons/icon-arrow-outward.svg)}.button--new-tab::before{background-image:url(../icons/icon-new-tab.svg)}.button:hover::before{filter:invert(100%) sepia(4%) saturate(9%) hue-rotate(37deg) brightness(107%) contrast(95%)}.button:hover::after{width:100%}.intro{border-bottom:5px solid #2e3a47;display:grid;grid-template-columns:1fr 55rem;justify-content:space-between;margin:0 auto;max-height:100vh;min-height:50rem;width:100%}@media only screen and (max-width: 56.25em){.intro{grid-template-columns:1fr;grid-template-rows:1fr 30vh;max-height:unset}}.intro__text{display:grid;margin:3rem 0;row-gap:3rem}.intro__title{animation:slideLeftToRight 1s ease-in-out .2s forwards;display:flex;flex-direction:column;font-size:3rem;justify-content:end;opacity:0;position:relative;text-transform:uppercase}.intro__title h2{color:#00adb5}.intro__title h2>i{color:#f9f9f9}.intro__description{animation:slideLeftToRight 1s ease-in-out .6s forwards;grid-column-start:1;opacity:0;position:relative}.intro__cta{animation:slideLeftToRight 1s ease-in-out .8s forwards;opacity:0}.intro__picture{align-items:end;animation:slideRightToLeft 1s ease-in-out 0s forwards;background-color:#fff;display:flex;grid-column:2/-1;grid-row:1/span 2;opacity:0;position:relative}@media only screen and (max-width: 56.25em){.intro__picture{grid-column:1/-1;grid-row:2/-1;width:100%}}.intro__picture::before,.intro__picture::after{background-color:#0d1b2a;content:"";height:100%;position:absolute;width:20rem;z-index:10}@media only screen and (max-width: 31.25em){.intro__picture::before,.intro__picture::after{width:10rem}}.intro__picture::before{background:linear-gradient(to top right, #0D1B2A 50%, transparent 0);left:0}.intro__picture::after{background:linear-gradient(to bottom left, #0D1B2A 50%, transparent 0);right:0}.intro__picture-bg{animation:fadeIn 1s ease-in-out .8s forwards;background-image:url(../img/joel-dion-no-bg.png);background-position:-100% bottom;background-repeat:no-repeat;background-size:contain;filter:grayscale(1) brightness(0.8);height:100%;opacity:0;position:absolute;width:100%}@media only screen and (max-width: 56.25em){.intro__picture-bg{background-position:50% 100%}}@media only screen and (max-width: 31.25em){.intro__picture-bg{left:-20px}}.projects{display:grid;gap:15rem}.project{align-items:start;display:grid;gap:15rem;grid-template-columns:60rem 1fr}@media only screen and (max-width: 87.5em){.project{gap:12rem;grid-template-columns:50rem 1fr}}@media only screen and (max-width: 75em){.project{grid-template-columns:45rem 1fr}}@media only screen and (max-width: 56.25em){.project{gap:8rem;grid-template-columns:minmax(20rem, 50rem)}}.project__images{position:relative;line-height:0;max-height:380px}@media only screen and (max-width: 87.5em){.project__images{max-height:316px}}@media only screen and (max-width: 75em){.project__images{max-height:228px}}@media only screen and (max-width: 56.25em){.project__images{max-height:initial}}.project__image{border:5px solid #2e3a47;transition:all .4s ease}.project__image--desk{aspect-ratio:30/19;border-radius:2rem}.project__image--desk.hovered{transform:rotate(-5deg)}@media only screen and (max-width: 47.9em){.project__image--desk{display:none}}.project__image--mobile{aspect-ratio:1/2;border-radius:1rem;bottom:-2rem;position:absolute;right:-10rem}.project__image--mobile.hovered{transform:rotate(5deg)}@media only screen and (max-width: 87.5em){.project__image--mobile{right:-8rem;width:12rem}}@media only screen and (max-width: 56.25em){.project__image--mobile{right:-4rem}}@media only screen and (max-width: 47.9em){.project__image--mobile{right:0;position:relative;width:180px}}.project__text{display:grid;gap:3rem}.project__title{font-size:4rem}.header{background-color:#0d1b2a;display:grid;grid-column:margin-left-start/margin-right-end;grid-template-columns:inherit;height:5rem;position:sticky;top:0;width:100%;z-index:100;border-bottom:5px solid #2e3a47;transition:all .4s ease}@media only screen and (max-width: 47.9em){.header{height:7rem;border-bottom:0}}.header__content{align-items:center;display:flex;grid-column:main-start/main-end;height:100%;justify-content:space-between}@media only screen and (max-width: 47.9em){.header__content{display:grid;justify-content:center;grid-template-columns:1fr;grid-column:1/-1;text-align:center;background-color:rgba(0,0,0,.8);padding:8rem 1rem 4rem;gap:3rem;opacity:0;visibility:hidden;transition:all .4s ease}.header__content.visible{opacity:1;visibility:visible;height:100vh}}.header__nav{align-items:center;display:flex;gap:5rem}@media only screen and (max-width: 47.9em){.header__nav{display:grid;grid-template-columns:1fr;height:100%;gap:3rem}}.nav__item{color:#fff}.nav__item:hover{color:#00adb5}@media only screen and (max-width: 47.9em){.nav__item{font-size:3.6rem}}.contact{display:flex;gap:3rem}@media only screen and (max-width: 47.9em){.contact{display:grid;grid-template-columns:repeat(2, 1fr);height:100%;justify-content:center;font-size:2rem;margin:0 auto;gap:3rem 0}}.contact__item{align-items:center;border-radius:5px;display:grid;gap:2rem;grid-template-columns:1rem 1fr;padding:.5rem 0;color:#fff}.contact__item:hover{color:#00adb5}.contact__item--phone::before{background-image:url(../icons/icon-phone.svg)}@media only screen and (max-width: 47.9em){.contact__item--phone{grid-column:span 2}}.contact__item--email::before{background-image:url(../icons/icon-email.svg)}@media only screen and (max-width: 47.9em){.contact__item--email{grid-column:span 2}}.contact__item--linkedin::before{background-image:url(../icons/icon-linkedin2.svg)}.contact__item--github::before{background-image:url(../icons/icon-github.svg)}.contact__item--icon-only{grid-template-columns:1fr}.contact__item::before{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;content:"";height:2rem;width:2rem;filter:invert(54%) sepia(75%) saturate(2343%) hue-rotate(144deg) brightness(89%) contrast(101%)}@media only screen and (max-width: 47.9em){.contact__item{text-align:center;padding:0;margin:0 auto;font-size:3.6rem;gap:5rem}.contact__item::before{height:4rem;width:4rem}}#hamburger{display:none;visibility:hidden;position:absolute;right:15px;top:15px;z-index:100;flex-direction:column;justify-content:space-between;height:30px}#hamburger>i{width:30px;height:3px;background-color:#fff;transition:all .3s ease}#hamburger.open>i:nth-child(1){transform:rotate(45deg) translate(11px, 9px)}#hamburger.open>i:nth-child(2){display:none}#hamburger.open>i:nth-child(3){transform:rotate(-45deg) translate(10px, -8px)}@media only screen and (max-width: 47.9em){#hamburger{display:flex;visibility:visible}}.main{display:grid;gap:5rem;grid-column:main-start/main-end;grid-row:main-start/main-end;transition:all .3s ease}.main.blurred{filter:blur(10px)}.profile>img{max-width:20rem;filter:grayscale(1)}.section__title{font-size:3.5rem;text-transform:uppercase;margin-bottom:5rem}.footer{display:grid;grid-column:margin-left-start/margin-right-end;grid-row:footer-start/footer-end}.footer__content{font-size:2rem;padding:10rem 10rem 2rem 10rem;text-align:center}