#root{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;font-family:Amaranth,sans-serif;font-weight:400;font-style:normal}body{background-color:#0f0f0f;color:#f5f5f5;background-size:cover;background-position:center;margin:2px}.App{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start}.header{position:fixed;display:flex;align-items:center;justify-content:space-between;width:100%;z-index:3;height:7em;font-size:clamp(.66rem,2vw,1rem);letter-spacing:.5em}section{height:100%;width:100%;top:0;position:fixed}.outer,.inner{width:100%;height:100%;overflow-y:hidden}.bg{display:flex;align-items:center;justify-content:center;position:absolute;height:100%;width:100%;top:0;background-size:cover;background-position:center}.first .bg{background-image:linear-gradient(180deg,#0009,#0000001a),url(./assets/bg015.jpg)}.second .bg{background-image:linear-gradient(180deg,#0009,#0000001a),url(./assets/bg012.jpg)}.third .bg{background-image:linear-gradient(180deg,#0009,#0000001a),url(./assets/bg011.jpg)}.fourth .bg{background-image:linear-gradient(180deg,#0009,#0000001a),url(./assets/bg014.jpg)}.fifth .bg{background-image:linear-gradient(180deg,#0009,#0000001a),url(./assets/bg20.jpg)}h2 *{will-change:transform}@media screen and (max-width: 1500px){.header{height:4rem}}.first .name-title{display:flex;flex-direction:column;justify-content:center;align-items:center}.first .name-title h2{font-size:6rem;margin-bottom:0;letter-spacing:.4em}.first .name-title p{font-size:4rem;letter-spacing:.4em}@media screen and (max-width: 1500px){.first .name-title h2{font-size:4rem}.first .name-title p{font-size:2rem}}@media screen and (max-width: 1200px){.first .name-title h2{font-size:2.4rem}.first .name-title p{font-size:2rem}}@media screen and (max-width: 800px){.first .name-title h2{font-size:2rem}.first .name-title p{font-size:1.6rem}}@media screen and (max-width: 600px){.first .name-title h2{font-size:1.6rem}.first .name-title p{font-size:1rem}}@media screen and (max-width: 500px){.first .name-title h2{font-size:1.6rem;letter-spacing:.3em}.first .name-title p{font-size:1rem;letter-spacing:.3em}}.NavMenu{width:100%;display:flex;align-items:center}.NavMenu .name-title{margin-left:20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.NavMenu .name-title p{color:#a52c2c;font-weight:700}.NavMenu .nav-list{width:50%;display:flex;justify-content:space-between;margin-left:20px;align-items:center}.NavMenu .nav-list .active-tag{background-color:#f8c761b3;color:#000}.NavMenu .nav-list a{font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center;border-radius:6px;transition:color .7s,background-color 1s;width:240px;height:40px}.NavMenu .nav-list a:hover{background-color:#f8c761b3;color:#000;font-weight:700}@media screen and (max-width: 1500px){.NavMenu .nav-list{width:80%;margin:0}.NavMenu .nav-list a{font-size:.9rem}#about,#home{width:140px}}@media screen and (max-width: 800px){.NavMenu .nav-list{width:100%;margin:0;display:flex;justify-content:space-around}.NavMenu .nav-list a:first-child{width:140px}.NavMenu .nav-list a{font-size:.7rem}}@media screen and (max-width: 500px){.NavMenu .nav-list #contact{margin-right:2px}.NavMenu .nav-list a{font-size:.6rem;height:30px;width:180px;margin:0 2px;letter-spacing:2px}}.second .about-container{width:70%;margin:0 auto;display:flex;flex-direction:column}.animate-me{font-size:1.8rem;width:100%;text-align:left;perspective:500px;border-radius:6px;box-sizing:border-box;margin-top:20px;color:#fff}@media screen and (max-width: 1500px){.second .about-container{width:90%}.animate-me{font-size:1.2rem}}@media screen and (max-width: 500px){.second .about-container{width:96%}.animate-me{font-size:1rem;line-height:20px;margin:0}}.third .bg{display:flex}.third .projects-container{width:90%;height:90%}.third .projects-container .section-heading{display:none}.third .wrapper .expander{width:100px;height:70%;border-radius:25px;overflow:hidden;margin-top:6px;margin-left:10px;cursor:pointer;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.third .wrapper .expand-project{flex-direction:column}.expand-project .project-header .project-title{display:none}.expand-project .project-header{display:flex;width:98%;justify-content:flex-end;margin-top:10px}.third .expand-project .expander-container{display:flex;justify-content:space-between}.expander .expander-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.wrapper{height:100%;width:100%;display:flex;align-items:center;justify-content:center}.expander .cardFlip,.flipReverse-btn-div{display:none}.expander .flipCard{border:none;background-color:none}.expand-project .flipReverse-btn-div img{display:flex;z-index:20;width:30px;rotate:90deg}.expander .expander-container .project-title{display:flex;align-items:flex-start;justify-content:flex-start}.expander .project-title p{rotate:-90deg;font-size:1.6rem}.expand-project .expander-container .project-title p{rotate:0deg;display:none}.expander .project-header #closeBtn{display:none}.expand-project #closeBtn{font-family:sans-serif;font-size:1rem;font-weight:700;border-radius:20px;height:30px;width:36px;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;color:#000;z-index:50!important}.expand-project .flipReverse-btn-div{display:none}.projects-container h2{text-align:center;width:100%;font-family:Kanit,sans-serif;font-weight:400;color:#f5f5f5}@media screen and (max-width: 1500px){.third .wrapper .expander{width:60px;height:60%}}@media screen and (max-width: 1024px){.third .projects-container{margin-top:20px}.third .wrapper .expand-project{height:70%}}@media screen and (max-width: 900px){.third .expander-container{justify-content:center;align-items:center;width:94%}}@media screen and (max-width: 800px){.third .projects-container{width:99%}}@media screen and (max-width: 700px){.third .wrapper{flex-direction:column}.third .wrapper .expander{width:90%;height:40px}.expander .project-title p{rotate:0deg;font-size:1.2rem}}@media screen and (max-width: 600px){.third .projects-container h2{font-size:1.2rem}}@media screen and (max-width: 500px){.third .wrapper .expander{width:98%;margin:4px 0}.third .wrapper .expand-project{width:98%;margin:0;flex-direction:column;justify-content:flex-start;position:relative}.third .wrapper .expand-project .frontCard,.third .wrapper .expand-project .backCard{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.third .wrapper .expand-project .backCard{z-index:90}.third .wrapper .expand-project .backCard img{border-radius:8px}.project-header{z-index:10}.third .wrapper .expand-project .projectCard{height:75%;width:100%;margin:0 auto}.third .wrapper .expand-project .Connect .project-details{padding-top:20px}.third .wrapper .expand-project .MovieKnight .project-details{padding:0}.third .wrapper .expand-project .project-details h2{text-align:start}.expand-project .cardFlip{display:flex;margin-top:40px}.expand-project .backCard{height:100%;width:100%;justify-content:space-around}.third .expand-project .projectCard .imgs-div{display:none}.expand-project .flipReverse-btn-div{width:100%;display:flex;justify-content:center;position:absolute;bottom:10px;z-index:20}.third .expand-project .flipReverse-btn-div{z-index:90}.third .expand-project .frontCard{width:100%;height:100%;align-items:flex-start}.expander .expander-container{align-items:flex-start}.expander-container ul{margin-left:10px}.expander-container ul li{font-size:.9rem}.third .expand-project .backCard img{width:46%;height:80%}}.expander .projectCard{display:none}.expand-project .expander-container .projectCard{display:flex;justify-content:space-between;align-items:flex-start;height:80%;width:98%}.expand-project .expander-container .MovieKnight{height:98%;align-items:center}.expand-project .expander-container .Connect{height:94%;align-items:center}.projectCard .imgs-div{display:flex;justify-content:center;width:45%}.projectCard .imgs-div img{width:240px;height:68%;margin-left:10px}.projectCard .project-details{width:50%}.projectCard .project-details h2{text-align:start;font-family:Amaranth,sans-serif}.projectCard .project-details ul{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;font-size:1.4rem;color:#000;padding:0}.projectCard .project-details ul li{margin-bottom:10px;width:100%}.projectCard .project-details ul li a{color:#f8f8f8;text-decoration:none}@media screen and (max-width: 1500px){.projectCard .project-details ul{font-size:1rem}.projectCard .imgs-div img{width:180px;margin-left:10px}}@media screen and (max-width: 1024px){.expand-project .expander-container .projectCard{align-items:center;height:100%;margin-top:40px}.projectCard .imgs-div{height:300px}.projectCard .imgs-div img{height:100%}.projectCard .project-details h2{margin:0}.projectCard .project-details ul{display:flex}}@media screen and (max-width: 900px){.expand-project .expander-container .projectCard{margin-top:0}}@media screen and (max-width: 800px){.projectCard .imgs-div{width:36%}.projectCard .project-details{width:60%}.projectCard .imgs-div .project-img-02{display:none}}@media screen and (max-width: 800px){.expand-project .expander-container .projectCard{margin-top:20px;align-items:flex-start}.expand-project .expander-container .projectCard h2{text-align:center}.expand-project .expander-container .projectCard .imgs-div{align-self:center}.expand-project .expander-container .Boo{align-items:center}.expand-project .expander-container .MovieKnight h2{margin-bottom:20px}}@media screen and (max-width: 600px){.expand-project .expander-container .projectCard{width:99%}}@media screen and (max-width: 500px){.projectCard .project-details{width:100%;margin-left:16px}}.contactme-methods .ContactForm .error{border:red 2px solid}.ContactForm{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:40%}.respond-send-message{color:#2f7a2f;font-size:1.2rem}.ContactForm form{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%}.ContactForm form input,.ContactForm form .messageInput{height:50px;width:100%;margin-bottom:20px;border:none;outline:none;padding-left:10px;border-radius:6px;box-sizing:border-box;font-size:1rem}.ContactForm form input[type=submit]{padding:0;background-color:#f0b771}.ContactForm form .messageInput{padding-top:10px;height:200px}@media screen and (max-width: 1024px){.ContactForm{width:60%}.ContactForm .name-title h2{font-size:1.4rem;padding-left:4px}}@media screen and (max-width: 800px){.ContactForm{width:80%}.ContactForm .name-title h2{font-size:1.2rem;margin:0}}@media screen and (max-width: 500px){.ContactForm{width:96%}.ContactForm form input{height:36px;font-size:.8rem}}.fourth .section-heading{font-size:2rem}.fourth .bg{display:flex;flex-direction:column;align-items:center;justify-content:space-around}.fourth .contactme-methods{display:flex;flex-direction:column;height:70vh;width:100%;justify-content:space-around;align-items:center}.fourth .contactme-methods .email-linkedin-github{display:flex;align-items:center;justify-content:center;width:40%;height:10vh}.fourth .contactme-methods .email-linkedin-github .email-div{display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-left:40px}.fourth .contactme-methods .email-linkedin-github .github-linkedin{display:flex;justify-content:center}.fourth .contactme-methods .email-linkedin-github img{width:36px;height:36px;margin-right:20px}@media screen and (max-width: 1200px){.fourth .contactme-methods .email-linkedin-github{margin-top:30px}.fourth .contactme-methods .email-linkedin-github p{font-size:1rem}.fourth .contactme-methods .email-linkedin-github img{width:26px;height:26px;margin:0 6px 0 0}}@media screen and (max-width: 800px){.fourth .contactme-methods .email-linkedin-github{flex-direction:column}.fourth .contactme-methods .email-linkedin-github .email-div{margin-left:10px}.fourth .contactme-methods .email-linkedin-github .email-div p{margin:0}.fourth .contactme-methods .email-linkedin-github img{width:24px;height:24px}}.fifth .bg{display:flex;flex-direction:column;align-items:center;justify-content:center}.fifth .bg .h2-head{font-size:1.8rem;margin:0 0 60px;display:flex;justify-content:flex-start}.fifth .bg .skills-list{display:flex;flex-direction:column;margin-bottom:20px}.fifth .bg .skills-list div{display:flex;justify-content:center;align-items:center;margin-bottom:40px}.fifth .bg .skills-list .skill-div{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 10px}.fifth .bg img{width:80px;height:80px}@media screen and (max-width: 500px){.fifth .bg .h2-head{font-size:1.2rem}.fifth .bg .h2-head h2{margin:0}.fifth .bg .skills-list .skill-div p{font-size:.7rem}.fifth .bg img{width:36px;height:36px}}