@import url(https://fonts.googleapis.com/css2?family=Kanit:ital@1&family=Poppins&family=Roboto+Slab&family=Water+Brush&display=swap);*{margin:0;padding:0}section{height:100vh;width:inherit;display:flex;justify-content:center;align-items:center;padding:24px}body{font-family:Poppins,sans-serif;background-color:#565177}.App{text-align:center}.active{color:#f4f802}.nav-bar{position:fixed;width:100%;right:0;padding:1.5rem;display:flex;justify-content:flex-end;align-items:center;z-index:2;background-color:#565177}.nav-items,.nav-list{display:flex;grid-gap:2rem;gap:2rem;font-size:15px;font-weight:20px;color:#f5f5f5}.nav-list{cursor:pointer;flex-direction:column}.bx{display:none}@media only screen and (min-width:325px) and (max-width:450px){.nav-bar{position:fixed;bottom:0;padding:5px 0 0;justify-content:center;width:100vw;height:3rem;border-top-left-radius:15px;border-top-right-radius:15px}.nav{background-color:#333357}.bx{display:block}.nav-items,.nav-list{font-size:12px;font-weight:10px}a{background-color:#333357}}.about-page{display:grid;grid-template-columns:50vw 2fr;grid-gap:5rem;gap:5rem;padding:1%;margin:1%;width:100%}.about-page>.left-side{z-index:1}.about-page>.left-side>h1{color:#ff0;font-family:Water Brush,cursive;font-size:44px}.about-page>.left-side>h1:hover{color:#fff}.about-images>img{position:absolute;width:30%;height:50%;margin-top:auto;object-fit:cover}.right-side{width:360px;position:relative;-webkit-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-10deg) rotate(-10deg);transform:rotateX(-10deg) rotate(-10deg);-webkit-animation:move 20s linear infinite;animation:move 20s linear infinite}@-webkit-keyframes move{50%{-webkit-transform:rotateX(30deg);transform:rotateX(30deg)}80%{-webkit-transform:rotateX(-30deg);transform:rotateX(-30deg)}}@keyframes move{50%{-webkit-transform:rotateX(30deg);transform:rotateX(30deg)}80%{-webkit-transform:rotateX(-30deg);transform:rotateX(-30deg)}}.about-images{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:rotate 20s linear infinite;animation:rotate 20s linear infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotateY(1turn);transform:rotateY(1turn)}}@keyframes rotate{to{-webkit-transform:rotateY(1turn);transform:rotateY(1turn)}}.about-images>img:first-child{-webkit-transform:rotateY(60deg) translateZ(175px);transform:rotateY(60deg) translateZ(175px)}.about-images>img:nth-child(2){-webkit-transform:rotateY(120deg) translateZ(175px);transform:rotateY(120deg) translateZ(175px)}.about-images>img:nth-child(3){-webkit-transform:rotateY(180deg) translateZ(175px);transform:rotateY(180deg) translateZ(175px)}.about-images>img:nth-child(4){-webkit-transform:rotateY(240deg) translateZ(175px);transform:rotateY(240deg) translateZ(175px)}.about-images>img:nth-child(5){-webkit-transform:rotateY(300deg) translateZ(175px);transform:rotateY(300deg) translateZ(175px)}.about-images>img:nth-child(6){-webkit-transform:rotateY(1turn) translateZ(175px);transform:rotateY(1turn) translateZ(175px)}.about-images>img:hover{width:35%;height:55%;cursor:pointer;transition:1s ease-out}@media only screen and (min-width:325px) and (max-width:475px){.about-page>.left-side>h1{font-size:24px}.about-page{grid-template-columns:repeat(1,1fr);grid-gap:1rem;gap:1rem;padding:0;margin:0;height:-webkit-max-content;height:max-content;width:100%}.about-page>.left-side{font-size:12px}.about-page>.right-side{height:20vh;width:40vw;margin-left:20%;top:0}.about-images>img:first-child{-webkit-transform:rotateY(60deg) translateZ(75px);transform:rotateY(60deg) translateZ(75px)}.about-images>img:nth-child(2){-webkit-transform:rotateY(120deg) translateZ(75px);transform:rotateY(120deg) translateZ(75px)}.about-images>img:nth-child(3){-webkit-transform:rotateY(180deg) translateZ(75px);transform:rotateY(180deg) translateZ(75px)}.about-images>img:nth-child(4){-webkit-transform:rotateY(240deg) translateZ(75px);transform:rotateY(240deg) translateZ(75px)}.about-images>img:nth-child(5){-webkit-transform:rotateY(300deg) translateZ(75px);transform:rotateY(300deg) translateZ(75px)}.about-images>img:nth-child(6){-webkit-transform:rotateY(1turn) translateZ(75px);transform:rotateY(1turn) translateZ(75px)}}.contact-form>form{display:flex;flex-direction:column;width:100%;justify-content:center;grid-gap:.5rem;gap:.5rem;position:relative}form>input,textarea{padding:2%;width:40vw;border-radius:5px;border:none;background-color:#777792;color:#fff;font-size:medium}textarea{height:10vh}.submit-btn{width:10vw;padding:15 10 0 0;text-align:center;border:2px solid #ff0;background-color:inherit;color:#ff0;font-weight:bolder;cursor:pointer}.submit-btn:hover{background-color:#ff0;border:none;color:#000}label{text-align:left;font-size:medium;color:#fff}.contact-page>h1{color:#ff0}.conatct-page>h1:hover,.footer-contact{color:#fff}@media only screen and (min-width:325px) and (max-width:475px){.contact-page>h1{font-size:36px}.submit-btn{width:15vw}form>input,textarea{width:50vw}}.home-page>.body-content{position:absolute;top:25%;z-index:1;color:#cef8eb}.home-page>img{z-index:0;position:relative;width:90%;top:5%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.home-content{font-family:Kanit,sans-serif;font-size:64px}.home-content:hover{display:inline-block;-webkit-animation:rubberBand 1s 1s;animation:rubberBand 1s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;color:#fff;-webkit-animation-delay:0ms;animation-delay:0ms}a>img{width:32px;height:32px}.btn-resume{padding:10px;margin:5px;font-size:14px;font-weight:700;background-color:#9cb839;border:none;cursor:pointer}.btn-resume>a{text-decoration:none;color:#fff}@media only screen and (min-width:325px) and (max-width:450px){.home-page>.body-content>h1{font-size:34px;width:80vw;margin-top:25px}.home-page>.body-content{left:2%;color:#cef8eb;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-left:8%;margin-top:36px}.home-page>img{width:75%;height:70%;left:0;-webkit-transform:rotate(20deg);transform:rotate(20deg)}a{background-color:inherit}.home-page{width:90vw;left:2%}}.project-head{max-height:20vh}.project-head>h1{color:#ff0;font-size:44px}.project-head>h1:hover{color:#fff}.project-head>p>span{color:#fff;font-weight:400}.project-head>p{font-weight:700}.project-page{display:flex;flex-wrap:wrap;height:70vh;grid-gap:.5rem;gap:.5rem;justify-content:center;align-items:center}.project-content{width:200px;height:250px;overflow:hidden;text-align:center;border-radius:5px;background-color:#fff;border:1px solid #ccc;box-shadow:0 7px 10px rgba(0,0,0,.5);transition:.5s ease-in-out}.project-content>h1{font-size:100%}.project-content>img{object-fit:cover;width:80%;height:40%}.project-content>img:hover{opacity:.7}.btn-site{width:64px;color:#fff;background:linear-gradient(90deg,#fed54a,#ff9347)}.btn-group>a{font-size:small;padding:2%;font-weight:bolder;border-radius:5px;border:none;cursor:pointer}.btn-repo{background-color:#252323;color:#fff}.btn-group>button:hover{opacity:.7}.btn-group{display:flex;flex-direction:row;flex-wrap:wrap;grid-gap:.25rem;gap:.25rem;justify-content:space-around;align-items:center;padding:5px}a{text-decoration:none}.project-content:hover{cursor:pointer;-webkit-transform:translateY(10px);transform:translateY(10px)}@media only screen and (min-width:490px) and (max-width:726px){.project-content{width:150px;height:220px}.btn-group>a{font-size:70%}}@media only screen and (min-width:325px) and (max-width:475px){.project-head>h1{color:#ff0;font-size:32px}.project-page{height:70vh}.project-content{width:40%;height:30%;padding:4px}.btn-group>a{font-size:50%}.project-content>h1{font-size:12px}}.skills-right-side{width:inherit;height:80vh;position:relative}.skills-page{display:grid;grid-template-columns:50vw 2fr;position:absolute;padding:1%;margin:1%;width:100%;place-items:center}.skills-heading{color:#ff0;padding:1%;margin:1%}.tech-stack{display:flex;flex-direction:row;flex-wrap:wrap;width:inherit;grid-gap:1rem;gap:1rem;justify-content:space-around}.tech-stack>img{width:124px;height:124px}@media only screen and (min-width:325px) and (max-width:475px){.skills-page{grid-template-columns:repeat(1,1fr);grid-gap:1rem;gap:1rem;padding:0;margin:0;width:90vw;height:60vh}.tech-stack>img{width:36px;height:36px}.skills-heading{font-size:24px}.skills-left-side{width:100%;position:relative}.tech-stack{width:100%}.skills-right-side{height:35vh;top:0}}
/*# sourceMappingURL=main.9f8b3f05.chunk.css.map */