@import"https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap";header{width:100%;height:80px;padding:0 50px;background-color:var(--main-color);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;text-transform:capitalize}header .mood:hover{cursor:pointer}header ul{list-style:none;display:flex;justify-content:center;align-items:center;gap:50px}.close,.menu-btn{display:none!important}ul a{color:var(--text-color)}header ul li:hover{cursor:pointer;color:var(--text-scaned-color)}header .contactBtn{border:3px solid var(--text-scaned-color);border-radius:5px;background-color:var(--text-scaned-color);color:var(--main-color);padding:5px}header .contactBtn:hover{background-color:var(--main-color);color:var(--text-scaned-color)}@media screen and (max-width: 768px){header{overflow:auto}header nav{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:var(--main-color);transform:translate(100%);z-index:99999999}.open{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:var(--main-color);transform:translate(0);z-index:99999999}header nav ul{height:100%;flex-direction:column}.menu-btn{display:block!important}.close{display:block!important;position:absolute;top:20px;right:50px}.menu-btn:hover,.close:hover{cursor:pointer}}:root{--main-color: hsl(213, 69%, 95%);--syntax-start-color: hsl(0, 0%, 22%);--syntax-end-color: hsl(0, 0%, 65%);--text-color: hsl(0, 0%, 0%);--text-scaned-color: hsl(238, 100%, 70%);--card-BGColor: hsl(0, 0%, 100%)}body.dark-mode{--main-color: hsl(0, 0%, 9%);--syntax-start-color: hsl(0, 0%, 88%);--syntax-end-color: hsl(0, 0%, 88%);--text-color: hsl(0, 0%, 100%);--text-scaned-color: hsl(238, 100%, 80%);--card-BGColor: hsl(0, 0%, 25%)}*{box-sizing:border-box;font-size:1.2rem;transition:all .3s linear}html{scroll-behavior:smooth}a{text-decoration:none}button{border:3px solid var(--text-scaned-color);border-radius:5px;background-color:var(--text-scaned-color);color:var(--main-color);padding:5px}button:hover{background-color:var(--main-color);color:var(--text-scaned-color);cursor:pointer}body{width:100vw;min-height:max-content;overflow-x:hidden;color:var(--text-color);background-color:var(--main-color);font-family:Signika,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"GRAD" 0}.spicial{font-size:2.5rem;margin-bottom:10px;color:var(--text-scaned-color)}main{width:90%;margin:auto}.titleStart{color:var(--syntax-start-color);display:flex;justify-content:start;margin:50px 0}.titleEnd{margin:50px 0;display:flex;justify-content:end;color:var(--syntax-start-color)}@media screen and (max-width: 768px){*{font-size:1.1rem}.spicial{font-size:1.5rem}body{box-sizing:content-box;width:100vw}}#Home{width:100%;display:flex;justify-content:space-between;align-items:end;gap:50px;height:80vh}.linkIcon{color:var(--text-scaned-color);font-size:3rem;margin-top:40px}#Home .side{color:var(--text-scaned-color);display:flex;justify-content:center;align-items:center;flex-direction:column;gap:50px;width:100px}#Home .side .line{width:1px;background-color:#3f3f3f;height:100px}#Home .side .list{display:flex;justify-content:end;align-items:center;flex-direction:column}#Home .side .list i{font-size:3rem;margin-bottom:40px;color:var(--text-scaned-color)}#Home .side span{font-size:1.4rem;margin-bottom:150px;transform:rotate(-90deg)}#Home .contener{width:100%;height:70vh;display:flex;justify-content:space-evenly;align-items:center;box-shadow:0 0 10px 2px var(--text-scaned-color) inset}#Home .contener .myImg{width:300px;height:300px;display:flex;justify-content:center;align-items:center}#Home .contener .myImg img{width:100%;height:100%;object-fit:contain;border-radius:50%;border:var(--text-scaned-color) 3px solid;box-shadow:0 0 40px 0 var(--text-scaned-color)}#Home .contener .myInfo div{font-size:1.5rem}#Home .contener .myInfo h2{text-wrap:nowrap;animation:mern 10s linear infinite;overflow:hidden}@media screen and (max-width: 1000px){#Home .side{display:none}#Home .contener{flex-direction:column-reverse;margin:auto}#Home .contener .myImg img{width:30vw;height:30vw}#Home .contener .myInfo{text-align:center}#Home .contener .myInfo div{font-size:1.5rem}#Home .contener .myInfo .spicial{animation:none;font-size:1rem;text-wrap:wrap}}.about-me{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;gap:50px;padding:50px}.about-me .imgSide img{width:80%;height:80%;object-fit:contain;border-radius:25px;border:var(--text-scaned-color) 3px solid;box-shadow:0 0 40px 0 var(--text-scaned-color)}@media screen and (max-width: 768px){.about-me{grid-template-columns:1fr}.about-me .imgSide img{width:100%;height:100%}}.skills{color:var(--text-scaned-color);font-size:2.5rem;margin:3rem auto;text-align:center}.TechskillsContener{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.TechskillsContener div{width:150px;text-align:center}.skill img{width:100px}h1{text-align:center}.projects-contener{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap;gap:20px}.Card{background-color:var(--card-BGColor)!important;color:var( --text-color)!important}.Card:hover{transform:scale(1.02);box-shadow:0 0 16px #666bff}.cardDesc{color:var(--text-color)}.contact-contener{display:grid;grid-template-columns:1fr 1fr;justify-content:space-between;align-items:center;gap:50px}.contact-contener .contact-info{min-width:50vw}form div{display:flex;justify-content:space-between;align-items:start;flex-direction:column}form input,form textarea{width:60%;height:60px;border-radius:5px;box-shadow:0 0 5px 3px var(--text-scaned-color) inset;border:0;margin-bottom:20px;padding:5px}form input:focus,form textarea:focus{border:0px;outline:0px}form textarea{height:200px}form .msg{align-items:start!important}.Contact-details,.Contact-details div{display:flex;justify-content:start;align-items:start!important;flex-direction:column}.Contact-details div{width:80%;box-shadow:0 0 3px 0 var(--text-scaned-color);border-radius:10px;margin:10px}.Contact-details div:hover{box-shadow:0 0 3px 5px var(--text-scaned-color);transform:scale(1.1)}.contact-info div p{margin:5px}@media screen and (max-width: 768px){.contact-contener{display:block}.contact-info{display:flex;justify-content:center;align-items:center;flex-direction:column}.contact-contener div{flex-direction:column;gap:10px;width:100%}form input,form textarea{width:100%}form .msg{align-items:center!important}}.footer-contener{width:90%;margin:auto;padding:50px;bottom:0;z-index:10;box-shadow:0 0 10px 2px var(--text-scaned-color) inset}footer h1,footer h2{text-align:center;margin:50px 0}footer .footer-info{display:flex;justify-content:space-evenly;align-items:start;gap:50px}.footer-info div{width:30%}footer .about-me{display:block;justify-content:start;align-items:start;flex-direction:column;gap:50px;margin:0;padding:0}footer .about-me p{font-size:1rem}.footer-info ul{padding-inline-start:0px;list-style-type:none;display:flex;justify-content:start;align-items:start;flex-direction:column;gap:10px;text-transform:capitalize}.footer-info div ul li:hover{color:var(--text-scaned-color);cursor:pointer}.contact,.services{text-wrap:nowrap;text-align:start}.copy-rights{width:90%;margin:30px auto;display:flex;justify-content:center;align-items:center}.copy-rights .spicial{font-size:1rem}.copy-rights hr{width:40%;height:2px;background-color:var(--text-scaned-color)}@media screen and (max-width: 768px){footer .footer-info{align-items:start;flex-direction:column;gap:50px}footer .about-me{display:none}.copy-rights{flex-direction:column;gap:30px}.copy-rights .social-media{display:flex;justify-content:center;gap:20px}.copy-rights hr{display:none}}.StyledCard{max-width:345px;margin:16px;transition:all .3s linear;cursor:pointer;background:var(--card-BGColor)!important;color:var( --text-color)!important}.StyledCard:hover{transform:scale(1.03);box-shadow:0 8px 16px #0003}.ModalContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:"90%";max-width:600px;background-color:var(--card-BGColor);box-shadow:24;border-radius:20px;padding:20px;overflow-x:auto!important}.experienceCard{transition:all .3s ease-in-out;cursor:pointer;height:100%;display:flex;flex-direction:column;justify-content:center;background-color:var(--card-BGColor)!important;color:var( --text-color)!important;border-radius:10px}.experienceCard:hover{transform:scale(1.02);box-shadow:0 0 16px #666bff}.modalContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;background-color:var(--card-BGColor);color:var( --text-color)!important;box-shadow:24px;border-radius:20px;padding:20px}