@import url(https://fonts.googleapis.com/css2?family=Exo:wght@800&display=swap);@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@100&display=swap);@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400&display=swap);@import url(https://fonts.googleapis.com/css2?family=Exo:wght@200;400&display=swap);@import url(https://fonts.googleapis.com/css2?family=Mate+SC&display=swap);body,html{position:absolute;margin:0;background:#fbf5f3;font-size:12px;overflow-x:hidden;color:#070c0d;scroll-behavior:smooth;-webkit-user-select:none;-ms-user-select:none;user-select:none}.nav-space{height:0}.section-head{width:100vw;text-align:center;font-family:Signika Negative;text-transform:uppercase;font-size:8ch;font-weight:400}.hero-sec{position:absolute;top:10vh;left:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.hero-img{position:relative;left:15%;height:auto;width:auto;border-radius:0 0 0 250px;overflow:hidden}.hero-img img{height:100vh;opacity:.3}#hero-heading{width:90vw}.hero-sec #hero-heading{font-size:6em;font-family:Exo;margin:10px}.hero-sec .hero-txt{margin:8vh 0 0 30px;width:50vw;font-size:3.5ch;font-family:kanit}.hero-sec button{margin:4vh 0 0 10vw;border:2px solid #603db8;background:#603db8;padding:5px 10px;border-radius:3px;font-size:4ch;font-family:ubuntu;color:#ffc60a;transition:.3s}.hero-sec button:hover{background:transparent;color:#603db8}.social-links-desktop{display:none}.social-links-mobile{display:flex;height:23vh;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;flex-direction:column;justify-content:space-between;font-size:5vh;margin:10vh 3vw}.social-links-mobile a{color:#070c0d}.social-links-mobile a:hover{color:#603db8}@media only screen and (min-width:700px){.social-links-mobile{margin:0 -10vw;font-size:6vh}.social-links-mobile a{color:#070c0d}.social-links-mobile a:hover{color:#603db8}.hero-img{position:relative;left:35%;height:auto;width:auto;border-radius:0 0 0 250px;overflow:hidden}.hero-sec{margin:10vh 0 0 10vw}.hero-sec #hero-heading{font-size:16ch;font-family:Exo;margin:0 -5vh}.hero-sec .hero-txt{margin:4vh 0 0 30px;width:50vw;font-size:5ch;font-family:kanit}.hero-sec button{margin:5vh 0 0 10vw;border:2px solid #603db8;background:#603db8;padding:5px 10px;border-radius:3px;font-size:6ch;font-family:ubuntu;color:#ffc60a;transition:.3s}}@media only screen and (min-width:1200px){.social-links-mobile{display:none}.social-links-desktop{display:flex;height:33vh;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;flex-direction:column;justify-content:space-between;font-size:7vh;margin:20vh 3vw}.social-links-desktop a{color:#070c0d}.social-links-desktop a:hover{color:#603db8}.hero-sec{margin:8vh 0 0 10vw}.hero-sec #hero-heading{font-size:20ch;font-family:Exo;margin:0 -15vh}.hero-sec .hero-txt{margin:5vh 0 0 30px;width:50vw;font-size:5ch;font-family:kanit}.hero-sec button{margin:5vh 0 0;border:2px solid #603db8;background:#603db8;padding:5px 10px;border-radius:3px;font-size:6ch;font-family:ubuntu;color:#ffc60a;transition:.3s}.hero-img{position:relative;top:0;left:50%;height:auto;width:auto;border-radius:200px 0 0 20px;overflow:hidden;background:#ccdbdc;width:50vw;display:flex;justify-content:space-between}.hero-img img{border-radius:0 0 100px 20px;height:100vh;opacity:.8}}#skills{position:relative;margin:10vh 0}.skill-desktop{display:none}.skill-display{position:relative;width:100vw;height:auto;background:#ccdbdc;border-radius:10em 0;padding:5vh 0}.chart-div{display:grid;position:relative;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);grid-gap:5vh;grid-template-columns:repeat(2,1fr);justify-content:space-evenly;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:80vw}.chart-container{position:relative}.chart,.chart-container{width:40vw;height:40vw;min-width:150px;min-height:150px}.chart{position:absolute;top:0}.chart-container .skill-img{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:6em}.chart-container .skill-img .skill-logo{font-size:4rem}.chart-container .skill-img .skill-logo img{width:50px}.chart-container .skill-img .skill-name{font-size:1.9rem;font-family:ubuntu}@media only screen and (min-width:700px){.chart-div{display:grid;position:relative;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);grid-gap:1vh;grid-template-columns:repeat(3,1fr);justify-content:space-evenly;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.chart-container{position:relative;width:20vw;height:20vw}.chart{position:absolute;top:0;width:20vw;height:20vw}}@media only screen and (min-width:1100px){#skills{background:url(/static/media/bg.161851fb.jpg) no-repeat 50%/cover}.skill-nav-space{height:15vh}.skill-mobile{display:none}.skill-desktop{display:block;width:100%;text-align:center;font-family:Signika Negative;text-transform:uppercase;font-size:8ch;font-weight:400;margin:0}.skill-display{position:relative;width:70vw;height:auto;background:#ccdbdc;border-radius:0 0 10em 0;padding:5vh 0}.chart-div{display:grid;position:relative;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);grid-gap:3vh;grid-template-columns:repeat(3,1fr);justify-content:space-evenly;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.chart-container{position:relative;width:15vw;height:15vw}.chart{position:absolute;top:0;width:15vw;height:15vw}}.project-img-desktop{display:none}#projects{margin:0}.project-container{display:flex;flex-direction:column;left:50vw;height:70vh;min-height:750px;width:90vw;background:#ccdbdc}.project-container,.project-img{position:relative;-webkit-transform:translate(-50%);transform:translate(-50%);border-radius:20px}.project-img{top:10px;left:50%;width:85vw;height:300px;background:#98b6b1;overflow:hidden;box-shadow:0 0 10px -6px #070c0d}.project-img img{position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.project-title{display:flex;justify-content:space-between;position:relative;margin:30px 0 0 5vw}#project-name{font-family:Exo;font-weight:400;font-size:8ch;white-space:nowrap}.project-link{padding:10px 12px;font-size:3ch;margin:auto 5vw;background:#efefef;border-radius:50px;color:#070c0d;text-decoration:none;white-space:nowrap;transition:.2s}.project-link:hover{box-shadow:-5px 5px 13px -8px #070c0d;-webkit-transform:scale(1.05);transform:scale(1.05)}.project-txt{position:relative;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);width:80%}.project-txt p{font-family:Exo;font-weight:200;font-size:4.5ch;text-align:center;width:100%}.project-nav-container{display:flex;position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);width:100%}.project-nav{display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:#98b6b1;border-radius:20px;box-shadow:0 0 18px -6px #070c0d;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth}.project-nav::-webkit-scrollbar{height:0;width:0}.pro-nav-button{padding:1px 3px;margin:10px;background:#c2b3e6;display:flex;align-items:center;justify-content:center;border-radius:10px;box-shadow:0 0 13px -8px #070c0d;white-space:nowrap;font-size:4ch;font-family:Mate SC;font-weight:400px}.pro-nav-button:hover{background:#6b5a7e;color:#c2b3e6}.project-tab{padding:10px 30px;margin:10px;background:#c2b3e6;display:flex;align-items:center;justify-content:center;border-radius:10px;box-shadow:0 0 13px -8px #070c0d;white-space:nowrap;font-size:4ch;font-family:Mate SC;font-weight:400px}.project-tab.active{background:#6b5a7e;color:#fbf5f3}@media only screen and (min-width:700px){.project-img{height:400px}.project-txt p{font-size:6ch}}@media only screen and (min-width:1100px){.project-title{margin:30px 0 0 -2vw}#project-name{font-size:9ch}.project-img{display:none}.project-img-desktop{display:block;height:30vh;min-height:400px;overflow:hidden;border-radius:30px;background:#98b6b1;box-shadow:-15px 15px 38px -6px #070c0d}.project-img-desktop img{display:block;position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:40vw}.project-container-desktop{display:flex;justify-content:space-evenly;margin:0 50px;background:#ccdbdc;vertical-align:center;padding:10px 0;box-shadow:0 0 13px -3px #070c0d;border-radius:30px}.project-container{display:flex;flex-direction:column;position:relative;left:0;-webkit-transform:translate(0);transform:translate(0);height:40vh;min-height:450px;background:#ccdbdc;border-radius:20px;width:35vw}.project-txt p{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:5ch}}#contact{height:auto;margin:10vh 0 100px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.form-error{color:red;font-size:1.5ch;position:absolute;margin:0 0 0 10px}@font-face{font-family:"Material Icons Outlined";font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v54/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2")}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:400;font-style:normal;font-size:5vh;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}@media (min-width:768px) and (max-width:1023px){body{align-items:baseline}}@media (max-width:767px){body{align-items:baseline}}.contact_wrapper{display:flex;background:#ccdbdc;padding:40px 25px;box-shadow:0 10px 30px rgba(0,0,0,.3);position:relative;width:700px;border-radius:20px;font-family:ubuntu;left:50vw;-webkit-transform:translate(-50%);transform:translate(-50%)}@media (min-width:768px) and (max-width:1023px){.contact_wrapper{width:80vw;flex-direction:column;left:50vw;-webkit-transform:translate(-50%);transform:translate(-50%)}}@media (max-width:767px){.contact_wrapper{width:80vw;flex-direction:column;padding-top:0;left:50vw;-webkit-transform:translate(-50%);transform:translate(-50%)}}.contact_wrapper .contact_info{position:relative;width:230px;flex:0 0 230px;background:#98b6b1;color:#070c0d;margin-left:-145px;padding:25px;box-shadow:0 3px 20px rgba(0,0,0,.2);font-size:2.2ch;border-radius:20px}@media (min-width:768px) and (max-width:1023px){.contact_wrapper .contact_info{width:100%;flex:0 0 100%;margin-left:-50px;margin-top:-15px;display:flex;flex-direction:column;margin-bottom:20px;font-size:3ch}}@media (max-width:767px){.contact_wrapper .contact_info{width:100%;flex:0 0 100%;margin-left:-25px;margin-top:0;display:flex;flex-direction:column;margin-bottom:20px;font-size:3ch}.contact_wrapper .contact_info .icons_wrapp li .icon .material-icons-outlined{vertical-align:middle;font-size:3ch;width:32px;margin:0 25px 0 0}}.contact_wrapper .contact_info .title{font-size:24px;font-weight:400;margin:0 0 30px}.contact_wrapper .contact_info .icons_wrapp{margin:0;padding:0;list-style:none}.contact_wrapper .contact_info .icons_wrapp li{display:flex;align-items:baseline;margin:2vh 0}.contact_wrapper .contact_info .icons_wrapp li .icon .material-icons-outlined{vertical-align:middle;font-size:3ch;width:32px;margin:0 25px 0 0}.contact_wrapper .contact_info .icons_wrapp li .text{vertical-align:middle;line-height:1.4;text-decoration:none}.contact_wrapper .contact_info .icons_wrapp li .text a{text-decoration:none;color:#070c0d}.contact_wrapper .contact_info .icons_wrapp li .text a:hover,.contact_wrapper .contact_info .icons_wrapp li:hover{color:#603db8}.contact_wrapper .contact_info .soci_wrap{margin:20px 0 0;padding:0;list-style:none;display:flex;position:absolute;bottom:25px;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.contact_wrapper .contact_info .soci_wrap li{margin:0 20px}.contact_wrapper .contact_info .soci_wrap li a{color:#070c0d;text-decoration:none;transition:all .3s ease}.contact_wrapper .contact_info .soci_wrap li a:hover{color:#603db8}.contact_wrapper .contact_info .soci_wrap li a .material-icons-outlined{font-size:4ch}.contact_wrapper .contact_msg{width:calc(100% - 170px);flex-grow:0;flex-shrink:0;flex-basis:calc(100% - 170px);padding:25px 30px 0}@media (min-width:768px) and (max-width:1023px){.contact_wrapper .contact_msg{width:calc(100% - 55px);flex-grow:0;flex-shrink:0;flex-basis:calc(100% - 55px)}}@media (max-width:767px){.contact_wrapper .contact_msg{width:100%;flex-grow:0;flex-shrink:0;flex-basis:100%;padding:25px 0}}.contact_wrapper .contact_msg .title{font-size:24px;font-weight:400;margin:0 0 30px;padding:0 15px;color:#070c0d}.contact_wrapper .contact_msg .form_fild{position:relative;display:flex;flex-wrap:wrap;align-items:center}.contact_wrapper .contact_msg .form_fild .input_group{position:relative;margin-bottom:35px;padding:0 15px}.contact_wrapper .contact_msg .form_fild .input_group.w_50{width:calc(50% - 30px);flex-grow:0;flex-shrink:0;flex-basis:calc(50% - 30px)}@media (max-width:767px){.contact_wrapper .contact_msg .form_fild .input_group.w_50{width:calc(100% - 30px);flex-grow:0;flex-shrink:0;flex-basis:calc(100% - 30px)}}.contact_wrapper .contact_msg .form_fild .input_group.w_100{width:calc(100% - 30px);flex-grow:0;flex-shrink:0;flex-basis:calc(100% - 30px)}.contact_wrapper .contact_msg .form_fild .input_group .input{width:100%;min-height:30px;font-size:18px;color:#444;outline:none;font-weight:400;border:none;border-bottom:2px solid #e9e9e9;padding:5px;border-radius:10px}.contact_wrapper .contact_msg .form_fild .input_group .input.input_textarea{min-width:100%;min-height:75px;max-height:90px;max-width:100%;padding:15px 5px}.contact_wrapper .contact_msg .form_fild .input_group .input:hover{border-bottom-color:#ddd}.contact_wrapper .contact_msg .form_fild .input_group .input:focus{border-bottom-color:#aaa}.contact_wrapper .contact_msg .form_fild .input_group .input:focus~.placeholder,.contact_wrapper .contact_msg .form_fild .input_group .input:valid~.placeholder{top:-65px;left:-2px;font-size:16px!important;color:#603db8}.contact_wrapper .contact_msg .form_fild .input_group .input:focus~.placeholder.textarea,.contact_wrapper .contact_msg .form_fild .input_group .input:valid~.placeholder.textarea{top:-20px;left:-2px}.contact_wrapper .contact_msg .form_fild .input_group .placeholder{position:absolute;left:30px;top:0;bottom:0;display:flex;align-items:center;font-size:18px;color:#c2b3e6;font-weight:400;transition:all .3s ease;pointer-events:none}.contact_wrapper .contact_msg .form_fild .input_group .placeholder.textarea{align-items:baseline;top:15px}.contact_wrapper .contact_msg .form_fild .input_group .btn{border:2px solid #603db8;background:#603db8;padding:5px 10px;border-radius:3px;font-size:3ch;font-family:ubuntu;color:#ffc60a;transition:.3s}.contact_wrapper .contact_msg .form_fild .input_group .btn:hover{background:transparent;color:#603db8}.contact_wrapper .contact_msg .form_fild .input_group .btn:active{-webkit-transform:scale(.95);transform:scale(.95)}#footer{width:100vw;height:400px;background:#603db8}.end{width:100vw;height:100px;background:#fbf5f3;border-radius:0 0 150px 150px;box-shadow:0 40px 40px -10px rgba(0,0,0,.3)}.end-msg{position:relative;font-size:8ch;font-family:ubuntu;width:100vw;text-align:center;top:50%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.depth{color:#ffc60a}
/*# sourceMappingURL=main.d7e040ce.chunk.css.map */