@font-face{font-family:Gallient;src:url(/static/media/GallientRegular-eZoMp.419a762c1efbc6a5bd7c.ttf)}body{-ms-overflow-style:none;background-color:#181618;border:0;color:#0a0a0a;cursor:auto;font-family:Gallient;font-size:1.15vw;font-weight:400;line-height:1.4;font:inherit;margin:0;overflow-x:hidden;overflow-y:scroll;padding:0;scrollbar-width:none;transition:color .3s ease 0s;vertical-align:baseline}body::-webkit-scrollbar{height:0;width:0}a{background-color:transparent;color:#000;cursor:url(/static/media/cursor.6797a4bc81e7bcd22c41.svg) 14 16,auto}.App.dark-mode a,.App.dark-mode button{color:#fff;cursor:url(/static/media/cursor_darkmode.a2b8fc65ff554d4e8d09.svg) 14 16,auto}.App.dark-mode{color:#fff}button{-webkit-font-feature-settings:inherit;font-feature-settings:inherit;-webkit-font-smoothing:inherit;-webkit-appearance:none;appearance:none;background:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:normal;margin:0;overflow:visible;padding:0;width:auto}.site__nav.show{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.site__nav{left:0;mix-blend-mode:difference;opacity:0;position:fixed;top:60px;transition:all .5s cubic-bezier(.55,.28,.49,.74);width:100%;z-index:999}.site__navbar{align-items:center;display:flex;flex-flow:row nowrap;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;list-style:none;margin:0;padding:0 5vw}.site__navbar-link{align-items:center;color:#fff;display:flex;justify-content:center;text-decoration:none}.site__navbar-link--tl{position:relative}svg{height:50px;margin-right:10px;width:50px}svg g path{fill:#09f}.menu-toggle{color:#fff;height:40px;pointer-events:auto;width:40px}.menu-toggle .bottom,.menu-toggle .top{background:#fff;height:2px;width:100%}.menu-toggle:hover .bottom{width:80%}.menu-toggle .bottom{margin-top:8px;transition:all .3s ease-in-out 0s;width:50%}section.hero{align-items:center;height:95vh;justify-content:center;padding-bottom:5vh;text-transform:uppercase}.text,section.hero{display:flex;position:relative}.text{flex-flow:column wrap}.line.first_line{text-align:start}.line span{align-items:baseline;display:inline-flex;overflow:hidden;position:relative;white-space:nowrap}.hero .text .line{color:#fff;font-size:115px;letter-spacing:.03em;line-height:.9;text-transform:uppercase;white-space:nowrap;width:auto}.hero .text .line.second_line{padding-left:240px}.hero .text .line.third_line{padding-left:150px;position:relative}.line.second_line .and{border:1px solid;border-radius:50%;display:inline-block;font-size:16px;padding:5px 10px;-webkit-transform:translate3d(-10px,20px,0);transform:translate3d(-10px,20px,0)}.hero .text .line.third_line:after{color:#fff;content:"Phuoc is an engineer based in Toronto.";font-size:12px;letter-spacing:.01em;line-height:1.4;position:absolute;right:-70px;text-transform:uppercase;top:-60px;white-space:normal;width:250px}.hero .scroll-indicator{align-items:center;bottom:40px;display:flex;flex-direction:column;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.scroll-indicator{margin:0 auto;opacity:.5;position:relative;width:12px}.scroll-indicator:after,.scroll-indicator:before{content:"";display:block;margin-left:auto;margin-right:auto}.scroll-indicator:before{-webkit-animation:dot 3s ease-in-out infinite;animation:dot 3s ease-in-out infinite;border:1px solid #fff;border-radius:10px;height:12px;width:12px}.scroll-indicator:after{-webkit-animation:arrow 3s ease-in-out infinite;animation:arrow 3s ease-in-out infinite;-webkit-animation-delay:.75s;animation-delay:.75s;border-bottom:1px solid #fff;border-right:1px solid #fff;height:7px;opacity:.25;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:7px}.scroll-indicator>div{display:block}.scroll-indicator>div:after,.scroll-indicator>div:before{-webkit-animation:dot 3s ease-in-out infinite;animation:dot 3s ease-in-out infinite;border:1px solid #fff;border-radius:10px;content:"";display:block;margin:5px auto}.scroll-indicator>div:before{-webkit-animation-delay:.25s;animation-delay:.25s;height:8px;width:8px}.scroll-indicator>div:after{-webkit-animation-delay:.5s;animation-delay:.5s;height:6px;width:6px}#tsparticles{bottom:0;left:0;position:absolute;right:0;top:0}@-webkit-keyframes dot{0%{opacity:.25;-webkit-transform:scale(.75);transform:scale(.75)}25%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:.25;-webkit-transform:scale(.75);transform:scale(.75)}}@keyframes dot{0%{opacity:.25;-webkit-transform:scale(.75);transform:scale(.75)}25%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:.25;-webkit-transform:scale(.75);transform:scale(.75)}}@-webkit-keyframes arrow{0%{opacity:.25;-webkit-transform:scale(.75) rotate(45deg);transform:scale(.75) rotate(45deg)}25%{opacity:1;-webkit-transform:scale(1) rotate(45deg);transform:scale(1) rotate(45deg)}to{opacity:.25;-webkit-transform:scale(.75) rotate(45deg);transform:scale(.75) rotate(45deg)}}@keyframes arrow{0%{opacity:.25;-webkit-transform:scale(.75) rotate(45deg);transform:scale(.75) rotate(45deg)}25%{opacity:1;-webkit-transform:scale(1) rotate(45deg);transform:scale(1) rotate(45deg)}to{opacity:.25;-webkit-transform:scale(.75) rotate(45deg);transform:scale(.75) rotate(45deg)}}@media only screen and (max-width:480px){.hero .text .line{font-size:2em!important}.hero .text .line.second_line{padding-left:0}.hero .text{margin-top:0!important}.hero .text .line.third_line{padding-left:0;position:relative}.line.second_line .and{-webkit-transform:translate3d(0);transform:translate3d(0)}.hero .text .line.third_line:after{content:""!important}.line.second_line .and{border:1px solid;border-radius:50%;display:inline-block;font-size:16px;padding:5px 10px;-webkit-transform:translateZ(0);transform:translateZ(0)}}@media (max-width:780px){.hero .text{margin-top:-25vh}.hero .text .line{font-size:40px}}@media (max-width:1200px){.hero .text .line{font-size:80px}.hero .text .line.third_line:after{color:#fff;content:"Phuoc is an engineer based in Toronto.";font-size:12px;letter-spacing:.01em;line-height:1.4;position:absolute;right:-100px;text-transform:uppercase;top:-60px;white-space:normal;width:250px}}.about_wrapper{color:#fff;margin-top:30vh}.section{align-items:center;display:flex;flex-flow:column nowrap;padding:0 10vw}.title{text-align:center}.text-h2-5{color:#fff;font-size:35px;line-height:1.1}.headline,.text-h2-5{text-transform:uppercase}.headline{font-size:14px}.separator{background-color:#fff;height:2px;margin-bottom:50px;margin-top:20px;opacity:.2;width:100%}.button{border:1px solid #404040;border-radius:30px;color:#fff;font-size:14px;margin-top:40px;padding:15px 50px;text-transform:uppercase;transition:background-color .5s ease 0s}.button:hover{background-color:#09f;color:#fff}a{text-decoration:none}@media (max-width:480px){.text-h2-5{font-size:24px;line-height:1.2}}.skills{color:#fff;margin-top:20vh}.skills_section{align-items:center;padding:0 10vw}.skills_section .skills_headline{font-size:14px;justify-content:center;text-align:center;text-transform:uppercase}.separator.text-top{margin-bottom:40px}.m-scroll{display:flex;height:200px;margin:auto;overflow:hidden;position:relative;width:100%;z-index:1}.m-scroll__title{align-items:center;display:flex;height:100%;justify-content:flex-start;left:-4500px;position:absolute;top:0;-webkit-transform:scale(2);transform:scale(2);transition:all 1s ease;white-space:nowrap;width:100%}.m-scroll__title>div{-webkit-animation:scrollText 33s linear infinite;animation:scrollText 33s linear infinite;display:flex}.m-scroll__title h1{color:#fff;font-size:140px;margin:0;transition:all 2s ease}.m-scroll__title a{color:#fff;text-decoration:none}.m-scroll__title a:hover{-webkit-text-stroke:1px #fff;color:transparent}@-webkit-keyframes scrollText{0%{-webkit-transform:translateX(-10%);transform:translateX(-10%)}to{-webkit-transform:translateX(50%);transform:translateX(50%)}}@keyframes scrollText{0%{-webkit-transform:translateX(-10%);transform:translateX(-10%)}to{-webkit-transform:translateX(50%);transform:translateX(50%)}}.m-scroll__title_left{align-items:center;display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;-webkit-transform:scale(2);transform:scale(2);transition:all 1s ease;white-space:nowrap;width:100%}.m-scroll__title_left>div{-webkit-animation:scrollText_left 33s linear infinite;animation:scrollText_left 33s linear infinite;display:flex}.m-scroll__title_left h1{-webkit-text-stroke:1px #fff;color:#fff;color:transparent;font-size:140px;margin:0;transition:all 2s ease}.m-scroll__title_left a{color:#fff!important;color:transparent!important;text-decoration:none}.m-scroll__title_left a:hover{color:#fff!important}@-webkit-keyframes scrollText_left{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes scrollText_left{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@media only screen and (max-width:480px){.m-scroll__title_left h1{font-size:50px}.m-scroll__title{align-items:center;display:flex;height:100%;justify-content:flex-start;left:-2000px;position:absolute;top:0;-webkit-transform:scale(2);transform:scale(2);transition:all 1s ease;white-space:nowrap;width:100%}.m-scroll__title h1{font-size:50px}.m-scroll{height:70px}}.project_section{align-items:center;margin-top:20vh;padding:0 10vw}.projects_container{width:100%}.project_content{display:flex;margin-bottom:40px;-webkit-transform:none;transform:none}.project_content .title{color:#fff;font-size:100px;font-style:normal;font-weight:400;letter-spacing:.03em;line-height:.9;margin-left:40px;text-transform:uppercase}.hover-images-wrapper{left:0;pointer-events:none;position:fixed;top:0;z-index:10}.hover-images-wrapper .hover-images{transition:opacity .3s ease-out 0s}.hover-images-wrapper .hover-images img,.hover-images-wrapper .hover-images video{height:auto;object-fit:cover;width:35vw}.headline,.index{color:#fff}.container{align-content:center;display:flex;flex-direction:column;justify-content:center}h1{color:#fff;font-size:50px;margin:0 auto;text-align:center;text-transform:uppercase}.animation{position:relative;width:100%}.animation div{height:100%;overflow:hidden;-webkit-transform:skewX(-20deg);transform:skewX(-20deg);width:50%}.animation div:before{background:#fff;content:"";height:4px;position:absolute;width:0}.animation span{padding:0 10px}.animation-left:before{-webkit-animation:widthLineLeft 1.2s cubic-bezier(.68,-.55,.265,1.1) .4s forwards;animation:widthLineLeft 1.2s cubic-bezier(.68,-.55,.265,1.1) .4s forwards;left:0}.animation-left span{-webkit-animation:slideLeft 1.2s cubic-bezier(.68,-.55,.265,1.1) .3s forwards;animation:slideLeft 1.2s cubic-bezier(.68,-.55,.265,1.1) .3s forwards;display:block;-webkit-transform:translateX(200px) skewX(20deg);transform:translateX(200px) skewX(20deg)}.animation-right{position:absolute;right:0;top:0}.animation-right:before{-webkit-animation:widthLineRight 1.2s cubic-bezier(.68,-.55,.265,1.1) .4s forwards;animation:widthLineRight 1.2s cubic-bezier(.68,-.55,.265,1.1) .4s forwards;bottom:0;right:0}.animation-right span{-webkit-animation:slideRight 1.2s cubic-bezier(.68,-.55,.265,1.1) .3s forwards;animation:slideRight 1.2s cubic-bezier(.68,-.55,.265,1.1) .3s forwards;left:-100%;position:absolute;-webkit-transform:translateX(-200px) skewX(20deg);transform:translateX(-200px) skewX(20deg);width:100%}.invisble{visibility:hidden!important}@-webkit-keyframes slideLeft{0%{-webkit-transform:translateX(200px) skewX(20deg);transform:translateX(200px) skewX(20deg)}to{-webkit-transform:translateX(0) skewX(20deg);transform:translateX(0) skewX(20deg)}}@keyframes slideLeft{0%{-webkit-transform:translateX(200px) skewX(20deg);transform:translateX(200px) skewX(20deg)}to{-webkit-transform:translateX(0) skewX(20deg);transform:translateX(0) skewX(20deg)}}@-webkit-keyframes slideRight{0%{-webkit-transform:translateX(-200px) skewX(20deg);transform:translateX(-200px) skewX(20deg)}to{-webkit-transform:translateX(0) skewX(20deg);transform:translateX(0) skewX(20deg)}}@keyframes slideRight{0%{-webkit-transform:translateX(-200px) skewX(20deg);transform:translateX(-200px) skewX(20deg)}to{-webkit-transform:translateX(0) skewX(20deg);transform:translateX(0) skewX(20deg)}}@-webkit-keyframes widthLineLeft{0%{left:0;width:0}50%{left:0;width:100%}to{left:100%;width:0}}@keyframes widthLineLeft{0%{left:0;width:0}50%{left:0;width:100%}to{left:100%;width:0}}@-webkit-keyframes widthLineRight{0%{right:0;width:0}50%{right:0;width:100%}to{right:100%;width:0}}@keyframes widthLineRight{0%{right:0;width:0}50%{right:0;width:100%}to{right:100%;width:0}}@media screen and (max-width:800px){h1{font-size:30px}}@media (max-width:480px){.project_content .title{font-size:40px;line-height:1.1;margin-left:18px}}.contact_section{align-items:center;padding:0 10vw}.contact_title{margin-bottom:80px;margin-top:160px}.home__title--3{font-size:16vw;margin:var(--marginTop) 0 var(--marginTopSmall) 0}.home__title,.home__title--d{position:relative}.home__title{font-size:13vw;letter-spacing:4px;margin:0;text-align:left;text-transform:uppercase;z-index:10}.home__title,.title--big{color:#363636;font-family:Gallient;font-size:14.5vw;font-weight:400;line-height:1}.flex-column{flex-direction:column!important}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--bs-gutter-x)*-.5);margin-right:calc(var(--bs-gutter-x)*-.5);margin-top:calc(var(--bs-gutter-y)*-1)}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.home__contact{color:#fff;margin:0;padding:0 4px;text-transform:uppercase}.justify-content-center{justify-content:center!important}.home__contact i,.text i{display:inline-block;font-style:normal;padding-left:8px;padding-right:8px;position:relative}.home__contact i:before,.text i:before{background:#09f;color:#ccc;content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:100%;z-index:-1}.home__contact-email{display:inline-block}.home__contact-email u a:hover{color:#09f}@media (min-width:992px){.home__title--3{font-size:14.5vw}.home__contact{padding:0}.home__contact,.text--big{font-size:32px;letter-spacing:-1px;line-height:48px}.home__contact u:before,.text u:before{bottom:0;height:2px}}.footer_section{flex-flow:column nowrap;margin:20vh auto 0;padding-bottom:10vh;width:80vw}.footer_section,.small-line{align-items:center;display:flex}.small-line{flex-flow:row nowrap;justify-content:space-between;margin-top:-20px;width:100%}.small-line .socials{display:flex;flex-flow:row wrap}ol.socials,ul.socials{list-style:none}.small-line .socials li{font-size:14px;margin:0 20px;text-transform:uppercase}@media (max-width:750px){.small-line .socials{justify-content:center}}
/*# sourceMappingURL=main.3fdcea95.css.map*/