:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#f9fafbcc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;--section-bg: #1D243080}body.light-mode{background-color:#f9fafb;color:#0f172a;--section-bg: #ffffff80}.app-wrapper{min-height:100vh;background-color:inherit;display:flex;flex-direction:column;justify-content:space-between}html,body,#root{height:100%;margin:0;padding:0}body{min-height:100vh;background-color:#0f172a;transition:background-color .3s ease,color .3s ease}.nav{display:flex;position:sticky;top:0;justify-content:space-between;align-items:center;padding:1rem;background-color:#0f172a;color:#fff}.border{border:1px solid red}.nav-links{display:flex;gap:1rem}.hamburger{display:none;font-size:2rem;cursor:pointer}li{list-style:none;margin-right:50px;font-size:1rem}.brandName{display:flex;flex-direction:row;align-items:center;width:25%;padding-left:50px;font-size:1.5rem}.nav-li{padding:.5rem;border-bottom:2px solid transparent;transition:border-bottom 1.5s ease}.nav-li:hover{border-bottom:2px solid #88B0F2;border-bottom-right-radius:5px}.switch{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:25%;padding-left:50px;font-size:1rem;padding-right:50px}.flex{display:flex}.flex-row-center{display:flex;justify-content:center;align-items:center}.flex-col-center{display:flex;flex-direction:column;justify-content:center;align-items:center}.heroSection{margin-top:100px}h1{font-size:4.5rem;margin:0}.intro{font-size:1.2rem;color:#88b0f2}.btn-container{width:30%;display:flex;justify-content:space-evenly;margin-bottom:50px;gap:10px}.hero-btn{padding:15px 10px;border-radius:5px;border:0px}.contact-me-btn{width:35%;background-color:#0f172a;color:#f9fafb;font-size:.875rem}.mild-border{border:1px solid rgba(128,128,128,.2)}#cv-btn{background-color:#030711;color:#f5f5f5;border:1px solid #88B0F2;transition:background-color .9s ease-out}.contact-me-btn:hover,#cv-btn:hover{cursor:pointer;background-color:#88b0f2;color:#0f172a}.hover{transition:border 1.2s ease,transform 1.2s ease}.hover:hover{border:1px solid #88B0F2;transform:scale(1.05)}.view-my-work-btn:hover{cursor:pointer}.view-my-work-btn,.contact-me-btn{width:50%;background-color:#88b0f2;color:#0f172a;font-size:.875rem}.bulb{padding:.5rem 1rem;background-color:none;border-radius:50px;transition:background-color .8s ease}.bulb:hover{padding:.5rem 1rem;background-color:#88b0f2;border-radius:50px}.skills-container{width:50%;display:flex;justify-content:space-evenly}.skill{border-radius:20px;padding:6px 12px;transition:border .9s ease,transform .5s ease}.arrow{animation:dropDown 2.5s ease-out infinite;position:relative}@keyframes dropDown{0%{top:-20px;opacity:0}50%{top:0;opacity:1}to{top:-20px;opacity:0}}.about-me{margin-top:80px;padding-top:30px}.about-me h3,.skills-ctn h5,.get-in-touch-ctn h5{margin-bottom:6px;margin-top:50px;font-size:2.25rem}.myproject-ctn h5{font-size:2.25rem;margin:0}.div-border{border-bottom:2px solid #88B0F2;border-radius:50px;width:80px;height:3px;background-color:#88b0f2;margin-bottom:50px}.photo{width:524px;height:524px;border-radius:10px}.about-me-container{width:90%;display:flex;justify-content:space-evenly;padding-bottom:30px;gap:30px}.about-me-contact-info{justify-content:space-between;width:70%;padding:0 20px 60px 0}.bio-info{font-size:1rem;padding-bottom:.5rem}.about-me-info-container{padding:0 10px 0 15px}.p-info{margin:0}.h-info{margin-bottom:8px;font-size:1rem}a{color:#88b0f2;text-decoration:none}button{font-weight:700}.download-cv-btn{display:block;margin-top:2rem;background-color:#88b0f2;color:#0f172a;border:none;border-radius:6px;text-align:center;font-size:.9rem;font-weight:500;cursor:pointer;padding:9px 11px;transition:background .2s,box-shadow .2s;box-shadow:0 2px 8px #88b0f214}.download-cv-btn:hover{background-color:#5a8fd6;box-shadow:0 4px 16px #88b0f229}.get-in-touch-ctn{padding-bottom:1rem}.skills-ctn,.myproject-ctn,.get-in-touch-ctn{background-color:var(--section-bg);transition:background-color .3s ease}.myproject-ctn{padding:5rem 0}#skills-border-bottom{margin-bottom:15px}.progess-ctn{width:65%}.progress{width:100%;height:100%;padding:5px}.progress-bar-ctn{width:100%;height:8px;background-color:gray;border-radius:15px}.percentage{float:right}.skill-data{padding-left:0;font-weight:600}.skill-percentage{padding-right:0;float:right;color:#5a8fd6;font-size:.9rem}.progress-ctn{margin-bottom:35px;width:90%}.full-width{width:100%}.skills-list-ctn{width:65%;flex-direction:column;justify-content:center;align-items:center;padding:10px}.skills-list-ctn-div li{background:#181c23;color:#fff;border-radius:8px;box-shadow:0 0 0 1px #23272f;padding:10px 15px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;min-width:40px;min-height:15px;margin:.3rem;transition:box-shadow .2s}.skills-list-ctn-div li:hover{box-shadow:0 8px 30px #181c232e}.flex-wrap{display:flex;flex-wrap:wrap;justify-content:start;width:83rem;max-width:100%;margin-top:2rem;padding:0 1rem;gap:1.5rem}.card{width:25rem;height:26rem;border:1px solid rgba(128,128,128,.5);border-radius:5px;box-shadow:0 12px 28px #7c26261a}.bright-border{border:1px solid #0F172A}#cardHeading{font-size:1.2rem;margin-bottom:0;margin-top:0}#cardDescription{margin-top:0;font-size:.9rem}.cardList li{border:1px solid rgba(128,128,128,.5);padding:.312rem .625rem;border-radius:50px;margin:0 .9rem 0 0;font-size:.7rem;background-color:#181c23}.cardList{padding-left:0;width:.2rem;display:flex}.card-desc-ctn{padding:0 .9375rem .9375rem 0;margin:.5rem 1rem 0}.card-img-ctn{overflow:hidden}.card-img{width:100%;height:13rem;border-top-left-radius:5px;border-top-right-radius:5px;transition:transform 1s ease}.card-img:hover{transform:scale(1.1)}.github-link{display:inline-block;background-color:#0f172a;color:#fff;border:1px solid #fff;padding:.25rem .5rem;border-radius:4px;text-decoration:none;transition:background-color .3s ease,color .3s ease}.github-link:hover{background-color:#88b0f2;color:#0f172a;font-weight:600}.gotoGithub{background-color:#88b0f2;color:#0f172a;padding:.4rem .9rem;border-radius:5px;font-weight:600}.gotoGithub:hover{cursor:pointer}.contact-info-ctn{width:70rem;justify-content:space-between;margin-top:2rem}.column{flex-direction:column}.bio h3,p{margin:0;padding-left:.8rem;font-size:1rem}.white-color{color:red}.margin-bt{margin-bottom:1rem}.icon-style{padding:1rem;border-radius:30px;border:1px solid rgb(59 130 246 / .5);background-color:gradient(135deg,hsl(217 80% 74%),hsl(230 80% 84%))}.social{display:flex;flex-direction:column}.socials{width:100%}.github-linkedin{gap:10px;padding-left:.2rem}.link-redirect:hover{cursor:pointer}.width-100{width:100%}.form{justify-content:flex-start;align-items:center}.textarea-label{max-width:23rem;width:100%;margin:0}textarea{resize:vertical;min-height:200px;padding:10px 5px;width:25rem;box-sizing:border-box;margin-bottom:1rem;border:1px solid #2d2f36;border-radius:8px;background-color:#030711}form{height:100%}.margin-left{margin-left:.5rem}input[type=text]{height:1.5rem;max-height:1.5rem;background-color:#030711;border:1px solid #2d2f36;border-radius:8px;padding:10px 5px;margin-bottom:5px;width:80%}input[type=text]::placeholder,textarea::placeholder{color:#a0aec0}input[type=text]:focus,textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f680}#subject{width:85%}.submit-btn{width:7rem;background-color:#88b0f2;color:#0f172a;font-size:.875rem;padding:.3rem;border-radius:5px;border:none}.submit-btn:hover{cursor:pointer;background-color:#88b0f2;color:#0f172a}.form-ctn{padding-left:4rem;padding-bottom:1rem;padding-top:1rem;background-color:#1d2430;border-radius:10px;transition:background-color .3s ease}.form-ctn-toggle{background-color:#fffaf0}.blue-background{background-color:red}label{margin-bottom:.3rem}.errorCode{font-size:12rem;margin:0;padding:1rem 1rem 0}.errorCodeDesc{font-size:1.5rem;margin:0;padding:0 .5rem .5rem 0}.cry-emoji{font-size:2.5rem}.footer{padding:1rem 0px;background-color:#0f172a;color:#f5f5f5}.footer footer{text-align:center;font-size:1rem}a.gotoGithub{margin-top:2rem}.nav-links.show{display:flex}@media (max-width: 768px){.nav-links{display:none;flex-direction:column;background:#0f172a;position:absolute;top:60px;right:0;width:100px;padding:1rem}h1{font-size:2rem}h2{font-size:.8rem}.btn-container{flex-direction:column;gap:.5rem}.btn-container button{width:100%}.skills-container{width:100%;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem}div.about-me-container{flex-direction:column}div.about-me-container h3{font-size:1.5rem}.about-me-contact-info{width:100%}button.hero-btn.view-my-work-btn,button.hero-btn.contact-me-btn.mild-border{font-size:.7rem;padding:.5rem}a.download-cv-btn{font-size:.7rem}.skills-list-ctn-div{width:100%;flex-wrap:wrap;justify-content:center;align-items:center}.skills-list-ctn{width:100%}.progress-ctn{width:100%;padding-top:1rem}img.photo{width:21rem;height:19rem}.hamburger{display:block}.card-ctn{padding:0;justify-content:center;align-items:center}.skills-ctn{width:100%}.cardList{display:flex}li.hover.tech-list{margin-right:.5rem}.card{width:22.5rem}a.gotoGithub{margin-top:1rem}.contact-info-ctn{justify-content:center;align-items:center;flex-direction:column;gap:.7rem;width:100%}.form-ctn{margin:0;width:83%}textarea{width:19.4rem}#email::placeholder,#name::placeholder,#subject::placeholder,#message::placeholder{font-size:.75rem}.errorCode{font-size:7rem;margin:0;padding:1rem 1rem 0}.errorCodeDesc{font-size:1rem;margin:0;padding:0 .5rem .5rem 0}.cry-emoji{font-size:1.5rem}}