@import"https://fonts.googleapis.com/css2?family=Gloock&display=swap";@import"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Kanit:wght@300;400;500;600&family=Nunito:wght@300;400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Kanit,sans-serif;background-color:#ffe120;width:100vw;height:100vh}h1,h3,section,p,span,svg,li{transition:background-color .2s ease-in-out,color .4s ease-in-out;transition:color .2s ease-in-out,color .4s ease-in-out}:root{--color-text-light: #f7f7f2;--color-text-dark: #034b46;--color-text-black: rgb(15, 14, 14)}.light-theme{background-color:#fff;--color-background: rgb(252, 250, 250);--color-main-title: rgb(246, 246, 246);--color-p-title: #00032c72;--color-p: #246971de;--color-text: rgb(39, 38, 38);--color-floor: #011222cd}.dark-theme{background-color:#000;--color-background: rgba(43, 41, 41, .978);--color-main-title: rgb(32, 31, 31);--color-p-title: #00032c8a;--color-p: #00fae9df;--color-text: rgb(243, 235, 235);--color-text2: rgb(33, 33, 33)}canvas{position:fixed;top:0;left:0;z-index:-1}h1{letter-spacing:.2rem}p,h3{letter-spacing:.01rem}.threeModel{position:fixed;width:100vw;height:100vh}.threeModel-canvas{width:100%;height:100%}.hidden{display:none}.page{z-index:9999999999;width:100vw;height:100vh;overflow:hidden}.page-wrapper{position:relative}.page:hover:before{opacity:1}.page:before{background:radial-gradient(150px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,254,.7),transparent 50%);border-radius:inherit;content:"";height:100%;left:0px;opacity:0;transition:opacity .5s;position:absolute;top:0px;width:100%;z-index:-2}.page:after .page:before{opacity:0}.preloader{background-color:#ebe9d6;width:100%;height:100vh;opacity:1;position:fixed;z-index:9999999}.preloader-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loading{display:flex;justify-content:center;align-items:center}.circle{width:10px;height:10px;border-radius:50%;margin:6px;background-color:var(--color-text-dark);animation:load 1s ease-in-out infinite}.circle:nth-child(2){animation-delay:.15s}.circle:nth-child(3){animation-delay:.25s}@keyframes load{0%{transform:translateY(0)}20%{transform:translateY(-12px)}40%{transform:translateY(0)}}.animate-this{display:inline-block;transform:translateY(100%)}.text-flex{display:flex;justify-content:center;align-items:center}.intro-text{position:absolute;color:var(--color-text-dark);top:50%;left:50%;font-weight:500;font-size:1.4rem;transform:translate(-50%,-50%)}.arrow-svg-wrapper{position:absolute;border:none;background-color:transparent;color:#000;top:90%;left:50%;opacity:0;transform:translate(-50%,-50%);animation:bounce .5s ease-in alternate infinite}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(8px)}}.section-margin{height:200px}.section{height:100vh;width:100%;position:relative}.section-first{display:flex;justify-content:center;align-items:center;flex-direction:column}.arrow-svg-wrapper-up{position:absolute;border:none;background-color:transparent;color:#000;top:90%;left:50%;opacity:1;transform:translate(-50%,-50%);transition:transform .4s ease-in-out;animation:bounceUp .5s ease-in alternate infinite}@keyframes bounceUp{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.arrow-svg-wrapper-up:hover{cursor:pointer;transform:translate(-50%,-80%) scale(1.2)}.title-main{font-size:24rem;font-weight:700;font-family:Kanit,sans-serif;color:var(--color-main-title);filter:drop-shadow(3px 1px rgb(159,249,162)) drop-shadow(3.5px 2px rgb(250,247,143)) drop-shadow(4px 3px rgb(168,243,255)) drop-shadow(4.5px 4px rgb(245,167,255)) drop-shadow(20px .6px 10px rgba(0,0,0,.322))}.firstLine{width:430px;position:absolute;top:-12%;left:2%;transform:translate(-50%,-50%);transform:translateY(100%);opacity:0}.main-title-wrapper{width:100%;height:100%}.secondLine{position:absolute;top:27%;left:12%;transform:translate(-50%,-50%);transform:translateY(100%);opacity:0}.title-sub{font-size:4rem;position:absolute;top:38%;left:36.5%;font-weight:700;opacity:0;color:var(--color-p-title);text-shadow:1px 1px 1px rgba(0,0,0,.39);filter:drop-shadow(6px 5px 1px #0404047d);transform:translate(-25%) translateY(-25%)}.text_1{animation:text1}.text_2{animation:text2}.text_1,.text_2{font-family:Kanit,sans-serif;overflow:hidden;white-space:nowrap;display:inline-block;position:relative;animation-duration:8s;animation-timing-function:steps(20,end);animation-iteration-count:infinite}.text_1:after,.text_2:after{content:"|";position:absolute;animation:caret infinite;animation-duration:1s;animation-timing-function:steps(1,end)}@keyframes text2{0%,50%,to{width:0}60%,90%{width:6.9em}}@keyframes text1{0%,50%,to{width:0}10%,40%{width:10em}}@keyframes caret{0%,to{opacity:0}50%{opacity:1}}.about-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;justify-items:center;align-items:start;margin-top:50px}.title-main-second{font-size:4rem;color:var(--color-p);text-align:center;margin:50px 0;opacity:0;transform:translate(-50%)}.title2{text-align:left;margin:80px 0 0 50px;color:var(--color-p)}.title2-wrapper{display:flex;flex-direction:row}.title2-word2,.title2-word4{color:#fff}.title3{text-align:left;margin:250px 0 0 50px}.title3 span:nth-of-type(even){color:var(--color-p)}.title4{text-align:left;margin:150px 0 0 50px}.title4 span:nth-of-type(even){color:var(--color-p)}.section2{font-family:Kanit,sans-serif}.summary{max-width:450px;height:470px;margin:0 0 0 100px;padding:30px;transform:translate(-50%);opacity:0;background:rgba(255,255,255,.27);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.58)}.summary-paragraph{font-size:1.4rem;line-height:25px;word-spacing:1rem;color:var(--color-text)}.educational-skills{color:var(--color-text);font-size:1.4rem;line-height:25px;word-spacing:1rem;display:flex;flex-direction:column;align-items:center;height:470px;margin:0 100px 0 0;padding:30px;background:rgba(255,255,255,.27);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.58);transform:translate(+50%);opacity:0}.educational-about{margin:0 0 20px}.educational-table{color:var(--color-text);list-style:circle;padding:25px;font-size:1.15rem;font-weight:700}.object{margin:0 auto}.toggle-bar{position:fixed;display:flex;flex-direction:row;justify-content:center;align-items:center;top:48px;right:48px;opacity:0;z-index:999}.sun-wrapper,.moon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center}.toggle-button{cursor:pointer;position:relative;width:56px;height:28px;display:flex;flex-direction:row;justify-content:center;align-items:center;background-color:var(--color-text-light);border-radius:999px;margin:0 8px;border:none;box-shadow:#959da533 0 8px 24px}.toggle-circle{position:absolute;left:6px;border-radius:50%;width:20px;height:20px;background-color:var(--color-text-dark);transition:all .3s ease-in-out}.toggle-button:hover .toggle-circle{transform:scale(.8)}.slide{left:30px}.svg-toggle{color:var(--color-text)}.container{overflow:hidden}.card-carousel{--card-width: 80%;--card-max-width: 500px;--card-height: 620px;--carousel-min-width: 300px;z-index:1;position:relative;margin:0 100px 0 0;width:100%;opacity:0;transform:translate(50%);height:var(--card-height);min-width:var(--carousel-min-width);transition:filter .5s ease}@media screen and (max-width: 640px){.card-carousel{margin-left:calc((100vw - var(--carousel-min-width) - 40px) / 2)}}.card-carousel.smooth-return{transition:all .2s ease}.card{position:absolute;width:450px;height:580px;border-radius:100px;box-shadow:8px 10px 10px #0000002b;overflow:hidden;transition:inherit;filter:brightness(.8);margin:0 auto;background-color:var(--color-background);font-family:sans-serif}.card:hover{cursor:grabbing}.card.highlight{filter:brightness(1)}.card-content{color:var(--color-p)}.card-top{position:relative;height:55%}.card-img{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .5s ease-in-out}.card-img img:first-child{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease-in-out}.card-img img:last-child{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity .5s ease-in-out}.card-img:hover img:first-child{opacity:0;visibility:hidden;transition:opacity .5s ease-in-out}.card-img:hover img:last-child{opacity:1;visibility:visible;transition:opacity .5s ease-in-out}.card-hover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;cursor:pointer;font-size:30px;color:var(--color-text);opacity:0;transition:opacity .5s ease-in-out}.card:hover .card-hover{opacity:1}.card-header{font-size:32px;margin:10px 0 0 10px}.card-summary{font-size:24px;margin:10px;text-align:justify}.card-tech{margin:10px}.card-tech ul{list-style:none;margin:5px 0 0;padding:0}.card-tech li{display:inline-block;margin-right:10px;padding:5px;border-radius:25px;background-color:var(--color-p);color:var(--color-text);font-size:16px}.card-links{position:absolute;top:85%;left:30%;transform:translate(-10%);display:flex;justify-content:space-around;align-items:center;padding:10px 50px}.card-links a{margin:10px;display:inline-block;color:var(--color-text)}.card-links a:hover{filter:brightness(3)}.card-links a:hover i{transform:scale(1.3)}.card-links i{font-size:42px;transition:all .2s ease-in-out}.carousel-next{position:absolute;color:var(--color-p);font-size:48px;right:15%;top:45%;border:none;background-color:transparent;cursor:pointer}.carousel-prev{position:absolute;color:var(--color-p);font-size:48px;right:85%;top:45%;border:none;background-color:transparent;cursor:pointer}.bounceLeft{animation:bounceLeft .3s ease-in-out alternate}.bounceRight{animation:bounceRight .3s ease-in-out alternate}@keyframes bounceLeft{0%{transform:translate(0)}50%{transform:translate(-10px)}to{transform:translate(0)}}@keyframes bounceRight{0%{transform:translate(0)}50%{transform:translate(10px)}to{transform:translate(0)}}.contact-links{display:flex;flex-direction:column;margin:120px 350px 0 0;justify-content:space-around;align-items:center}.contact-links a{margin:5px;opacity:0;transform:translateY(80%)}.contact-links a i{font-size:80px;color:var(--color-p)}.contact-links a:hover{filter:brightness(2);animation:rotate3DAnimation .5s ease-in-out forwards}@keyframes rotate3DAnimation{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}@media (max-width: 699px){.intro-text{font-size:1.3rem}.section-margin{height:150px}.title-main{font-size:12rem}.firstLine{width:100vw;top:1%;left:25%}.secondLine{top:50%;left:1%}.title-sub{font-size:2rem;top:55%;left:32%}.title-main-second{font-size:2.5rem;margin:100px 0 10px 30px}.summary{max-width:300px;width:220px;height:400px;padding:20px;margin:0 0 0 50px}.summary-paragraph{font-size:1.2rem;line-height:18px;word-spacing:.2rem}.educational-skills{font-size:1.2rem;line-height:18px;word-spacing:.2rem;max-width:300px;width:220px;height:400px;padding:20px;margin:0 50px 0 0}.educational-about{margin:0}.card-carousel{--card-width: 50%;--card-max-width: 250px;--card-height: 380px;margin:50px 0 0}.card{position:absolute;width:250px;height:350px}.card-header{font-size:18px;margin:5px 0 0 5px}.card-summary{font-size:16px;margin:2px;text-align:center}.card-tech{margin:5px}.card-links{left:25%}.card-links i{font-size:18px;transition:all .2s ease-in-out}}@media (max-width: 399px){.toggle-bar{right:auto;top:5%;margin:0 auto;width:100vw}.arrow-svg-wrapper{top:85%}.intro-text{font-size:1.4rem}.section-margin{height:50px}.section3-margin{height:600px}.main-title-wrapper{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.title-main{font-size:7rem}.firstLine{width:100%;top:45%;left:auto;text-align:center;justify-content:center;transform:translate(-20%,-20%)}.secondLine{font-size:6.5rem;top:60%;left:auto;position:absolute;text-align:center;width:100%;transform:translate(-20%,-20%)}.title-sub{font-size:1.5rem;left:25%;top:61%;transform:translate(-15%) translateY(-15%)}.summary{transform:translate(-10%)}.title-main-second{font-size:3rem;margin:200px 0 0 10px;transform:translate(-10%);text-align:center}.title2{font-size:2.5rem}.about-wrapper{display:flex;flex-direction:column;align-items:center}.about-paragraph{max-width:300px;width:300px;height:400px;margin:0 50px;padding:25px}.summary-paragraph{font-size:1.4rem;line-height:18px;word-spacing:.2rem}.educational-skills{transform:translate(-10%);font-size:1.2rem;line-height:18px;word-spacing:.2rem}.card-carousel{--card-width: 50%;--card-max-width: 300px;--card-height: 500px;margin:50px 0 0;transform:translate(10%)}.card{position:absolute;width:300px;height:480px;border-radius:50px}.card-header{font-size:20px;margin:10px 0 0 8px}.card-summary{font-size:18px;margin:20px;text-align:center}.card-tech{margin:5px}.card-tech li{font-size:16px}.card-links{left:20%}.contact-links a{transform:translateY(-50%)}.card-links i{font-size:32px;transition:all .2s ease-in-out}.contact-links{margin-right:100px}}