@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@keyframes star-move{50%{margin-top:3rem}}*{margin:0rem;padding:0rem;box-sizing:border-box;scroll-behavior:smooth}body{font-family:poppins,sans-serif;color:#797979;background-color:#202020;background-size:100vw auto}.header{position:relative;display:flex;justify-content:space-between;padding:1.8rem 10%}.logo{color:#797979;text-decoration:none;font-weight:600;font-size:1.9em;cursor:default;animation:slideLeft 1s ease forwards;opacity:0}.navbar{display:flex;justify-content:center;align-items:center}.navbar a{display:inline-block;text-decoration:none;color:#797979;padding:0rem 1.3rem;font-weight:600;transition:.3s all;animation:navMenu 1s ease forwards;animation-delay:calc(.2s * var(--i));opacity:0}.navbar a:hover,.navbar a.active{color:#a2a29b}.navbar-burger-div{position:fixed;display:none;top:0;right:0;width:3rem;height:100vh;padding:3rem 5rem;border-top-left-radius:50%;border-bottom-left-radius:50%;z-index:1;box-shadow:0 0 10px #a2a29b;background-color:#202020}.navbar-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.navbar-burger a{text-decoration:none;color:#797979;margin:1.5rem;font-size:.8em;font-weight:500;transition:.3s all;animation:navMenu 1s ease forwards;animation-delay:calc(.2s * var(--i));opacity:0}.navBurger-icon{display:none;justify-content:center;align-items:center;font-size:1.5rem}.navBurger-icon:hover{cursor:pointer}.close-icon{color:#a2a29b;font-size:1.5rem}.hero-container{display:flex;padding:2rem 10% 5rem;justify-content:center;align-items:center;min-height:100vh;gap:5rem}.info-side{width:auto}.info-side h3{font-size:1.7em;font-weight:700;letter-spacing:1px}.info-side h1{font-size:4.5em;letter-spacing:1px;font-weight:700;animation:slideRight .5s ease forwards;opacity:0;animation-delay:1s;text-wrap:nowrap}span{color:#a2a29b;width:fit-content}.part-1{animation:part1 1s ease forwards;opacity:0}.part-2{animation:part2 1s ease forwards;opacity:0}.info-side p{line-height:27px;animation:slideLeftP 1s ease forwards;margin-top:.5rem;opacity:0;animation-delay:1.2s;text-align:justify;width:fit-content;max-width:30rem}.hero-img{width:35%;animation:zoomIn 1s ease forwards;animation-delay:1s;opacity:0;transform:rotate(90deg);transform-origin:bottom left}.hero-img img{width:100%;animation:star-move 2.5s infinite}.info-side .hero-links{margin-top:2rem;width:fit-content;height:fit-content}.info-side .hero-links .personal-link{position:relative;padding:.7rem;border-radius:50%;margin:0rem .5rem;color:#a2a29b;text-decoration:none;font-size:3em;transition:.3ms;animation:socialIcons 1s ease forwards;animation-delay:calc(.3s * var(--i));opacity:0;box-shadow:0 0 10px #a2a29b}.info-side .hero-links .personal-link:hover{box-shadow:0 0 10px #797979}button{background-color:#797979;margin-top:2.8rem;padding:1.3rem 4rem;border:none;border-radius:30px;cursor:pointer;font-weight:600;transition:.3s;box-shadow:0 0 10px #797979;animation:slideUp 1s ease forwards;animation-delay:1.5s;opacity:0;color:#fff}button .btn-link{text-decoration:none;color:#fff}button:hover{box-shadow:0 0 5px #797979}.hero-container .btn{margin-top:1rem}.about{display:flex;justify-content:center;align-items:center;gap:3rem;padding:2rem 10% 5rem;min-height:100vh;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;box-shadow:0 4px 8px #0003,0 -4px 8px #0003,0 6px 20px #00000030,0 -6px 20px #00000030}.about-img-div{position:relative}.about-img-div img{width:40vw}.about-img-div .about-img{font-size:40vw}.bar-container{position:absolute;display:flex;flex-direction:column;gap:4rem;top:70px;left:120px;width:fit-content;height:fit-content}.bar-container h3{line-height:4.5rem;width:15rem;font-size:1.5em}.heading{text-align:left;font-size:3.8rem}.about-content h3{font-size:1.6em}.about-content p{line-height:27px;margin:2rem 0;text-align:justify}.no-animation{animation:none}.skills{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 10% 5rem;min-height:100vh;margin-top:2rem}.skills h2{text-align:center;margin-bottom:3rem}.left-container{display:flex;justify-content:left;align-items:center;height:100px;text-align:center;width:10rem}.right-container{display:flex;justify-content:center;align-items:center;height:100px;text-align:center;width:70%}.right-container .skills-container{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;padding:2rem 1rem;gap:2.5rem;width:100%}.right-container .skills-container .skill-box{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;width:4vw;height:4vw;border-radius:50%;text-align:center;box-shadow:0 0 10px #a2a29b}.main-container{display:flex;justify-content:center;align-items:center;gap:1rem;width:69vw;margin-bottom:2rem}.skills .main-container .left-btn,.skills .main-container .right-btn{font-size:14em;color:#a2a29b;opacity:.7}.skills .main-container .left-btn:hover,.skills .main-container .right-btn:hover{opacity:1;cursor:pointer}.skill-box .skill-icon{font-size:2.2vw;color:#a2a29b}.skill-box h3{font-size:.7em}.skill-box p{margin:1rem 0 3rem}.skills-container .skill-box:hover{border-color:#a2a29b;transition:scale(1)}.projects{display:flex;padding:2rem 10% 5rem;gap:5rem;min-height:100vh;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 8px #0003,0 -4px 8px #0003,0 6px 20px #00000030,0 -6px 20px #00000030}.projects-container{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:2.5rem}.projects-container .project-box{position:relative;border-radius:2rem;border-radius:0 0 1rem #1f242d;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 10px #a2a29b;height:13rem;min-height:13rem}.project-box img{width:100%;height:auto;object-fit:cover;flex:1;transition:.5s ease}.project-box .project-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(#00000057,#222b);display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:0 2rem;transition:.5s ease;gap:1rem}.project-layer h4{font-size:1.5em;font-weight:700;color:#fff}.project-layer p{font-size:.9em;margin:.2rem .1rem;color:#fff}.project-controllers{display:flex;gap:1rem}.project-layer a{display:inline-flex;justify-content:center;align-items:center;width:2.2rem;height:2.2rem;background-color:#a2a29b;border-radius:50%;text-decoration:none;box-shadow:0 0 10px #a2a29b}.project-layer a .project-link{font-size:1em;color:#fff}.project-layer a:hover{box-shadow:0 0 5px #797979}.project-box:hover img{transform:scale(1.1)}.project-box:hover .project-layer{transform:translateY(0)}#projectsHeading{text-align:center;margin-bottom:1rem}.contact{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 10%;min-height:100vh}.contact-form{margin-top:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:2rem}.contact .contact-form input{width:50vw;height:2.5rem;outline:none;border-radius:2rem;padding:1rem 1.5rem;border:none;color:#797979;box-shadow:0 0 10px #a2a29b;background:none}.contact .contact-form textarea{width:50vw;height:20rem;outline:none;border-radius:2rem;padding:1rem 1.5rem;border:none;color:#797979;font-family:poppins,sans-serif;resize:none;box-shadow:0 0 10px #a2a29b;background:none}footer{position:fixed;bottom:0%;left:0%;width:100%;padding:2px;background-color:#202020;text-align:center;z-index:1}footer p{font-size:.9em}.noPage{display:flex;flex-direction:column;align-items:center;min-height:85vh}.noPage .noPage-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:32rem;width:50vw;text-align:center;gap:1.5rem;margin-top:3rem}.noPage .noPage-container span{font-size:5em;color:#797979;text-align:center;font-weight:600}.noPage .noPage-container p{font-size:1.2em;margin-top:2rem;letter-spacing:2px;width:100%}.loading-section{display:flex;justify-content:center;align-items:center}@keyframes slideLeft{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes navMenu{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes burgerNavMenu{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes part1{0%{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes part2{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideRight{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideLeftP{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes socialIcons{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes zoomIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 1150px){.hero-container{flex-direction:column}.about{flex-direction:column;justify-content:center;align-items:center;text-align:center}.about .about-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.info-side h3{font-size:1.5em}.info-side h1{font-size:3.8em}.info-side .hero-links .personal-link{font-size:2.8em}.projects-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1040px){.info-side h3{font-size:1.2em}.info-side h1{font-size:3.3em}.info-side p{max-width:25rem;font-size:.9em}.about-content p{font-size:.9em}.info-side .hero-links .personal-link{font-size:2.5em}button{padding:1.3rem 3rem}.hero-img{width:35%}.right-container .skills-container .skill-box{width:5vw;height:5vw}.skill-box .skill-icon{font-size:2.5vw}.heading{font-size:3.3rem}}@media (max-width: 900px){.hero-container{gap:1rem;height:100vh}.info-side h3{font-size:1em}.info-side h1{font-size:2.6em}.info-side p{max-width:20rem;font-size:.8em}.about-content p{font-size:.9em}.info-side .hero-links .personal-link{font-size:2.5em}button{padding:1rem 2.5rem}.hero-img{width:45%}.hero-container{gap:5rem}}@media (max-width: 840px){.parent-container{display:flex;flex-direction:column;gap:1.8rem}.main-container{flex-direction:column;gap:0rem;margin-bottom:0rem}.right-container .skills-container{justify-content:center}.left-container{justify-content:center;height:40px}.right-container{height:fit-content}.right-container .skills-container .skill-box{width:2.7rem;height:2.7rem}.skill-box .skill-icon{font-size:1.5em}}@media (max-width: 765px){.header{margin-bottom:1rem}.hero-container{height:70vh;gap:0%}.hero-container .info-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.hero-links{margin-top:2rem;display:flex}.info-side h3{font-size:.8em}.info-side h1{font-size:2.4em}.info-side p{max-width:21rem;font-size:.8em;margin-top:.5rem}.about{flex-direction:column;gap:.8rem}.hero-container{gap:5rem}.heading{font-size:7vw;text-align:center}.about-content p{justify-content:center;align-items:center;text-align:justify}.about-btn{display:flex;align-items:center;justify-content:center;text-align:center}.info-side .hero-links .personal-link{font-size:2.3em}.projects-container{grid-template-columns:repeat(1,1fr)}.projects-container .project-box{height:12rem;min-height:12rem}.navbar{display:none}.navBurger-icon{display:flex;transition:.3s all;animation:navMenu 1s ease forwards;animation-delay:calc(.2s * var(--i))}.navbar-burger-div{display:block;transition:.3s all;animation:burgerNavMenu 1s ease forwards}}.keyboard{display:flex;flex-direction:column;align-items:center;transform:rotate(-10deg);perspective:1000px;padding:5px;border-radius:8px;box-sizing:border-box}.row{display:flex;justify-content:center;margin-bottom:3px}.key{width:35px;height:35px;margin:4px;display:flex;justify-content:center;align-items:center;background-color:#797979;color:#fff;font-size:12px;border-radius:5px;box-shadow:0 4px 12px #0000004d;transition:transform .1s ease,box-shadow .1s ease,background-color .1s ease;-webkit-user-select:none;user-select:none}.key.space{width:250px}.key.clicked{transform:translateY(2px) scale(.95) rotate(10deg);box-shadow:0 2px 5px #0003;background-color:#a2a29b}@media (max-width: 768px){.key{width:28px;height:28px;font-size:10px;margin:2px}.key.space{width:180px}}@media (max-width: 480px){.key{width:22px;height:22px;font-size:9px;margin:1px}.key.space{width:140px}}