@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap);@import url(https://fonts.googleapis.com/css?family=Mukta:700);@import url(https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Kanit&display=swap);@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400);body{background-color:#000}.loading{--color:#f5f9ff;--duration:2000ms;color:var(--color);font-family:Ubuntu Mono,monospace;font-size:24px;position:relative;white-space:nowrap}.loading span{--x:0;--y:0;--move-y:0;--move-y-s:0;--delay:0ms;display:block;left:0;overflow:hidden;position:absolute;text-indent:calc(var(--x)*-1);top:0;-webkit-transform:translate(var(--x),var(--y));transform:translate(var(--x),var(--y));width:1px}.loading.start div{opacity:0}.loading.start span{-webkit-animation:move var(--duration) ease-in-out var(--delay);animation:move var(--duration) ease-in-out var(--delay)}@-webkit-keyframes move{30%{-webkit-transform:translate(var(--x),var(--move-y));transform:translate(var(--x),var(--move-y))}82%{-webkit-transform:translate(var(--x),var(--move-y-s));transform:translate(var(--x),var(--move-y-s))}}@keyframes move{30%{-webkit-transform:translate(var(--x),var(--move-y));transform:translate(var(--x),var(--move-y))}82%{-webkit-transform:translate(var(--x),var(--move-y-s));transform:translate(var(--x),var(--move-y-s))}}.Start{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;overflow:hidden;position:absolute;top:0;width:100%}*{box-sizing:inherit}.cursor{color:#f5f9ff;font-family:Roboto,Arial;font-size:24px}.css-selector{background:radial-gradient(ellipse at bottom,#082032 0,#000 100%);bottom:0;height:100vh;left:0;margin:0;position:absolute;right:0;top:0;width:100vw}button{background:transparent;border:0;cursor:pointer;font-family:Kanit,sans-serif;font-size:inherit;outline:none;padding:0;position:relative;text-decoration:none;vertical-align:middle}button.learn-more{height:auto;width:12rem}button.learn-more .circle{background:#282936;border-radius:1.625rem;display:block;height:3rem;margin:0;position:relative;transition:all .45s cubic-bezier(.65,0,.076,1);width:3rem}button.learn-more .circle .icon{background:#fff;bottom:0;margin:auto;position:absolute;top:0;transition:all .45s cubic-bezier(.65,0,.076,1)}button.learn-more .circle .icon.arrow{background:none;height:.125rem;left:.625rem;transition:all .45s cubic-bezier(.65,0,.076,1);width:1.125rem}button.learn-more .circle .icon.arrow:before{border-right:.125rem solid #fff;border-top:.125rem solid #fff;content:"";height:.625rem;position:absolute;right:.0625rem;top:-.25rem;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:.625rem}button.learn-more .button-text{bottom:0;color:#334756;font-weight:700;left:0;line-height:1.6;margin:0 0 0 1.85rem;padding:.75rem 0;position:absolute;right:0;text-align:center;text-transform:uppercase;top:0;transition:all .45s cubic-bezier(.65,0,.076,1)}button:hover .circle{width:100%}button:hover .circle .icon.arrow{background:#fff;-webkit-transform:translate(1rem);transform:translate(1rem)}button:hover .button-text{color:#fff}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:#ff4c29;border-radius:10px}.App{background:radial-gradient(ellipse at bottom,#082032 0,#000 100%) no-repeat 50% fixed;background-size:cover;bottom:0;display:grid;grid-template-columns:auto;grid-template-rows:minmax(auto,70px) auto auto auto auto auto;height:100vh;left:0;margin:0;overflow-x:hidden;overflow-y:auto;position:fixed;right:0;scroll-behavior:smooth;top:0;width:100vw}.head{color:#ff4c29;font-family:Ubuntu Mono,monospace;font-size:8vh;margin:0;text-align:left}.head-span{color:#fff;font-family:Glegoo,serif;font-size:3vh}.about-header{font-size:2.5vh}.about-header,.portfolio-header{color:#334756;font-family:Glegoo,serif;margin:0 10px 0 0;text-align:left}.portfolio-header{font-size:2vh}.contact-header{color:#334756;font-family:Glegoo,serif;font-size:2vh;margin:0 10px 0 0;text-align:left}.about-grid{color:#d4cdcd;display:grid;font-family:Kanit,sans-serif;font-size:2vh;grid-template-areas:"text1  img" "text3  img" "text2  img" "text4  img" "text5  img" "certifications  certifications" "skills  skills"}@media only screen and (max-width:1000px){.about-grid{color:#d4cdcd;display:grid;font-family:Kanit,sans-serif;grid-template-areas:"text1" "text3" "text2" "text4" "text5" "img" "certifications" "skills"}.certifications-sec{display:grid;grid-area:"certifications";grid-template-areas:"title" "img1" "img2" "img3"}}.about-grid button{color:#fff;transition:.25s}about-grid button:focus,about-grid button:hover{border-color:var(--hover);color:var(--color);cursor:default}.raise{--color:#ff4c29;--hover:#ff4c29}.raise:focus,.raise:hover{color:var(--color);-webkit-transform:translateY(-.15em);transform:translateY(-.15em)}.glitch{-webkit-animation:glitch 1s linear infinite;animation:glitch 1s linear infinite;color:#ff4c29;font-family:Ubuntu Mono,monospace;font-size:25vh;margin:auto}@-webkit-keyframes glitch{2%,64%{-webkit-transform:translate(2px) skew(0deg);transform:translate(2px) skew(0deg)}4%,60%{-webkit-transform:translate(-2px) skew(0deg);transform:translate(-2px) skew(0deg)}62%{-webkit-transform:translate(0) skew(5deg);transform:translate(0) skew(5deg)}}@keyframes glitch{2%,64%{-webkit-transform:translate(2px) skew(0deg);transform:translate(2px) skew(0deg)}4%,60%{-webkit-transform:translate(-2px) skew(0deg);transform:translate(-2px) skew(0deg)}62%{-webkit-transform:translate(0) skew(5deg);transform:translate(0) skew(5deg)}}.glitch:after,.glitch:before{content:attr(title);left:0;position:absolute}.glitch:before{-webkit-animation:glitchTop 1s linear infinite;animation:glitchTop 1s linear infinite;clip-path:polygon(0 0,100% 0,100% 33%,0 33%);-webkit-clip-path:polygon(0 0,100% 0,100% 33%,0 33%)}@-webkit-keyframes glitchTop{2%,64%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}4%,60%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}62%{-webkit-transform:translate(13px,-1px) skew(-13deg);transform:translate(13px,-1px) skew(-13deg)}}@keyframes glitchTop{2%,64%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}4%,60%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}62%{-webkit-transform:translate(13px,-1px) skew(-13deg);transform:translate(13px,-1px) skew(-13deg)}}.glitch:after{-webkit-animation:glitchBotom 1.5s linear infinite;animation:glitchBotom 1.5s linear infinite;clip-path:polygon(0 67%,100% 67%,100% 100%,0 100%);-webkit-clip-path:polygon(0 67%,100% 67%,100% 100%,0 100%)}@-webkit-keyframes glitchBotom{2%,64%{-webkit-transform:translate(-2px);transform:translate(-2px)}4%,60%{-webkit-transform:translate(-2px);transform:translate(-2px)}62%{-webkit-transform:translate(-22px,5px) skew(21deg);transform:translate(-22px,5px) skew(21deg)}}@keyframes glitchBotom{2%,64%{-webkit-transform:translate(-2px);transform:translate(-2px)}4%,60%{-webkit-transform:translate(-2px);transform:translate(-2px)}62%{-webkit-transform:translate(-22px,5px) skew(21deg);transform:translate(-22px,5px) skew(21deg)}}.login-box{border-radius:10px;box-shadow:0 15px 25px rgba(0,0,0,.6);box-sizing:border-box;min-width:300px;padding:40px;position:relative;width:40vh}.login-box h2{color:#ff4c29;font-family:Ubuntu Mono,monospace}.login-box h2,.login-box h3{margin:0 0 30px;padding:0;text-align:center}.login-box h3{color:#fff}.login-box .user-box{position:relative}.login-box .user-box input,.login-box .user-box textarea{background:transparent;border:none;border-bottom:1px solid #fff;color:#fff;font-family:Kanit,sans-serif;font-size:16px;margin-bottom:30px;outline:none;padding:10px 0;width:100%}.login-box .user-box textarea{resize:none}.login-box .user-box label{color:#fff;font-family:Glegoo,serif;font-size:16px;left:0;padding:10px 0;pointer-events:none;position:absolute;top:0;transition:.5s}.login-box .user-box input:focus+label,.login-box .user-box input:not(:placeholder-shown)+label{color:#ff4c29;font-size:12px;left:0;-webkit-transform:translateY(-1.5rem);transform:translateY(-1.5rem)}.login-box .user-box textarea:focus+label,.login-box .user-box textarea:not(:placeholder-shown)+label{color:#ff4c29;font-size:12px;left:0;-webkit-transform:translateY(-1.5rem);transform:translateY(-1.5rem)}.login-box form button{color:#ff4c29;display:inline-block;font-family:Glegoo,serif;font-size:16px;letter-spacing:4px;margin-top:40px;overflow:hidden;padding:10px 20px;position:relative;text-decoration:none;text-transform:uppercase;transition:.5s}.login-box button:hover{background:#ff4c29;border-radius:5px;box-shadow:0 0 5px #ff4c29,0 0 25px #ff4c29,0 0 50px #ff4c29,0 0 100px #ff4c29;color:#fff}.login-box button span{display:block;position:absolute}.login-box button span:first-child{-webkit-animation:btn-anim1 1s linear infinite;animation:btn-anim1 1s linear infinite;background:linear-gradient(90deg,transparent,#ff4c29);height:2px;left:-100%;top:0;width:100%}@-webkit-keyframes btn-anim1{0%{left:-100%}50%,to{left:100%}}@keyframes btn-anim1{0%{left:-100%}50%,to{left:100%}}.login-box button span:nth-child(2){-webkit-animation:btn-anim2 1s linear infinite;animation:btn-anim2 1s linear infinite;-webkit-animation-delay:.25s;animation-delay:.25s;background:linear-gradient(180deg,transparent,#ff4c29);height:100%;right:0;top:-100%;width:2px}@-webkit-keyframes btn-anim2{0%{top:-100%}50%,to{top:100%}}@keyframes btn-anim2{0%{top:-100%}50%,to{top:100%}}.login-box button span:nth-child(3){-webkit-animation:btn-anim3 1s linear infinite;animation:btn-anim3 1s linear infinite;-webkit-animation-delay:.5s;animation-delay:.5s;background:linear-gradient(270deg,transparent,#ff4c29);bottom:0;height:2px;right:-100%;width:100%}@-webkit-keyframes btn-anim3{0%{right:-100%}50%,to{right:100%}}@keyframes btn-anim3{0%{right:-100%}50%,to{right:100%}}.login-box button span:nth-child(4){-webkit-animation:btn-anim4 1s linear infinite;animation:btn-anim4 1s linear infinite;-webkit-animation-delay:.75s;animation-delay:.75s;background:linear-gradient(1turn,transparent,#ff4c29);bottom:-100%;height:100%;left:0;width:2px}@-webkit-keyframes btn-anim4{0%{bottom:-100%}50%,to{bottom:100%}}@keyframes btn-anim4{0%{bottom:-100%}50%,to{bottom:100%}}
/*# sourceMappingURL=main.2ad7d662.css.map*/