@import"https://fonts.googleapis.com/css2?family=Anton+SC&family=Merienda:wght@400;700&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,500;1,200&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Poppins,serif;font-weight:200;font-style:normal}p{color:#555}body{color:#000;background:#fff}html{scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box}.hero-section{display:flex;align-items:center;justify-content:space-around;margin-top:10rem;width:90%;gap:3rem;margin:0 auto;margin-bottom:10rem}.container{display:flex;justify-content:space-between;align-items:center;gap:4rem;margin-left:2rem}.hero-title{font-size:3.8rem;font-weight:600;line-height:5rem}.written-section h3{font-size:1.8rem;font-weight:600}.written-section span{font-size:1.4rem;font-weight:500;color:#63bbd3;margin-left:2px}.hero-desc{font-size:1.2rem;line-height:2.5rem}.myimg1{width:269px;height:auto;border-radius:10px;padding:5px}.logos{padding:5px;display:flex;gap:18px}.logos img{width:54px;height:auto;border:1px solid black;padding:3px;border-radius:12px;margin-top:10px}.logos img:hover{box-shadow:#4371747f 4px 6px 17px;cursor:pointer}.images{margin-right:2rem}.reactlogo,.jslogo{padding:5px}.resume{display:inline-block;border:1px solid black;padding:10px 15px;margin-top:17px;border-radius:23px;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;color:#000;margin-top:1rem;margin-left:5px}.resume:hover{color:#fff;background:#000}@media (max-width: 768px){.container{flex-direction:column;align-items:center}.written-section{margin-left:2rem;margin-right:2rem}.written-section h3{text-align:center}.written-section h1{text-align:center;font-size:2.5rem}.hero-desc{text-align:center}.resume{display:flex;justify-content:center}}.header{width:100%;height:13rem;position:sticky;top:0}.nav-wrapper{background:transparent;box-shadow:0 4px 30px #fffdfd1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;top:0;max-width:132rem;margin:auto}.content{display:flex;justify-content:space-between;align-items:center;padding:10px;max-width:132rem;margin:auto}.menu-web{display:flex;list-style:none;gap:2.6rem;margin-right:2rem;justify-content:center;align-items:center}.menuitem:before{content:" ";position:absolute;background-color:#63bbd3;height:.2rem;opacity:0;width:2rem;left:0;border-radius:.5rem;bottom:-.6rem;transform:translate(-1.5rem);transition:all .5s ease}.active-link{color:red}.menuitem:hover:before{width:100%;transform:translate(0);opacity:1}li a{text-decoration:none;color:#000;font-size:1rem;font-weight:400;font-style:normal;position:relative}ul{display:flex;align-items:center;gap:2rem}.github,.linkedin{border-radius:5px;padding:7px;background:#000;text-decoration:none;color:#fff;font-size:.8rem;font-weight:400;font-style:normal}.github:hover,.linkedin:hover{background:#63bbd3;color:#fff;outline:1.5px solid rgb(0,0,0)}.menu-btn{width:1.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;border:none;outline:none;color:#000;font-size:1.3rem;display:none}.logo{font-family:Anton SC,sans-serif;font-weight:400;font-style:normal;margin-left:3rem;font-size:1.5rem;color:#000}@media (max-width: 425px){.logo{width:10rem;height:auto}}@media (max-width: 769px){.menu-btn{display:block}.menu-web{display:none}.mobile-menu{display:block;display:flex;flex-direction:column;position:absolute;top:3rem;left:0;background-color:#ffffff1d;width:100%;box-shadow:#00000040 0 14px 28px;gap:1rem;list-style:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-menu li a{color:#000}.linkedin{margin-bottom:10px}.mobile-menu li{color:#000}.symbol{width:30px;height:30px;display:block;display:flex;justify-content:center;align-items:centere;background:transparent;border:1px solid black}.symbol:hover{cursor:pointer}}.full-skills{margin:0 10rem 5rem;height:80%}.top-skills{margin-bottom:3rem}.top-skills p{text-align:center;margin-top:1rem}.top-skills h1{font-size:3rem;font-family:Roboto,serif;font-weight:700;font-style:normal;margin-top:7px;text-align:center}.skills-container{display:flex;flex-direction:column;justify-content:center}.about-containers{display:flex;flex-direction:column;gap:2rem}.skill{padding:1.5rem;background:#fff;border-radius:2rem;border:rgb(53,53,53) .1rem solid;border-color:#a3a3a3;text-align:center}.skill h2{color:#555;font-weight:600;font-size:1.75rem;margin-bottom:2rem}.articles{display:flex;text-align:initial;flex-wrap:wrap;flex-direction:row;justify-content:space-around;gap:2.5rem}.articles article{display:flex;width:10rem}.articles img{width:25px;height:25px}@media (min-width:1024px) and (max-width:1044px){.full-skills{margin:0 4rem 5rem;height:80%}}@media (min-width:768px) and (max-width:1024px){.full-skills{margin:0 3rem 5rem;height:80%}.about-containers{flex-direction:column}}@media (max-width:768px){.about-containers{flex-direction:column}.full-skills{margin:0 3rem 5rem;height:80%}}.top-about-container{margin-top:3rem}.top-about-container p{margin-top:1rem;font-size:15px;text-align:center;color:#555}.full-about{margin:0 10rem 5rem;height:80%}.top-about-container h1{font-size:3rem;font-family:Roboto,serif;font-weight:700;font-style:normal;margin-top:7px;text-align:center}.about-container{display:flex}.about-pic-container{width:400px;height:400px;margin:auto 0}.about-pic-container img{width:400px}.about-detail-container{display:flex;justify-content:center;flex-direction:column}.about-container{display:flex;gap:2rem;margin-top:1rem;margin-bottom:2rem}.detail-container{padding:1.5rem;flex:1;background:#fff;border-radius:2rem;border:rgb(53,53,53) .1rem solid;border-color:#a3a3a3;text-align:center}.detail-container p{color:#555}.detail-container img{width:40px}.text-container p span{font-weight:800;font-family:Oswald,serif;font-optical-sizing:auto;font-weight:700;font-style:normal}@media (min-width:1024px) and (max-width:1440px){.full-about{margin:0 4rem 5rem;height:80%}}@media (min-width:768px) and (max-width:1024px){.full-about{margin:0 3rem 5rem;height:80%}.about-pic-container img{width:300px}}@media (min-width: 320px) and (max-width:768px){.about-container{flex-direction:column;justify-content:center;align-items:center}.about-pic-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.detail-container{width:75vw;margin-top:1rem;margin-bottom:1rem}.about-detail-container{flex-direction:column;align-items:center}}@media (min-width: 0px) and (max-width: 430px){.full-about{margin:0 7rem 5rem;height:80%}.top-about-container p{font-size:12px}.top-about-container h1{font-size:1.5rem}.about-pic-container img{width:300px}}.projects{margin:0 10rem 5rem;height:80%}img{width:200px}.top-bar{margin-bottom:3rem}.top-bar p{text-align:center}.top-bar h1{font-size:3rem;font-family:Roboto,serif;font-weight:700;font-style:normal;margin-top:7px;text-align:center}.project-container{display:flex;flex-wrap:wrap;justify-content:center}.about{display:flex;gap:2rem}.first-about{padding:1.5rem;flex:1;background:#fff;border-radius:2rem;border:rgb(53,53,53) .1rem solid;border-color:#a3a3a3;text-align:center}.photo img{width:80%;height:80%;border-radius:1.5rem}.first-about h2{font-family:Oswald,serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-size:1.75rem;text-align:center}.btns{margin-top:2rem}.btns .git,.live{background:#fff;padding:15px;border:1px solid rgb(85,85,85);border-radius:20px;font-size:14px;width:116px;margin-right:1rem}.first-about:hover{cursor:pointer}.btns .git:hover,.live:hover{background:#212121;color:#fff}.btns a{text-decoration:none;color:#000}.allprojects{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.projectbtn{background:transparent;margin:1rem;border:none;border-radius:5px;cursor:pointer;font-size:16px;display:flex;align-items:center;gap:10px;transition:transform .3s ease,background-color .3s ease}.projectbtn:hover{transform:scale(1.1)}.arrow{transition:transform .3s ease}.projectbtn:hover .arrow{transform:translate(5px)}@media (min-width:1024px) and (max-width:1440px){.projects{margin:0 4rem 5rem;height:80%}}@media (min-width:768px) and (max-width:1024px){.projects{margin:0 3rem 5rem;height:80%}.about{flex-direction:column}}@media (max-width: 768px){.projects{margin:0 3rem 5rem;height:80%}.about{flex-direction:column;align-items:center}.first-about{padding:1rem;width:90%;background:#fff;border-radius:2rem;border:rgb(53,53,53) .1rem solid;border-color:#a3a3a3;text-align:center}.photo img{width:80%;height:80%;border-radius:2rem}.first-about h2{font-size:4rem;margin-bottom:1rem}.btns .git,.live{font-size:20px;width:140px;margin-right:1rem;margin-bottom:2rem}.btns{margin-bottom:2rem}}@media (min-width:100px) and (max-width: 430px){.first-about h2{font-family:Oswald,serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-size:1.5rem;text-align:center}.btns .git,.live{background:#fff;padding:15px;border:1px solid rgb(85,85,85);border-radius:20px;font-size:10px;width:116px;margin-right:1rem}}.full-contact{margin:0 10rem 5rem;height:80%}.full-contact p{text-align:center}.full-contact h1{font-size:3rem;font-family:Roboto,serif;font-weight:700;font-style:normal;margin-top:7px;text-align:center}.contact-info{display:flex;flex-wrap:wrap;justify-content:center}.mail{display:flex;padding:1.5rem;background:#fff;border-radius:2rem;border:rgb(53,53,53) .1rem solid;border-color:#a3a3a3;text-align:center;justify-content:center;align-items:center;margin-top:2rem}.mail p a{color:#555;text-decoration:none}.mail p a:hover{color:#161515;border-bottom:.6px solid rgb(62,59,59)}.mail img{width:40px}@media (min-width: 0px) and (max-width: 560px){.full-contact{margin:0 2rem}}footer{margin:10rem 10rem 2rem;height:80%}.footnav{display:flex;align-items:center;padding:1rem;color:#000}.nav-links-container{display:flex;justify-content:center;margin-top:5px}.nav-links li{text-decoration:none;list-style:none}.nav-links li a{font-size:1.5rem}footer p{margin-top:3rem;text-align:center}@media (min-width: 0px) and (max-width: 430px){footer{margin:0 2rem}.footnav{display:flex;flex-direction:column;align-items:center;width:90%}.nav-links{display:flex;flex-direction:column;align-items:center;margin-top:5px}}@media (min-width: 430px) and (max-width: 880px){footer{margin:0 3rem}.nav-links li a{font-size:.8rem}}.projects-container{min-height:100vh;padding:2rem;color:#fff;font-family:sans-serif}.projects-title{color:#000;font-family:Roboto,serif;font-style:normal;font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:2rem}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.project-card{background:#ffffff14;border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px #0006;transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:scale(1.05);box-shadow:0 10px 25px #00000080}.project-name{font-family:Roboto,serif;font-weight:700;font-style:normal;font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:#000}.project-btns{display:flex;justify-content:space-around;align-items:center}.project-description{font-family:Roboto,serif;font-weight:700;font-style:normal;font-size:.9rem;color:#000;margin-top:10px;margin-bottom:2.2rem}.project-live{background:#fff;padding:10px;border:1px solid rgb(85,85,85);border-radius:20px;font-size:12px;margin-right:1rem;text-decoration:none;color:#212121;transition:background-color .3s ease}.project-live:hover{background-color:#5949d6}