*{margin:0;padding:0;box-sizing:border-box}::selection{background-color:var(--primary-color);color:#fff}::-moz-selection{background-color:var(--primary-color);color:#fff}body{font-family:"Quicksand",sans-serif;line-height:1.75rem;font-size:16px;color:var(--text-color-gray)}:root{--primary-color: #ff5f15;--primary-color-light: #ff5f1525;--text-color-black: #18181b;--text-color-gray: #71717a;--color-light: #f4f4f5;--color-dark: #27272a;--size-header: 3.5rem;--size-header-sm: 3rem;--size-header-xs: 2.5rem;--size-header-xxs: 2rem;--font-primary: "Quicksand", sans-serif;--size-github-boxes: 1rem;--size-github-boxes-md: 0.8rem;--size-github-boxes-sm: 0.6rem;--size-github-boxes-smm: 0.4rem;--size-github-boxes-xs: 0.3rem;--size-github-boxes-xxs: 0.3rem}.footer-navs{display:grid;grid-template-columns:repeat(3, 1fr);gap:4rem;margin:3rem auto !important;width:100%}@media(max-width: 480px){.footer-navs{grid-template-columns:repeat(2, 1fr);gap:2rem}}@media(max-width: 260px){.footer-navs{grid-template-columns:1fr;gap:1.5rem}}@media(max-width: 480px){.footer-navs>:nth-of-type(3){grid-column:1/-1}}.footer-navs__lists ul{list-style:none;padding:0;display:flex;flex-direction:column;align-items:flex-start}.footer-navs__lists ul li a{text-decoration:none;color:var(--text-color-gray);font-size:.9rem;margin-bottom:.2rem;transition:color .3s ease-out}.footer-navs__lists ul li a:hover{color:var(--text-color-black)}.footer-navs__lists ul li:nth-of-type(1){font-weight:700;color:var(--text-color-black)}@media(max-width: 768px){.footer-navs__lists ul{text-align:start;align-items:flex-start}}@media(max-width: 260px){.footer-navs__lists ul{text-align:center;align-items:center}}footer{text-align:center;margin-top:2rem;padding:0 1.6rem}footer div{border-top:1px solid #e7e7eb;padding:1.8rem 0}footer div p{color:#71717a;font-size:14px}@media(max-width: 768px){footer div p{font-size:12px}}.container{max-width:1200px;margin:0 auto;padding:0 1.6rem}@media(max-width: 1600px){.container{max-width:1400px}}@media(max-width: 1200px){.container{max-width:1040px}}@media(max-width: 1024px){.container{max-width:750px}}@media(max-width: 768px){.container{max-width:95%;padding:0 1rem}}@media(max-width: 480px){.container{padding:0 1rem}}@media(max-width: 320px){.container{padding:0 .3rem}}.skills{padding:5rem 2rem}.skills-category{margin-bottom:2rem;text-align:center}.skills-category h2{font-size:1.8rem;color:var(--text-color-black);margin-bottom:.5rem}.skills-category p{font-size:1.1rem;color:var(--text-color-gray);max-width:700px;margin:0 auto 1.5rem auto}@media(max-width: 365px){.skills-category p{font-size:.9rem}}.skills-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;margin-bottom:4rem}@media(max-width: 480px){.skills-list{gap:.7rem;margin-bottom:2rem}}@media(max-width: 365px){.skills-list{gap:.5rem;margin-bottom:2rem}}.skills-list li{list-style:none;padding:1rem .5rem .5rem .5rem;transition:transform .3s ease,background-color .3s ease;width:5.8rem;text-align:center;border-radius:8px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.skills-list li:hover{transform:scale(1.1);background-color:#f8f8f8}@media(max-width: 365px){.skills-list li{width:4.5rem}}.skills-list li img{height:3rem;padding:.2rem;border:1px solid hsla(0,0%,80%,.2470588235);border-radius:10%;transition:all .3s ease-out}@media(max-width: 365px){.skills-list li img{height:2.5rem}}.skills-list li:hover img{border:1px solid var(--primary-color-light);background-color:#fff}.skills-list li p{font-size:.8rem;line-height:1.2rem;text-align:center;background-color:#f0f0f0;border-radius:5px}@media(max-width: 365px){.skills-list li p{font-size:.7rem}}#projects h2{font-size:3rem;margin-bottom:2rem;color:var(--text-color-black)}@media(max-width: 480px){#projects h2{font-size:2rem}}@media(max-width: 320px){#projects h2{font-size:1.8rem;margin-bottom:1rem}}#projects .project-list{display:flex;flex-direction:column;gap:1rem;justify-content:center}.project{padding:.8rem;border:1px solid #f3f3f3;border-radius:8px;width:100%;margin:0 auto;display:flex;flex-direction:row;transition:all .3s ease-out}.project:hover{border:1px solid var(--primary-color-light);box-shadow:0 10px 12px rgba(252,134,38,.1)}@media(max-width: 580px){.project{flex-direction:column;padding:.4rem}}.project-image{flex:1;max-width:50%;position:relative;overflow:hidden;padding:0rem 1rem 0rem 0rem;border-right:1px solid #f3f3f3}@media(max-width: 580px){.project-image{max-width:100%;padding:.5rem;border:none}}.project-image img{width:100%;height:auto;border-radius:3px;transition:transform .4s ease-out,opacity .3s ease-out}.project-image img:hover{opacity:.9;transform:scale(1.02)}@media(max-width: 950px){.project-image img{margin:0}}.project:hover .project-image{border-right:1px solid var(--primary-color-light)}@media(max-width: 580px){.project:hover .project-image{border:none}}.project hr{border:.5px solid var(--color-light);transition:all .4s ease-in-out}.project:hover hr{border-color:var(--primary-color-light)}.project-description{flex:1;text-align:left;margin:.5rem}@media(max-width: 950px){.project-description{font-size:.9rem;line-height:1.2rem}}.project-header{display:flex;justify-content:space-between;align-items:center;flex-direction:row}.project-header h3{font-size:1.5rem}@media(max-width: 680px){.project-header h3{font-size:1.1rem}}.project-header__links a{color:#333;font-size:1.5rem;margin:0 .5rem;transition:color .3s,transform .3s;text-decoration:none}.project-header__links a:hover{color:#777;transform:scale(2)}@media(max-width: 950px){.project-header__links a{font-size:1rem;margin:0 .2rem}}@media(max-width: 320px){.project-header__links a{font-size:.9rem;margin:0}}.desc{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:none;-ms-user-select:none;user-select:none;transition:max-height .3s ease}.desc.collapse{-webkit-line-clamp:6;line-clamp:6}.desc.expanded{-webkit-line-clamp:unset;line-clamp:unset}@media(min-width: 950px){.desc{-webkit-line-clamp:unset !important}}.desc-toggle-btn{display:inline-block;border:none;background-color:rgba(0,0,0,0);color:var(--text-color-gray);transition:all .3s ease}@media(min-width: 950px){.desc-toggle-btn{display:none}}.desc-toggle-btn:hover{color:var(--primary-color)}.tech-pill{display:inline-block;padding:4px 8px;border-radius:5px;font-size:10px;font-weight:bold;color:#fff;line-height:.9rem;margin:5px;text-align:center;cursor:pointer}.tech-pill i{margin-right:.15rem}hr{border-top:1px solid #ccc;margin:.5rem 0}#contact{padding:3rem 1rem;max-width:600px;margin:3rem auto;text-align:center}#contact h2{font-size:2rem;margin-bottom:1rem;color:var(--text-color-black)}@media(max-width: 320px){#contact h2{font-size:1.5rem}}@media(max-width: 320px){#contact p{font-size:.9rem}}#contact span{font-size:1rem;color:var(--text-color-gray)}@media(max-width: 600px){#contact span{display:none}}#contact .contact-buttons{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;-webkit-user-select:none;-ms-user-select:none;user-select:none}@media(max-width: 600px){#contact .contact-buttons{gap:.3rem}}@media(max-width: 480px){#contact .contact-buttons{flex-direction:column;gap:.75rem}}#contact a{display:inline-block;padding:.25rem 5rem;background-color:var(--primary-color);color:#fff;text-decoration:none;border-radius:25px;font-size:1rem;transition:background-color .3s ease,color .3s ease}#contact a:hover{background-color:#d34b08;color:#f0efef}@media(max-width: 600px){#contact a{padding:.25rem 3.75rem}}#contact a i{margin-right:8px}.github-activity-calendar{padding:20px;text-align:start;display:flex;align-items:center;flex-direction:column}.github-activity-calendar .github-contributions{background-color:rgba(0,0,0,0);border:none;text-decoration:none;display:inline-block}.github-activity-calendar .github-contributions a{text-decoration:none;font-size:14px;color:var(--text-color-gray);font-family:var(--font-primary);margin-bottom:5px;transition:all .3s ease-out}.github-activity-calendar .github-contributions a:hover{color:var(--primary-color)}@media(max-width: 768px){.github-activity-calendar .github-contributions a{font-size:12px;margin-bottom:0}}@media(max-width: 480px){.github-activity-calendar .github-contributions a{font-size:10px;margin-bottom:0}}.github-activity-calendar #github-calendar{display:grid;grid-template-columns:repeat(53, var(--size-github-boxes));grid-template-rows:repeat(7, var(--size-github-boxes));gap:3.1px;padding:10px;margin:0 auto}@media(max-width: 1024px){.github-activity-calendar #github-calendar{grid-template-columns:repeat(53, var(--size-github-boxes-md));grid-template-rows:repeat(7, var(--size-github-boxes-md));gap:2px}}@media(max-width: 768px){.github-activity-calendar #github-calendar{grid-template-columns:repeat(53, var(--size-github-boxes-sm));grid-template-rows:repeat(7, var(--size-github-boxes-sm));gap:2px;padding:8px}}@media(max-width: 650px){.github-activity-calendar #github-calendar{grid-template-columns:repeat(53, var(--size-github-boxes-smm));grid-template-rows:repeat(7, var(--size-github-boxes-smm));gap:2px;padding:5px}}@media(max-width: 480px){.github-activity-calendar #github-calendar{grid-template-columns:repeat(53, var(--size-github-boxes-xs));grid-template-rows:repeat(7, var(--size-github-boxes-xs));gap:1px;padding:2px}}@media(max-width: 320px){.github-activity-calendar #github-calendar{grid-template-columns:repeat(53, var(--size-github-boxes-xxs));grid-template-rows:repeat(7, var(--size-github-boxes-xxs));gap:1px;padding:1px}}.github-activity-calendar .day{width:var(--size-github-boxes);height:var(--size-github-boxes);border-radius:3px;background:#ebedf0;transition:all .3s ease-out}.github-activity-calendar .day:hover{filter:brightness(0.8)}.github-activity-calendar .day.level-1{background:#9be9a8}.github-activity-calendar .day.level-2{background:#40c463}.github-activity-calendar .day.level-3{background:#30a14e}.github-activity-calendar .day.level-4{background:#216e39}@media(max-width: 1024px){.github-activity-calendar .day{width:var(--size-github-boxes-md);height:var(--size-github-boxes-md);border-radius:2px}}@media(max-width: 768px){.github-activity-calendar .day{width:var(--size-github-boxes-sm);height:var(--size-github-boxes-sm);border-radius:2px}}@media(max-width: 650px){.github-activity-calendar .day{width:var(--size-github-boxes-smm);height:var(--size-github-boxes-smm);border-radius:2px}}@media(max-width: 480px){.github-activity-calendar .day{width:var(--size-github-boxes-xs);height:var(--size-github-boxes-xs);border-radius:1px}}@media(max-width: 320px){.github-activity-calendar .day{width:var(--size-github-boxes-xxs);height:var(--size-github-boxes-xxs);border-radius:1px}}header{min-height:100vh;margin:0;background-image:linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0.85)),url("/src/assets/images/bg.png");background-repeat:no-repeat;background-size:cover;background-position:center;color:var(--text-color-black);text-align:center;display:flex;flex-direction:column;align-items:center}header .navbar{width:100%;padding:1rem 0;display:flex;justify-content:center;align-items:center;background-image:linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.651));gap:.5rem;margin-bottom:.5rem}@media(max-width: 480px){header .navbar{display:none;flex-direction:column;padding:2.2rem 0 0 0;margin-bottom:-8rem;transform:translateY(-40px);opacity:0;transition:transform .5s ease-out,opacity .5s ease-out}}header .navbar-menu{display:none;position:absolute;left:20px;top:20px;cursor:pointer;z-index:1001}@media(max-width: 480px){header .navbar-menu{display:block}}header .navbar span::after{content:"";display:inline-block;width:1px;height:16px;background:#ccc;margin:0 8px}@media(max-width: 480px){header .navbar span::after{transform:rotate(90deg);margin:0}}header .navbar.active{display:flex !important;transform:translateY(0);opacity:1}header nav ul{list-style:none;display:flex;justify-content:center}@media(max-width: 480px){header nav ul{flex-direction:column;background-color:#fff}}header nav ul li{margin:0 15px}header nav ul li a{font-size:1rem;color:#333;text-decoration:none;transition:background-color .3s,transform .3s}header nav ul li a:hover{color:#000}@media(max-width: 600px){header nav ul li a{font-size:.8rem}}@media(max-width: 480px){header nav ul li a{font-size:1rem}}.social-buttons{display:flex;justify-content:center;gap:1rem;margin-left:15px}@media(max-width: 600px){.social-buttons{gap:.8rem}}@media(max-width: 480px){.social-buttons{gap:.7rem;margin:0}}.social-buttons a{display:inline-block;width:35px;height:35px;background-color:#333;color:#fff;border-radius:50%;text-align:center;line-height:35px;font-size:1.1rem;transition:background-color .3s ease-out,transform .3s ease-out}.social-buttons a:hover{background-color:#777}@media(max-width: 600px){.social-buttons a{width:28px;height:28px;line-height:28px;font-size:.9rem}}.head{margin-top:10rem;text-align:center}.head h1{font-family:"Reem Kufi Fun",sans-serif;font-size:var(--size-header);margin-bottom:2rem}@media(max-width: 768px){.head h1{font-size:var(--size-header-sm)}}@media(max-width: 480px){.head h1{font-size:var(--size-header-xs)}}@media(max-width: 320px){.head h1{font-size:var(--size-header-xxs)}}.head h1 span{font-size:var(--size-header);display:inline-block;transform-origin:center bottom;animation:shake-hand 2.5s infinite}@media(max-width: 350px){.head h1 span{display:block;margin-top:1.5rem}}.head a{font-size:14px;font-weight:700;text-decoration:none;padding:10px 15px;background-color:var(--color-light);color:var(--text-color-black);border-radius:15px;transition:all .3s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}.head a:hover{color:var(--primary-color)}@media(max-width: 480px){.head a{font-size:10px}}@keyframes shake-hand{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}section{padding:2rem;text-align:center}#about{max-width:800px;margin:0 auto;font-size:1.25rem;color:var(--text-color-gray);padding:2rem 1rem;text-align:center;line-height:1.9rem;-webkit-user-select:none;-ms-user-select:none;user-select:none}@media(max-width: 768px){#about{font-size:1rem;line-height:1.5rem;padding:2rem 1.5rem}}@media(max-width: 480px){#about{font-size:.9rem}}#about span{color:var(--text-color-black)}.contact_m{margin-top:1.5rem;background:rgba(0,0,0,0);border:1px solid #d8d8df;border-radius:50px;padding:.6rem 1.2rem;font-family:var(--font-primary);color:var(--text-color-black);font-size:.75rem;font-weight:700;transition:all .3s ease-in;-webkit-user-select:none;-ms-user-select:none;user-select:none}.contact_m:hover{background-color:var(--primary-color-light);border:1px solid var(--primary-color-light)}@media(max-width: 480px){.contact_m{font-size:10px}}.contact_m i{margin-right:6px;transition:transform .3s ease}@media(max-width: 480px){.contact_m i{margin-right:3px}}.contact_m:hover i{transform:translate(2px, -2px)}.quote_msg{display:inline-block;margin:1.5rem auto;font-size:1rem;color:var(--text-color-gray);padding:0 1rem;font-style:italic;border-left:3px solid var(--primary-color);-webkit-user-select:none;-ms-user-select:none;user-select:none}@media(max-width: 480px){.quote_msg{font-size:.8rem;margin:1.5rem 0 1.5rem 1rem;padding:0 .5rem}}@media(max-width: 320px){.quote_msg{font-size:.8rem;line-height:1rem;text-align:start}}.social_connect{margin-top:1.5rem;display:flex;justify-content:center;align-items:center;gap:1rem;font-size:1.5rem}@media(max-width: 480px){.social_connect{font-size:1.2rem}}@media(max-width: 320px){.social_connect{gap:.6rem;margin-top:1.2rem}}.social_connect a{border-radius:15%;padding:.2rem;transition:all .3s ease-in}.social_connect a:hover{background-color:var(--color-light)}.social_connect a .fa-github{color:#333;transition:color .3s ease-in}.social_connect a:hover .fa-github{color:#181818}.social_connect a .fa-square-linkedin{color:#0a66c2;transition:color .3s ease-in}.social_connect a:hover .fa-square-linkedin{color:#0259af}.social_connect a .fa-discord{color:#5865f2;transition:color .3s ease-in}.social_connect a:hover .fa-discord{color:#424fdf}.social_connect a .fa-telegram{color:#08c;transition:color .3s ease-in}.social_connect a:hover .fa-telegram{color:#017cb9}.social_connect a .fa-square-x-twitter{color:#181818;transition:color .3s ease-in}.social_connect a:hover .fa-square-x-twitter{color:#000}.social_connect a .fa-square-whatsapp{color:#25d366;transition:color .3s ease-in}.social_connect a:hover .fa-square-whatsapp{color:#1ebe5d}