*{margin:0;padding:0;box-sizing:border-box;font-family:DM Sans,sans-serif}html{scroll-snap-type:y mandatory;scrollbar-width:none;scroll-behavior:smooth}body{background-color:#0c0c1d;color:#d3d3d3}.main{position:relative;z-index:0;pointer-events:none}.main *{pointer-events:auto}button,a{position:relative;z-index:10}.menu{opacity:1;position:relative;z-index:1000}.sidebar div{opacity:1;z-index:2}section{height:100vh;scroll-snap-align:center;position:relative;overflow:hidden;background:transparent;z-index:1;pointer-events:auto}section:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/stars.png);background-size:cover;background-position:center;filter:opacity(.5) brightness(.9);z-index:-1;pointer-events:none}.project-container{width:100%;position:relative;z-index:1;pointer-events:auto}.progress{display:flex;justify-content:center;align-items:center;flex-direction:column;position:sticky;top:0;z-index:10}.progress h1{font-size:36px;letter-spacing:2px;background:linear-gradient(90deg,#3fbafe 70%,#20e3b2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-size:2.2rem;font-weight:700;padding:1rem}.progress .progressBar{width:100%;height:10px;overflow:hidden;background:#e7eaf6;backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);border:1px solid rgba(255,255,255,.2);border-radius:1rem}.project-section{min-height:100vh;display:flex;position:relative;justify-content:center;align-items:center}.project-section .projectDiv{position:absolute;top:17%;height:78%;width:98%;padding:.5rem;display:flex;border-radius:1.5rem;align-items:center;overflow:hidden;background:linear-gradient(120deg,#181d29,#232447);box-shadow:0 4px 20px #0000001a,0 8px 40px #0000000d}.project-section .projectDiv .project-img{height:100%;width:50%;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.project-section .projectDiv .project-img img{padding:1rem;filter:drop-shadow(1px 1px 50px rgba(255,255,255,.582));height:66%}.project-section .projectDiv .project-content{height:60%;padding:1rem 2rem}.project-section .projectDiv .project-content .buttons{display:flex;margin-top:2rem;gap:2rem}.project-section .projectDiv .project-content .buttons button{text-align:center;height:2rem;width:6.5rem;display:flex;align-items:center;justify-content:center;border:1px solid white;outline:none;color:#000;border-radius:1rem;background:#ffffffa1;transition:all .2s ease;cursor:pointer}.project-section .projectDiv .project-content .buttons button:hover{color:#fff;background:#0c0c1d;border-color:#ffffff80}.project-section .projectDiv .project-content .buttons button a{color:inherit;text-decoration:none;display:flex;flex-direction:row;justify-content:center;align-items:center}.project-section .projectDiv .project-content p{letter-spacing:1px;font-size:1rem}.project-section .projectDiv .project-content h1{background:linear-gradient(100deg,#a993ca,#708fa0,#c94fbd,#5e5ec4,#8a3ffc,#c94fbd);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-size:2.2rem;font-weight:700;animation:gradient-flow 5s ease-in-out infinite;margin-bottom:2rem}@keyframes gradient-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media (min-width: 200px) and (max-width: 700px){.project-container .progress h1{font-size:28px;padding:.5rem}.project-container .progress .progressBar{height:.5rem}.project-section{padding:1rem}.project-section .projectDiv{position:absolute;top:9%;height:92vh;width:97%;padding:.5rem;display:flex;flex-direction:column;border-radius:1.5rem;align-items:center;overflow:hidden}.project-section .projectDiv .project-img{height:55%;position:relative;top:-10%;width:100%;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.project-section .projectDiv .project-img img{padding:1rem;height:60%;filter:drop-shadow(1px 1px 40px rgba(255,255,255,.404))}.project-section .projectDiv .project-content{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;height:auto;position:relative;top:-20%;padding:.5rem}.project-section .projectDiv .project-content .buttons{display:flex;margin-top:1.5rem;gap:1rem}.project-section .projectDiv .project-content .buttons button{display:flex;align-items:center;justify-content:center;text-align:center;width:6rem;padding:.5rem;border:1px solid white;outline:none;color:#0c0c1d;border-radius:1rem;transition:all .2s ease;cursor:pointer}.project-section .projectDiv .project-content .buttons button:hover{color:#fff;background:#0c0c1d;border-color:#ffffff80}.project-section .projectDiv .project-content p{display:flex;font-size:.88rem}.project-section .projectDiv .project-content h1{font-size:2rem;margin-bottom:1rem}}a{color:inherit;height:50px;text-decoration:none}.navbar{height:3rem;display:flex;justify-content:space-between;padding:0px 1rem;z-index:-1;align-items:center}.navbar .text{font-weight:bolder;font-size:1.5rem;z-index:4;text-shadow:-5px -4px 5px rgba(255,255,255,.26);color:#ffffffbd}.sidebar{background-color:#87ceeb}.sidebar .Navigation{overflow:hidden;height:2.5rem;width:40vw;display:flex;align-items:center;justify-content:space-evenly;position:fixed;text-align:center;top:.6rem;right:1rem;background-color:#ffffff36;color:#fff;border-radius:1rem;padding-right:1rem}.sidebar .Navigation .Link{width:40%;position:relative;display:inline-block;color:#f6f6f8;text-decoration:none;padding:.5rem 0}.sidebar .Navigation .Link:hover{border-radius:1rem;background-color:#80808046}.sidebar .menu{height:2.3rem;width:2.3rem;display:flex;border-radius:50%;align-items:center;justify-content:center;position:fixed;cursor:pointer;z-index:10;top:.6rem;right:1rem;background-color:#fff;color:#0000008f}@media (min-width: 200px) and (max-width: 700px){.sidebar .Navigation{height:fit-content;width:50vw;display:flex;align-items:center;justify-content:space-evenly;gap:2rem;padding-bottom:2rem;padding-top:4rem;position:fixed;flex-direction:column;text-align:center;top:.6rem;background:#191f36;right:1rem;filter:opacity(.8);z-index:1}.sidebar .Navigation .Link{margin-left:1rem;width:90%;color:#fff;font-size:large}.sidebar .menu{height:1.8rem;width:1.8rem;color:#000000b2;opacity:.5}}.hero{height:calc(100vh - 3rem);width:100%;background:transparent;position:relative;justify-content:space-between;padding:1rem;z-index:0;pointer-events:none;display:flex;justify-content:center}.hero .comet2{height:50px;opacity:.6}.hero .tech{height:1rem;object-fit:contain;filter:drop-shadow(4px 4px 5px gray)}.hero .hero-content{pointer-events:auto;position:absolute;top:18%;left:15%;height:35%;width:fit-content;display:flex;border-radius:2rem;justify-content:center}.hero .hero-content .intro{position:relative;width:100%;display:flex;align-items:center;height:fit-content}.hero .hero-content .intro .Hi-logo{position:relative;top:-5.7rem;left:1rem;height:100%;font-size:3.7rem}.hero .hero-content .intro .intro-text .Hi{display:inline-block;font-size:4rem;margin-left:1.5rem;color:#87ceeb;color:#d21cd2}.hero .hero-content .intro .intro-text .name{font-size:3rem;margin-left:1.5rem;color:#ccc}.hero .hero-content .intro .intro-text h2{display:inline-block;font-size:2rem;margin-left:1rem}.hero .hero-content .intro .intro-text .stack{font-size:1.5rem;margin-top:1rem;display:inline-block;margin-left:1.5rem}.hero .hero-content .intro .intro-text .stack span:nth-child(1){color:#318b35;margin-right:.4rem}.hero .hero-content .intro .intro-text .stack span:nth-child(2){color:#ccc;margin-right:.4rem}.hero .hero-content .intro .intro-text .stack span:nth-child(3){color:#609eb6;margin-right:.4rem}.hero .hero-content .intro .intro-text .stack span:nth-child(4){color:#7a9a3f;margin-right:1rem}.hero .hero-content .intro .intro-text p{display:inline-block;font-size:1.5rem;color:#aa9d9d}.hero .hero-content .buttons{position:relative;z-index:15;margin-top:2rem}.hero .hero-content .buttons button{position:relative;padding:.5rem;border:1px solid white;margin:auto 1rem;outline:none;color:#000;border-radius:1rem;transition:all .2s ease;cursor:pointer;background:#ffffff8a}.hero .hero-content .buttons button:hover{color:#fff;background:#fff3;border-color:#ffffff80}.hero .planet{height:100px;width:100px;object-fit:cover;position:absolute;top:50%;left:-10%;filter:opacity(1);z-index:1;border-radius:50%;box-shadow:5px 5px 40px #fff}.hero .earth{height:700px;width:700px;object-fit:cover;position:absolute;top:60%;left:27%;filter:brightness(.9) saturate(.6);border-radius:50%;box-shadow:0 0 40px 8px #247aff66,0 0 80px 16px #00ffe766}@media (min-width: 100px) and (max-width: 700px){.hero .comet1,.hero .comet2{transform:rotate(280deg)}.hero .hero-content{width:99%;padding:.3rem;top:20%;left:23%}.hero .hero-content .intro{position:relative;width:100%;display:flex;left:-30%;align-items:center;height:fit-content}.hero .hero-content .intro .Hi-logo{position:relative;top:-5rem;height:100%;font-size:2.8rem;left:1.6rem}.hero .hero-content .intro .intro-text .stack{font-size:1.1rem}.hero .hero-content .intro .intro-text p{font-size:1rem}.hero .hero-content .intro .intro-text .name{font-size:2.3rem}.hero .hero-content .intro .intro-text .Hi{display:inline-block;font-size:3.5rem;margin-left:1.5rem;color:#87ceeb}.hero .hero-content .intro .intro-text h1{font-size:4rem;margin-left:1.5rem;color:#ffd900a0;color:inherit}.hero .hero-content .intro .intro-text h2{display:inline-block;font-size:2rem;margin-left:1rem}.hero .hero-content .intro .buttons{margin:1rem .5rem}.hero .hero-content .intro .buttons button{font-size:.8rem;padding:.6rem .8rem;margin:.2rem .7rem}.hero .planet{height:70px;width:70px;top:30%;left:-10%}.hero .earth{height:450px;width:450px;top:70%;left:-5%;margin:auto}}.AboutContainer{height:100vh;width:100vw;position:absolute;top:0;left:0;background:transparent;z-index:99;display:flex;justify-content:center;align-items:center}.AboutContainer:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(145deg,#0a192f79,#1e1e1e93);z-index:-1}.AboutContainer .cursor{font-size:1px;font-weight:700;opacity:.5;display:inline-block}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.AboutContainer .about-main{display:flex;justify-content:space-between;width:100%;padding-left:1rem;padding-right:1rem;flex-wrap:wrap;height:80%;margin-top:1rem;overflow:hidden}.AboutContainer .about-main .content{display:flex;justify-content:center;width:54%;margin-top:1.5rem}.AboutContainer .about-main .content h2{margin-top:1.2rem}.AboutContainer .about-main .content .text{color:#80808072;width:100%;height:35%}.AboutContainer .about-main .content .ChipContainer{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}.AboutContainer .about-main .content p{color:#e5e7ebaf}.AboutContainer .about-main .content .btn{border:none;padding:.5rem;border-radius:.6rem;border:2px solid white;position:absolute;background-color:transparent;color:#fff;text-align:center;transition:all .2s ease;bottom:23%}.AboutContainer .about-main .content .btn:hover{background:#fff;color:#000}.AboutContainer .about-main .content .btn:active{scale:.9;background-color:transparent;color:#fff}.AboutContainer .about-main .about-img{position:relative;height:75%;filter:drop-shadow(0px 0px 2rem #232447);margin-top:1rem;border-radius:16px;box-shadow:0 0 10px #ffffff9a;width:43%;margin-left:.5rem}.AboutContainer .About{height:65%;width:70%;position:relative;box-shadow:0 0 5px #ffffff6b;z-index:999;background:linear-gradient(-120deg,#181d29 50%,#232447);border-radius:1rem;color:#fff}.AboutContainer .About .head{margin-top:.5rem;display:flex;align-items:center;justify-content:space-between;padding:.4rem 1rem}.AboutContainer .About .head h1{text-shadow:0 0 10px rgba(96,165,250,.7);color:#fff;display:inline-block}.AboutContainer .About .head h1 span{color:#38bdf8;display:inline-block}.AboutContainer .About .head .cross{display:flex;align-items:center;cursor:pointer;border:1px solid white;border-radius:.5rem;text-align:center;color:red;transition:all .1s ease}.AboutContainer .About .head .cross:hover{transform:scale(1.2)}@media (min-width: 100px) and (max-width: 700px){.AboutContainer .About{position:absolute;height:100%;width:100%}.AboutContainer .About .about-main{padding-left:.2rem;padding-right:.2rem}.AboutContainer .About .about-main .content{display:flex;justify-content:center;position:absolute;top:38%;width:100%;padding:.2rem .4rem;height:30%;margin-top:.5rem}.AboutContainer .About .about-main .content .ChipContainer{padding:.2rem;margin-bottom:1rem}.AboutContainer .About .about-main .content .text{height:54%;margin-top:2.6rem;letter-spacing:1px;margin-bottom:1rem}.AboutContainer .About .about-main .content p{font-size:.9rem}.AboutContainer .About .about-main .content .btn{position:absolute;bottom:-7rem}.AboutContainer .About .about-main .about-img{order:-1;margin-top:.2rem;width:96%;height:40%}}.contact{height:calc(100vh - 3rem);width:100%;position:relative;z-index:0;pointer-events:none}.contact .contact-container{height:100%;display:flex;align-items:center;justify-content:center}.contact .contact-container .Form{background:linear-gradient(120deg,#181d29,#232447);box-shadow:0 4px 20px #0000001a,0 8px 40px #0000000d;border-radius:1.5rem;padding:1.5rem;height:fit-content;width:35vw}.contact .contact-container .Form .heading{display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.contact .contact-container .Form .heading h1{font-size:1.7rem;font-weight:700}.contact .contact-container .Form .heading h1 span{text-align:center;background:linear-gradient(90deg,#6c63ff,#c94fbd,#5e5ec4,#8a3ffc);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 5s ease infinite}.contact .contact-container .Form form .button{margin-top:1rem;width:100%;justify-content:center;align-items:center;display:flex}.contact .contact-container .Form form .button button{background:transparent;color:#fff;border:none;padding:.6rem 1.5rem;border-radius:12px;width:30%;font-size:1rem;z-index:1;animation:gradientMove 5s ease infinite;font-weight:600;cursor:pointer;transition:all .3s ease;border:1px solid gray;transition:all ease .2s}.contact .contact-container .Form form .button button:hover{transform:scale(1.05)}.contact .contact-container .Form form textarea{padding:.5rem;border:none;outline:none;border:1px solid rgba(128,128,128,.281);border-radius:.5rem;background:transparent;max-height:20vh;width:100%;overflow:scroll;scroll-behavior:smooth;max-width:100%;color:#fff;scrollbar-width:none;scrollbar-color:#6c63ff #1e1e2f}.contact .contact-container .Form form textarea:focus{border:1px solid rgba(255,255,255,.215)}.contact .contact-container .Form form .input-box{display:flex;height:4rem;padding:.5rem;border:1px solid rgba(128,128,128,.208);border-radius:.5rem;margin-bottom:1rem;flex-direction:column}.contact .contact-container .Form form .input-box .labelBox{display:flex;align-items:center;justify-content:space-between}.contact .contact-container .Form form .input-box .labelBox p{font-size:.8rem;color:red;display:inline-block}.contact .contact-container .Form form .input-box input{background:transparent;width:100%;outline:none;border:none;margin-top:.5rem;margin-bottom:1rem;height:2.5rem;color:#ffffff74}.contact .contact-container .Form form .input-box input:focus{border-bottom:1px solid rgba(255,255,255,.144)}@media (min-width: 200px) and (max-width: 700px){.contact .contact-container .Form{width:96vw;padding:.5rem}.contact .contact-container .Form button{margin-bottom:1rem;padding:.5rem 1rem}}.footer-container{z-index:2;position:absolute;bottom:0;width:100%;background:#fbfbfb;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;box-shadow:0 -2px 8px #0003;padding:1rem 1rem .5rem;height:fit-content}.footer-container hr{margin:auto;width:90%;filter:opacity(.4)}.footer-container .foot-content{color:#0c0c1d;display:flex;justify-content:space-between;width:100%;padding:1.5rem 1.5rem 1rem;height:fit-content}.footer-container .foot-content .name{height:fit-content;width:30%}.footer-container .foot-content .name h1{font-size:2rem;font-weight:700;background:linear-gradient(90deg,#ff8a8a,#ffb347,#ffeb3b,#4caf50,#2196f3,#9c27b0,#ff8a8a);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 6s ease infinite}.footer-container .foot-content .name p{color:gray;margin-top:.8rem}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.footer-container .foot-content .links{height:fit-content;position:relative;left:-5%}.footer-container .foot-content .links ul{margin-top:1rem}.footer-container .foot-content .links ul li{color:#000000b9;margin-left:.5rem;margin-bottom:.7rem;text-decoration:none;list-style:none}.footer-container .foot-content .links ul li:hover{transform:translateY(-2px)}.footer-container .foot-content .social{height:fit-content}.footer-container .foot-content .social .socialIcons{margin-top:1rem;display:flex;gap:.6rem}.footer-container .foot-content .social .socialIcons div{border:none;outline:none;box-shadow:0 0 2px #0000003c;height:3rem;overflow:hidden;width:3rem;transition:all .3s ease;display:flex;justify-content:center;align-items:center;border-radius:50%}.footer-container .foot-content .social .socialIcons div:hover{transform:scale(1.05) translateY(-.2rem)}.footer-container .logo{height:3.5rem;width:3.5rem;background-color:inherit;border-radius:50%;position:absolute;right:48vw;top:-2.5rem;display:flex;align-items:center;flex-direction:column;justify-content:center;color:#000;filter:drop-shadow(0px 0px 2px rgba(128,128,128,.674))}.footer-container .footer-text{width:100%}.footer-container .footer-text div{width:100%;padding:.2rem;display:flex;align-items:center;justify-content:center;color:#000000be;font-size:1.1rem}.footer-container .footer-text div:nth-of-type(1){margin-top:1rem;letter-spacing:1px}.footer-container .footer-text div:nth-of-type(2){margin-bottom:1.5rem}@media (min-width: 100px) and (max-width: 700px){.footer-container{height:fit-content}.footer-container .foot-content{display:flex;flex-direction:column;align-items:normal;justify-content:normal;padding:.2rem .2rem 1rem;gap:1.5rem}.footer-container .foot-content .name{width:100%}.footer-container .foot-content .name h1{font-size:1.5rem}.footer-container .foot-content .name p{font-size:.9rem;margin-top:.7rem}.footer-container .foot-content .links{left:0%}.footer-container .foot-content .links h1,.footer-container .foot-content .social h1{font-size:1.2rem}.footer-container .logo{height:3.4rem;width:3.4rem;right:43vw}.footer-container .footer-text div{padding:0rem;font-size:.9rem}.footer-container .footer-text div:nth-of-type(1){letter-spacing:0px;margin-top:.5rem;font-size:.8rem}.footer-container .footer-text div:nth-of-type(2){margin-bottom:1.5rem}}.skills{height:calc(100vh - 3rem);width:100%;background:transparent;position:relative;padding:1rem;z-index:0;text-align:center;pointer-events:none;display:flex;flex-direction:column}.skills h1{font-size:2rem;background:linear-gradient(100deg,#a993ca,#708fa0,#d1c6d0,#c45eae,#8a3ffc,#c94fbd);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-size:2.2rem;font-weight:700;animation:gradient-flow 5s ease-in-out infinite}.skills .skill-container{height:90%;width:100%;margin-top:1.5rem;border-radius:2rem;overflow-x:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#4f8ec9 #18192a}.skills .skill-container::-webkit-scrollbar{width:6px}.skills .skill-container::-webkit-scrollbar-track{background:#18192a;border-radius:6px}.skills .skill-container::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c94fbd,#8a3ffc);border-radius:16px;border:2px solid #18192a}.skills .skill-container .box{display:flex;flex-direction:column;padding:1rem;width:100%}.skills .skill-container .box p{font-size:2rem;text-align:left;font-weight:900;margin-bottom:2rem;display:inline}.skills .skill-container .box .skills-box{display:flex;gap:2rem;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:wrap}.skills .skill-container .box .skills-box .skill-box{height:7rem;width:10%;padding:.5rem;border:1px solid white;border-radius:1rem;display:flex;box-shadow:0 0 10px gray;background-color:#f5f5f5;align-items:center;justify-content:center}.skills .skill-container .box .skills-box .skill-box img{height:5rem;width:5rem}@media screen and (max-width: 700px){.skills h1{font-size:1.7rem;font-weight:1rem;margin-top:1rem}.skills .skill-container .skill-box{border-radius:1rem;padding:.2rem;height:4rem;width:4rem}}