.home{justify-content:center;align-items:center;gap:60px;margin-top:10%;display:flex}.my-pic{object-fit:cover;border:4px solid #32cd9f;border-radius:50%;width:300px;height:300px;margin-left:0;box-shadow:4px 4px 8px #7ed71e}.intro{flex-direction:column;gap:10px;display:flex}.intro h1{margin-bottom:10px;font-size:2.3rem;transition:all .2s}.intro h1:hover{margin-bottom:14px;transition:all .2s}.intro h1 span.spanlight{color:#1b294d;text-shadow:4px 4px 8px #2980a8}.intro h1 span.spandark{color:#b7e22c;text-shadow:3px 3px 6px #00e6ad}.intro h3{font-size:1.7rem}.intro h3:hover{cursor:default;margin-bottom:11px;transition:all .2s}.intro p{font-size:1.3rem}.intro p:hover{cursor:default;margin-bottom:9px;transition:all .2s}.darkmode .icon1{color:#4ed9d9;font-size:1.5rem;box-shadow:3px 3px 6px #4ed9d9}.icon1{color:#000;font-size:1.5rem;box-shadow:3px 3px 6px #ae6b08}.pngicon{width:60px;height:60px;box-shadow:3px 3px 6px #314bcb}.intro a{color:inherit;font-size:1.3rem;text-decoration:none}.intro a:hover{text-decoration:underline}.contract-links{gap:50px;margin-top:20px;transition:all .4s;display:flex}.contract-links:hover{gap:60px;transition:all .4s}.icon2{color:#ff4500;font-size:2.5rem;box-shadow:3px 3px 6px #e64d00}@media screen and (width<=768px){.home{flex-direction:column;gap:20px;margin-top:20%}.my-pic{width:200px;height:200px}.intro{text-align:center;max-width:none;padding-right:0}.intro h1{font-size:1rem;font-weight:500}.intro h1 span{font-size:1rem;font-weight:600}.intro h3{font-size:.8rem;font-weight:500}.intro p{font-size:.5rem;font-weight:400}.icon1{background:0 0;font-size:.8rem;box-shadow:2px 2px 4px #ff4500}.intro a{font-size:.7rem}div{font-size:.5rem}.pngicon{width:30px;height:30px;box-shadow:3px 3px 6px #314bcb}.darkmode .icon1{color:#4ed9d9;font-size:.8rem;box-shadow:2px 2px 4px #4ed9d9}}.navbar{justify-content:space-around;padding-top:1%;padding-left:5%;display:flex}.navlink{font-size:1.5rem;text-decoration:none;transition:all .4s}.navlink.active{-webkit-text-decoration:underline snow;text-decoration:underline snow}.darkmode .navlink{color:#72a8ff;text-shadow:8px 8px 8px #3b82f6cc}.lightmode .navlink{color:#000;text-shadow:0 0 6px #14131399}.themebutton{background:0 0;border-radius:30%;font-size:1.5rem}.darkmode .themebutton{background-color:#f5f5f5;box-shadow:0 8px 8px #3b83f66f}.lightmode .themebutton{background-color:#f5f5f5;box-shadow:0 8px 8px #0f11146f}.darkmode .navlink.active{font-size:1.7rem;-webkit-text-decoration:underline #fff;text-decoration:underline #fff;transition:all .7s}.lightmode .navlink.active{font-size:1.7rem;-webkit-text-decoration:underline #0000008c;text-decoration:underline #0000008c;transition:all .4s}@media screen and (width<=768px){.navbar{flex-direction:row;align-items:center;gap:8px}.navlink{font-size:.7rem}.darkmode .navlink.active,.lightmode .navlink.active,.themebutton{font-size:1rem}}.aboutme{padding:2%}.aboutme h2{font-size:1.5rem;font-weight:500;transition:all .3s}.aboutme h2:hover{padding-top:5px;transition:all .3s}.darkmode .aboutme h2{text-shadow:2px 2px 10px #b1ea61}.lightmode .aboutme h2{text-shadow:2px 2px 8px #61c5ea}.darkmode .aboutme h3{text-shadow:2px 2px 10px #5886db}.lightmode .aboutme h3{text-shadow:2px 2px 8px #61c5ea}.part1{flex-direction:row;gap:10%;display:flex}.part1 div{flex-direction:column;width:30vw;height:15vh;margin-top:2%;display:flex}.part1 div:hover{padding-top:5px;transition:all .3s}.part1 h4{margin-bottom:1%;font-size:1.2rem;font-weight:500;text-decoration:underline}.aboutme h3{text-align:center;font-size:2rem;font-weight:600;text-decoration:underline}.icons1{font-size:2rem}.part2 .frontendhead{text-align:center;margin-top:1%;font-size:1.3rem;font-weight:500;text-decoration:underline}.part2 .tools{text-align:center;margin-top:2%;font-size:1.3rem;font-weight:500;text-decoration:underline}.frontendskill{flex-direction:row;gap:10%;margin-top:1%;font-size:1.5rem;display:flex}.frontendskill div:hover{padding-top:5px;transition:all .3s}.alltools{gap:10%;margin-top:2%;font-size:1.5rem;display:flex}.alltools h4:hover{padding-top:5px;transition:all .3s}@media screen and (width<=768px){.aboutme{padding-top:5%}.aboutme h2{padding:3%;font-size:.7rem}.aboutme h3{font-size:.6rem}.icons1{font-size:.8rem}.part1 h4,.part1 p{font-size:.4rem}.part1{gap:5%}.frontendskill{gap:5%;font-size:.6rem}.part2 .frontendhead{font-size:.5rem}.part2 .tools{font-size:.6rem}.alltools{flex-wrap:wrap;gap:5%;font-size:.5rem}.part2 h3{font-size:.7rem}}.projects div{flex-direction:column;justify-content:center;align-items:center;gap:20px;margin-top:3%;display:flex}.projects h2{font-size:2.5rem;font-weight:700;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.projects p{font-weight:500}.projectimage{width:40vw;height:50vh}.projectimage:hover{transition:all .5s ease-in-out;transform:scale(1.1)}.projectbuttons{gap:15px}.projectbuttons a{color:#000;text-align:center;background:0 0;border-radius:15px;width:20vw;height:5vh;font-size:1.2rem;font-weight:600;text-decoration:none;box-shadow:2px 2px 10px #000}.darkmode .projectbuttons a{color:#fff;text-shadow:2px 2px 10px #30a922;border:1px solid #3280cd}@media screen and (width<=768px){.projectimage{width:100px;height:80px}div.projects div{flex-direction:column;justify-content:center;align-items:center;gap:20px;margin-top:3%;display:flex}div.projects h2{font-size:1.3rem;font-weight:700;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}div.projects p{font-weight:500}div.projects div.projectbuttons{flex-direction:row;gap:15px}div.projects div.projectbuttons a{background:0 0;border-radius:10px;width:30vw;height:3vh;font-size:.7rem;font-weight:600}}*{font-optical-sizing:auto;margin:0;padding:0;font-family:Saira Stencil,sans-serif;font-style:normal;font-weight:400}html,body,#root{height:100%}.darkmode,.lightmode{flex-direction:column;min-height:100vh;display:flex}.darkmode{color:#f5f5f5;background-color:#000000f0;min-height:100vh;transition:all .5s}.lightmode{color:#000;background-color:#f5f5f5;min-height:100vh;transition:all .5s}.content{flex:1}.footer{justify-content:center;align-items:center;height:60px;padding-bottom:10px;display:flex}.footer p{color:#676565}@media screen and (width<=768px){.footer{height:80px}.footer p{font-size:.8rem}}