.about{background-color:#282828;width:100vw;height:calc(100vh - 70px);overflow:hidden}.about,.about .container{display:flex;align-items:center;justify-content:center}.about .container{width:80%;height:100%;position:relative}@media (max-width:780px){.about .container{width:100%}}.about .container .aboutContainer{display:flex;align-items:center;justify-content:center;border-radius:35px;width:90%;height:90%}@media (max-width:980px){.about .container .aboutContainer{width:100%}}@media (max-width:630px){.about .container .aboutContainer{flex-direction:column;height:100%}}@media (min-height:1000px){.about .container .aboutContainer{flex-direction:column;height:80%}}.about .container .aboutContainer .left{height:100%;flex:4 1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}@media (max-width:630px){.about .container .aboutContainer .left{flex:3 1}}.about .container .aboutContainer .left img{height:200px;width:200px;border-radius:50%;margin-bottom:15px;object-fit:cover}@media (max-width:780px){.about .container .aboutContainer .left img{height:150px;width:150px}}@media (max-width:630px){.about .container .aboutContainer .left img{display:none}}@media (max-height:4px){.about .container .aboutContainer .left img{display:none}}@media (max-height:1300px){.about .container .aboutContainer .left img{height:120px;width:120px}}.about .container .aboutContainer .left button{letter-spacing:1px;font-weight:300;margin-top:25px;height:35px;width:230px;background-image:linear-gradient(270deg,#7a99d9 44%,#497dbd 72%,#1c3a94 86%);color:#fff;border-radius:10px;padding:5px;text-align:center;cursor:pointer;transition:.5s;background-size:200% auto;border:none;overflow:hidden;transition:all 1s ease}.about .container .aboutContainer .left button:hover{background-position:100%;color:#282828;font-weight:700;-webkit-transform:scale(1.1);transform:scale(1.1)}@media (max-width:980px){.about .container .aboutContainer .left button{width:150px;font-size:12px}}@media (max-height:1300px){.about .container .aboutContainer .left button{margin:10px 0}}.about .container .aboutContainer .left .buttonicons{margin-top:0;padding:5%;overflow:hidden;display:flex}.about .container .aboutContainer .left .buttonicons button{height:50px;width:50px;border-radius:50% 50%;margin:0 15px}@media (max-width:980px){.about .container .aboutContainer .left .buttonicons button{width:35px;height:35px}}@media (max-height:4px){.about .container .aboutContainer .left .buttonicons{display:none}}.about .container .aboutContainer .right{height:100%;flex:8 1;display:flex;justify-content:center;align-items:center}.about .container .aboutContainer .right .rightContainer{height:90%;width:90%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;background-color:#fff;border-radius:20px;overflow:hidden}.about .container .aboutContainer .right .rightContainer h2{margin-top:20px;font-size:28px;overflow:hidden;font-family:"Philosopher",sans-serif;font-weight:700}@media (max-width:780px){.about .container .aboutContainer .right .rightContainer h2{font-size:25px}}@media (min-height:1000px){.about .container .aboutContainer .right .rightContainer h2{font-size:42px}}@media (max-width:455px){.about .container .aboutContainer .right .rightContainer h2{font-size:23px}}@media (max-height:4px){.about .container .aboutContainer .right .rightContainer h2{margin-top:10px;font-size:15px}}@media (max-height:330px){.about .container .aboutContainer .right .rightContainer h2{margin-top:8px;font-size:12px}}.about .container .aboutContainer .right .rightContainer p{font-size:16px;text-align:justify;margin:0 30px;overflow:hidden;font-family:"Sarabun",sans-serif}@media (max-width:780px){.about .container .aboutContainer .right .rightContainer p{font-size:14px}}@media (min-height:1000px){.about .container .aboutContainer .right .rightContainer p{font-size:20px}}@media (max-width:455px){.about .container .aboutContainer .right .rightContainer p{font-size:12px}}@media (max-width:340px){.about .container .aboutContainer .right .rightContainer p{font-size:10px}}@media (max-height:450px){.about .container .aboutContainer .right .rightContainer p{font-size:8px;margin:0 15px}}@media (max-height:330px){.about .container .aboutContainer .right .rightContainer p{font-size:7px;margin:0 14px}}.about .container a{position:absolute;bottom:0;left:calc(50% - 2em);-webkit-animation:arrowBlink 2s infinite;animation:arrowBlink 2s infinite}@media (max-width:780px){.about .container a{display:none}}.navbar{width:100%;height:70px;background-color:#282828;color:#f5f5f5;position:fixed;top:0;z-index:5;overflow:hidden;transition:all 1s ease}.navbar .wrapper{padding:10px 4rem;display:flex;align-items:center;justify-content:space-between}@media (max-width:360px){.navbar .wrapper{padding:18px 8px}}@media (max-width:768px){.navbar .wrapper{padding:13px 2rem}}.navbar .wrapper .left .homelogo{font-size:26px;font-weight:400;text-decoration:none;color:inherit;font-family:"PT Mono",monospace;display:flex}@media (max-width:768px){.navbar .wrapper .left .homelogo{font-size:23px}}@media (max-width:360px){.navbar .wrapper .left .homelogo{font-size:20px}}.navbar .wrapper .left .homelogo span{width:5px;height:inherit;background-color:#dc143c;-webkit-animation:blink .3s infinite;animation:blink .3s infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.navbar .wrapper .right{margin-top:0;overflow:hidden}.navbar.active{background-color:#f5f5f5;color:#282828}.footer{background-color:#282828;width:100vw;height:40vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.footer button{width:250px;height:50px;text-align:center;border-radius:10px;border:none;font-size:16px;cursor:pointer;transition:all 1s ease}.footer button:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);color:#dc143c}@media (max-width:780px){.footer button{width:150px;font-size:13px;margin-top:15px}}@media (max-height:4px){.footer button{display:none}}.footer .socials{width:60%;height:20%;display:flex;justify-content:center;align-items:center;margin:30px;overflow:hidden}@media (max-width:780px){.footer .socials{flex-wrap:wrap;width:80%;height:50%}}@media (max-height:4px){.footer .socials{height:100%}}.footer .socials a{color:#f5f5f5;font-size:23px;cursor:pointer;transition:all .5s ease;margin:0 10px}.footer .socials a:hover{color:#497dbd;-webkit-transform:scale(1.3);transform:scale(1.3)}@media (max-height:4px){.footer .socials a{font-size:18px}}.footer .copyright{position:absolute;margin-top:20px;width:100%;padding:10px;display:flex;justify-content:space-evenly;background-image:linear-gradient(270deg,#7a99d9 44%,#497dbd 70%,#1c3a94 92%)}@media (min-height:1000px){.footer .copyright{font-size:18px}}@media (max-width:610px){.footer .copyright{display:none}}@media (max-height:4px){.footer .copyright{display:none}}.footer .copyright h4{letter-spacing:1px;color:#f5f5f5;font-family:Sarabun;font-weight:100}.home{width:100vw;height:calc(100vh - 70px);display:flex}.home .homeIntro{width:100%;overflow:hidden;position:relative}.home .homeIntro .wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}.home .homeIntro .wrapper h1{font-size:90px;font-family:"Philosopher",sans-serif;color:#282828;z-index:2;margin:10px 0}@media (max-width:768px){.home .homeIntro .wrapper h1{font-size:75px}}@media (max-width:425px){.home .homeIntro .wrapper h1{font-size:48px}}.home .homeIntro .wrapper h2{color:#497dbd;font-size:40px;z-index:2}@media (max-width:768px){.home .homeIntro .wrapper h2{font-size:32px}}@media (max-width:425px){.home .homeIntro .wrapper h2{font-size:28px}}.home .homeIntro .wrapper h3{font-size:35px;z-index:2;font-family:"Special Elite",cursive}@media (max-width:768px){.home .homeIntro .wrapper h3{font-size:28px}}@media (max-width:425px){.home .homeIntro .wrapper h3{font-size:18px}}.home .homeIntro .wrapper h3 span{font-size:inherit;color:#dc143c;font-family:inherit}.home .homeIntro .wrapper h3 .ityped-cursor{font-size:inherit;opacity:1;-webkit-animation:blink .3s infinite;animation:blink .3s infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@keyframes blink{to{opacity:0}}@-webkit-keyframes blink{to{opacity:0}}.home .homeIntro a{position:absolute;bottom:10px;z-index:2;left:calc(50% - 2em);-webkit-animation:arrowBlink 1.5s infinite;animation:arrowBlink 1.5s infinite}@-webkit-keyframes arrowBlink{to{opacity:.1}}@keyframes arrowBlink{to{opacity:.1}}@media (max-width:780px){.home .homeIntro a{display:none}}.works{width:100vw;height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;position:relative}.works .arrow{height:50px;position:absolute;bottom:50%;overflow:hidden;cursor:pointer}.works .arrow :hover{color:#497dbd;-webkit-animation:jump 1s infinite;animation:jump 1s infinite}@-webkit-keyframes jump{to{-webkit-transform:translateY(8px);transform:translateY(8px)}}@keyframes jump{to{-webkit-transform:translateY(8px);transform:translateY(8px)}}@media (max-width:1170px){.works .arrow{display:none}}.works .arrow.left{left:150px}.works .arrow.right{right:150px}.works .slider{height:calc(100vh - 210px);display:flex;position:absolute;left:0;top:70px;transition:all 1s ease-out}@media (max-width:1170px){.works .slider{height:100%;top:0;flex-direction:column;justify-content:center;align-items:center}}@media (max-height:4px){.works .slider{width:100%;text-align:center}}.works .slider .container{width:100vw;align-items:center;display:flex;justify-content:center}@media (max-width:1170px){.works .slider .container{width:90%;height:95%}}.works .slider .container .item{width:700px;height:100%;background-color:#497dbd;border-radius:20px;z-index:1;display:flex;align-items:center;justify-content:center}@media (max-width:1170px){.works .slider .container .item{width:90%;height:90%}}.works .slider .container .item .left{flex:8 1;height:80%;align-items:center;justify-content:center;display:flex}.works .slider .container .item .left .leftContainer{width:85%;height:90%;display:flex;flex-direction:column;justify-content:space-between}.works .slider .container .item .left .leftContainer h2{font-size:28px;color:#f5f5f5;font-family:Montserrat;font-weight:300;overflow:hidden}@media (max-width:1170px){.works .slider .container .item .left .leftContainer h2{font-size:23px}}@media (max-width:980px){.works .slider .container .item .left .leftContainer h2{font-size:18px}}@media (max-height:4px){.works .slider .container .item .left .leftContainer h2{font-size:12px}}@media (min-height:1000px){.works .slider .container .item .left .leftContainer h2{font-size:28px}}.works .slider .container .item .left .leftContainer p{color:#f5f5f5;text-align:justify;font-family:Sarabun;overflow:hidden;margin-bottom:5px}@media (max-width:1170px){.works .slider .container .item .left .leftContainer p{font-size:12px}}@media (max-width:780px){.works .slider .container .item .left .leftContainer p{display:none}}@media (max-height:4px){.works .slider .container .item .left .leftContainer p{display:none}}.works .slider .container .item .left .leftContainer .gitlinkarrow{padding-left:70%;cursor:pointer;-webkit-animation:moveleft 1.5s infinite;animation:moveleft 1.5s infinite;overflow:hidden}@media (max-height:4px){.works .slider .container .item .left .leftContainer .gitlinkarrow{display:none}}@-webkit-keyframes moveleft{to{-webkit-transform:translateX(-12px);transform:translateX(-12px)}}@keyframes moveleft{to{-webkit-transform:translateX(-12px);transform:translateX(-12px)}}.works .slider .container .item .left .leftContainer .gitLink{display:none;font-size:10px;color:#f5f5f5;cursor:pointer}@media (max-height:4px){.works .slider .container .item .left .leftContainer .gitLink{display:block}}.works .slider .container .item .right{height:100%;flex:4 1;display:flex;align-items:center;justify-content:center;overflow:hidden}.works .slider .container .item .right img{overflow:hidden;height:100%;width:100%}@media (max-height:4px){.works .slider .container .item .right{display:none}}.App{height:100vh}.App .sections{width:100%;height:calc(100vh - 70px);position:relative;top:70px;scroll-behavior:smooth}.App .sections::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#000a41;border-radius:2px}.App .sections::-webkit-scrollbar{width:8px;background-color:#f5f5f5}@media (max-width:768px){.App .sections::-webkit-scrollbar{display:none}}.App .sections::-webkit-scrollbar-thumb{border-radius:10px;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(.44,#7a99d9),color-stop(.72,#497dbd),color-stop(.86,#1c3a94))}.menu{width:250px;height:100vh;background-color:#f5f5f5;position:fixed;top:50px;right:-250px;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all 1s ease}@media (max-height:4px){.menu{width:150px}}@media (max-height:280px){.menu{font-size:8px}}@media (max-width:780px){.menu{width:180px}}.menu.active{right:0}.menu ul{margin:0;padding:0;list-style:none;font-size:26px;font-weight:300;color:#282828;width:45%}@media (max-height:4px){.menu ul{font-size:12px}}@media (max-height:280px){.menu ul{font-size:8px}}@media (max-width:780px){.menu ul{font-size:18px}}.menu ul li{margin-bottom:25px}.menu ul li a{font-size:inherit;color:inherit;text-decoration:none}.menu ul li:hover{font-weight:400;color:maroon}
/*# sourceMappingURL=main.d2a4fe36.chunk.css.map */