html{background-color:#f1f1f1;height:100vh}body{box-sizing:border-box;letter-spacing:.6px;margin:0;padding:0}p,span{font-family:Inter,sans-serif}span{font-size:17px}h1,h2{font-family:Bai Jamjuree,sans-serif;font-size:32px;line-height:1.2}h1,h2,h3,h4{font-weight:500;margin:0}button,h3,h4{font-family:Inter,sans-serif}button{background-color:#f1f1f1;border-style:none;font-size:35px;letter-spacing:.4px}html.darkMode{background-color:#0f0f0f}.navigation{-webkit-animation:fade-left 1.4s ease-in-out;animation:fade-left 1.4s ease-in-out;margin-right:0;position:relative}.main-top{-webkit-animation:fade-right 1.5s both;animation:fade-right 1.5s both;margin-left:0;opacity:1;position:relative}@-webkit-keyframes slide-left{0%{opacity:0;-webkit-transform:translateX(70%);transform:translateX(70%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-left{0%{opacity:0;-webkit-transform:translateX(70%);transform:translateX(70%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fade-left{0%{margin-right:-300px}to{margin-right:0}}@keyframes fade-left{0%{margin-right:-300px}to{margin-right:0}}@-webkit-keyframes fade-right{0%{margin-left:-600px}to{margin-left:0}}@keyframes fade-right{0%{margin-left:-600px}to{margin-left:0}}.main-bottom .page-title-text,.main-center .page-title-text,.projects-page .page-title-text{color:#101010;font-size:28px;margin-left:20px;padding:55px 20px;position:relative;text-align:center;text-shadow:-3px 4px 3px rgba(0,0,0,.388)}.main-bottom .page-title-text:before,.main-center .page-title-text:before,.projects-page .page-title-text:before{border-left:5px solid #000;box-shadow:-3px 4px 3px 0 rgba(0,0,0,.388);content:"";left:-12px;position:relative}@media(min-width:375px){.main-bottom .page-title-text,.main-center .page-title-text,.projects-page .page-title-text{padding:85px 20px}}@media(min-width:798px){.main-bottom .page-title-text,.main-center .page-title-text,.projects-page .page-title-text{font-size:32px;padding:100px 20px}}@media(min-width:1100px){.main-bottom .page-title-text,.main-center .page-title-text,.projects-page .page-title-text{padding:150px 20px 100px}}@media(min-width:698px){.main-bottom .page-title-text{padding:85px 20px 75px}}@media(min-width:798px){.main-bottom .page-title-text{padding:100px 20px 90px}}@media(min-width:1100px){.main-bottom .page-title-text{padding:145px 20px 90px}}.page-title-text.darkMode{color:#dadada;text-shadow:-3px 4px 3px hsla(0,0%,97%,.439)}.page-title-text.darkMode:before{border-left:5px solid #dadada;box-shadow:-3px 4px 3px 0 hsla(0,0%,97%,.439)}.link,a{color:#0f0f0f;font-family:Bai Jamjuree,sans-serif;text-decoration:none;text-transform:uppercase}.mode-settings-btn{padding:10px}@media(min-width:798px){.mode-settings-btn{padding:10px 20px}}.mode-btn-dark{background-color:transparent;color:#dadada;cursor:pointer;font-size:17px;padding:0;position:relative;top:2px;-webkit-transform:rotate(15deg);transform:rotate(15deg)}@media(min-width:798px){.mode-btn-dark{font-size:18px}}.mode-btn-light{color:#dadada;cursor:pointer;font-size:24px;padding:20px 10px 10px 0}.header,.mode-btn-light{background-color:#0f0f0f;position:relative}.header{align-items:center;display:flex;height:54px;justify-content:space-between;padding:10px}@media(min-width:798px){.header{padding:10px 20px}}.navigation{display:flex;justify-content:space-between;padding:23px 10px 10px}@media(min-width:798px){.navigation{padding:24px 20px 10px}}.navigation .link{color:#dadada;font-size:15px}@media(min-width:798px){.navigation .link{font-size:16px}}.link.home-link{margin-right:15px}@media(min-width:375px){.link.home-link{margin-right:35px}}.link.home-link:after,.link.projects-link:after{border-radius:50%;content:"";display:flex;height:4px;margin:5px auto;width:12px}.link.home-link.active:after,.link.projects-link.active:after{background-color:#dadada}.link.home-link:not(.active):focus:after,.link.home-link:not(.active):hover:after,.link.projects-link:not(.active):focus:after,.link.projects-link:not(.active):hover:after{border:1px solid #dadada;height:2px;width:10px}.intro{background-color:#0f0f0f;color:#dadada;padding:30px 20px 50px}@media(min-width:820px){.intro{font-size:18px;padding:30px 40px 50px}}@media(min-width:1100px){.intro{display:flex;flex-direction:column;justify-content:center;padding:40px 0 40px 100px;width:50%}}.intro-title{font-size:16px;margin:20px 0 10px;text-transform:uppercase}.intro p{color:#9f9f9f;line-height:1.5;margin:0 0 20px}.cover-wrapper{background-color:#000;opacity:.94;padding-top:45px}@media(min-width:375px){.cover-wrapper{padding:10% 0 4%}}@media(min-width:1100px){.cover-wrapper{width:50%}}.cover{background-image:url(/portfolio/static/media/photo.011ae170161f8445e9de.jpg);background-position:50%;background-size:cover;box-shadow:inset 5px 0 35px 50px #000;height:450px;width:100%}@media(min-width:1100px){.cover{height:100%}}.cover-wrapper.darkMode{background-color:#000;opacity:.94}.goToMain-btn{display:none}@media(min-width:1100px){.goToMain-btn{align-items:center;background-color:#f1f1f1;border-radius:50px;cursor:pointer;display:flex;height:30px;justify-content:center;left:calc(50vw - 20px);margin-top:-15px;opacity:.9;position:relative;width:30px}}.goToMain-btn.darkMode{background-color:transparent;border:2px solid #dadada;color:#dadada}.typewriter{height:120px;margin-bottom:50px}@media(min-width:323px){.typewriter{height:80px}}@media(min-width:468px){.typewriter{height:auto}}.typewriter-title-one{font-size:28px}@media(min-width:798px){.typewriter-title-one{font-size:32px}}.typewriter-title-two{display:flex;font-size:28px;line-height:1.6;width:100%}@media(min-width:375px){.typewriter-title-two{justify-content:flex-start}}@media(min-width:468px){.typewriter-title-two{display:inline}}@media(min-width:798px){.typewriter-title-two{font-size:32px}}.color-JavaScript{color:#fb630a}.color-React{color:#0093db}.card{margin:0 20px}.card-content{background-color:#1e1e1e;border-radius:11px;display:flex;flex-direction:column}.card-cover{background-color:hsla(0,0%,72%,.671);border-radius:9px 9px 0 0;height:100%;margin:0;max-height:150px;overflow:hidden;position:relative}@media(min-width:375px){.card-cover{max-height:200px}}.card-cover img{-webkit-filter:saturate(0);filter:saturate(0)}.image-desktop,.image-mobile{bottom:0;height:100%;left:0;position:relative;right:0;top:0;-webkit-transform:rotate(-40deg);transform:rotate(-40deg);z-index:0}@media(max-width:600px){.image-desktop,.image-mobile{height:300px}}.image-mobile{height:300px;position:absolute}@media(min-width:600px){.image-mobile{display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:flex-end}}.image-desktop img{box-shadow:0 0 8px 0 rgba(0,0,0,.51)}.image-mobile img{border:1px solid hsla(0,0%,69%,.51);box-shadow:0 0 8px 0 hsla(0,0%,69%,.659)}@media(max-width:600px){.image-mobile img{display:none}}.card-content-right{background-color:#1e1e1e;border-radius:0 0 9px 9px;padding:35px 20px 30px}.card-title{color:#dadada;font-size:24px;-webkit-hyphens:auto;hyphens:auto;margin-bottom:8px}@media(min-width:820px){.card-title{font-size:28px}}.card-tags{color:#dadada;font-size:14px;line-height:1.4}@media(min-width:820px){.card-tags{font-size:15px}}.card-context{color:#9f9f9f;display:flex;justify-content:space-between;margin:40px 0 5px}@media(max-width:300px){.card-context{display:none}}@media(min-width:375px){.card-context{margin:45px 0 5px}}.first-context{display:flex;flex-direction:column}@media(min-width:500px){.first-context{flex-direction:row;width:70%}}.member-context,.type-context{align-items:flex-start;display:flex;line-height:1.3}@media(min-width:500px){.member-context{margin-left:25px}}.member-text,.type-text{font-size:14px;margin-left:5px}.member-text{margin-left:2px;position:relative;top:1px}.card-intro{-webkit-box-orient:vertical;-webkit-line-clamp:5;color:#9f9f9f;display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;margin:30px 0;overflow:hidden}.card-intro.active{display:flex}@media(min-width:300px){.card-intro{-webkit-line-clamp:3;margin:0 0 30px}}.chevron-down{background-color:transparent;color:#9f9f9f;display:flex;font-size:20px;justify-content:center;margin-top:-24px;text-align:center;width:100%}.chevron-down.active .chevron-down-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.chevron-down-icon{cursor:pointer}.chevron-down-icon:focus,.chevron-down-icon:hover{border-radius:50%;box-shadow:0 0 5px 2px hsla(0,0%,85%,.361)}.view-more{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px}@media(min-width:375px){.view-more{justify-content:flex-end}}.demo-link,.github-link{color:#dadada;font-size:17px;margin:5px;padding:6px 10px;text-transform:inherit}@media(min-width:375px){.demo-link,.github-link{margin:10px}}@media(min-width:820px){.demo-link,.github-link{font-size:18px}}.link.demo-link:focus:after,.link.demo-link:hover:after,.link.github-link:focus:after,.link.github-link:hover:after{border:1px solid #dadada;border-radius:50%;content:"";display:flex;height:2px;margin:5px auto -9px;width:10px}.card-content-left.darkMode{opacity:.85}.card-tags.darkMode,.card-title.darkMode,.demo-link.darkMode,.github-link.darkMode{color:#dadada}.link.demo-link.darkMode:focus:after,.link.demo-link.darkMode:hover:after,.link.github-link.darkMode:focus:after,.link.github-link.darkMode:hover:after{border:1px solid #dadada}.main-bottom .tags{margin-top:-10px;padding-bottom:45px}@media(min-width:698px){.main-bottom .tags{margin:0 auto;max-width:1400px;padding-bottom:100px}}.tags ul{display:flex;flex-wrap:wrap;justify-content:center;line-height:1.5;list-style-type:none;margin:0 5%;padding:0}@media(min-width:798px){.tags ul{margin:0 8%}}.tags li{color:#686868;font-family:Bai Jamjuree,sans-serif;font-size:18px;font-weight:500;padding:5px 15px}@media(min-width:798px){.tags li{font-size:19px}}@media(min-width:1100px){.tags li{padding:12px 20px}}.tags li.darkMode{color:#9f9f9f}.footer{align-items:center;background-color:#0f0f0f;display:flex;flex-direction:column;padding-bottom:20px;padding-top:20px}.followMe{color:#dadada;font-size:15px;padding:10px;text-transform:uppercase}@media(min-width:798px){.followMe{font-size:16px}}.media-icons{padding:10px}.media-icons a{color:#dadada}.footer .github-link{margin:0;padding:0}.icon{cursor:pointer;font-size:20px;margin:0 10px}.home-page .main-top{background-color:#fff}@media(min-width:1100px){.home-page .main-top{display:flex;flex-direction:row-reverse;height:85vh}}@media(min-width:1400px){.home-page .main-center{margin:0 auto;max-width:1400px}}@media(min-width:820px){.home-page .cards{margin:0 6%}.home-page .card{margin:30px 20px 35px}.home-page .card-content{flex-direction:row;justify-content:space-around}.home-page .card-content-left{min-width:40%}.home-page .card-cover{border-radius:9px;height:100%;margin:0;min-height:111%;position:relative;right:-4%;top:-5.5%}.home-page .image-desktop,.home-page .image-mobile{align-items:center;display:flex;justify-content:center;min-height:100%;position:absolute}.home-page .card-content-right{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:45%}}.home-page .card-intro{-webkit-line-clamp:10}@media(min-width:468px){.home-page .card-intro{-webkit-line-clamp:5}}@media(min-width:1400px){.projects-page{margin:0 auto;max-width:1400px}}.projects-page .cards{padding-bottom:40px}@media(min-width:820px){.projects-page .cards{display:flex;flex-wrap:wrap;justify-content:space-evenly}}@media(min-width:1100px){.projects-page .cards{margin-top:-25px}}.projects-page .cards .card{padding:15px 0}@media(min-width:798px){.projects-page .cards .card{padding:30px 0}}@media(min-width:820px){.projects-page .cards .card{width:540px}}.projects-page .cards .card:first-child{margin-top:-15px}@media(min-width:798px){.projects-page .cards .card:first-child{margin-top:-30px}}@media(min-width:1100px){.projects-page .cards .card:first-child{margin-top:0}}@media(min-width:1160px){.projects-page .card-content-right{display:flex;flex-direction:column;min-height:345px}}@media(min-width:820px){.projects-page .card-intro{margin:0 0 35px}}@media(min-width:1160px){.projects-page .view-more{margin-top:auto}}.notFound{position:relative;width:100%}.notFound-main{background-color:#f1f1f1;margin:0;min-height:100vh}.notFound-content,.notFound-main{display:flex;flex-direction:column;justify-content:center}.notFound-content{align-items:center;width:100%}.error-code{color:#0f0f0f;font-size:100px;font-weight:500}.error-message{color:#0f0f0f;font-size:24px;margin:50px;text-align:center}.notFound-main.darkMode{background-color:#0f0f0f}.error-code.darkMode,.error-message.darkMode{color:#dadada}
/*# sourceMappingURL=main.5ad61c80.css.map*/