html{box-sizing:border-box;scroll-behavior:smooth}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}body{line-height:1.5;-webkit-font-smoothing:antialiased;font-family:system-ui,sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}.b1 h2{font-size:12px;text-align:left}#Header{background:#0e141e;padding:10px}#Header>div{width:90%;max-width:900px;margin:0 auto;padding:0 20px}.menuIcon div{height:2px;width:20px;background-color:#000;margin:0 0 4px;transition:.4s}#nav{border-top:1px solid #e0e0e0;padding:10px 0 0}#nav a{width:100%;color:#c2c2c2;text-decoration:none;margin:10px 15px 0 0;padding:4px 6px;border-radius:50px;font-weight:600;transition:background-color .3s ease}#nav a:hover{color:#fff}#nav a.active{color:#329c40;font-weight:600}#nav a.active:hover{color:#ffba92}.headerTop{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.b2{display:flex;position:relative;margin-right:50px}.b2 a{font-size:22px;position:relative;margin:0 10px;text-decoration:none}.b2 a>div{display:none;top:100%;color:#fff;left:-60px;position:absolute;background-color:#3821a1;border-radius:50px;padding:2px 10px}.b2 a:hover>div{display:block}#themeToggle{position:absolute;top:-5px;right:-55px;background:hsla(0,0%,100%,.2);border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}#themeToggle:hover{background:hsla(0,0%,100%,.3);transform:rotate(15deg)}.containerProjectsHeader{background:linear-gradient(135deg,#4a6cf7,#6f42c1);color:#fff;padding:40px 0;text-align:center;box-shadow:0 4px 12px #0000001a;position:relative}.containerProjectsHeader>*{color:#fff}@media screen and (max-width: 600px){.HeaderDesktop{display:none}}#Header #MobileHeader{background:#0e141e;padding:0;position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:100;background:#161616;transition:left .3s ease-in-out}#Header #MobileHeader>div{width:100%;margin:0 auto;padding:0}#navMobile{width:100%;display:flex;flex-wrap:wrap;margin-top:20px;padding:10px 0}#navMobile>a{width:100%;margin:0;padding:10px;text-decoration:none;border-bottom:1px solid #fff;color:#fff}#navMobile>a:hover{color:#ff7070;border-bottom:1px solid #ff7070;background:hsla(0,0%,100%,.1)}.BottomHeader{position:absolute;width:100%;margin:0 auto;bottom:10px;left:0}.BottomHeader .b2{margin:0;display:flex;justify-content:center;align-items:center}.BottomHeader .b1{text-align:center;margin:10px 0}.BottomHeader .b1 h1{font-size:24px;margin:0}.BottomHeader .b1 h2{font-size:16px;text-align:center;margin:0;font-weight:400;opacity:.8}.closeMenu{position:absolute;top:5px;right:10px;padding:10px;font-size:24px;cursor:pointer}.closeMenu:hover{color:red}.HeaderMobile{display:flex;justify-content:space-between;align-items:center;padding:0 10px;transition:left .3s ease-in-out}.HeaderMobile>div{color:#fff}.HeaderMobile .menuIcon{cursor:pointer}.HeaderMobile .menuIcon>div{background-color:#fff}#Header #MobileHeader.active{left:0;transition:left .3s ease-in-out}@media screen and (min-width: 601px){#Header #MobileHeader,.HeaderMobile{display:none}}#Footer{background-color:#222;padding:8px 0;display:flex;justify-content:center;color:#dfdfdf}.ProjectPage>div{max-width:1000px;margin:0 auto;padding:20px}.ProjectPage .containerProjectsHeader *{color:#fff}.ProjectPage *{color:#000}#ProjectPage h2{max-width:1000px;margin:20px auto 0;padding:20px;color:#fff;background:linear-gradient(135deg,#4aa3f7,rgba(230,109,149,.768627451))}#ProjectPage>div{display:flex;flex-wrap:wrap}.projects-container,.games-container{display:flex;flex-wrap:wrap;width:100%;margin:0 auto}.Project-card{width:30.3%;margin:0 1.5% 20px;padding:14px;background:#fff;border-radius:12px;box-shadow:0 5px 15px var(--shadow);transition:transform .3s ease,box-shadow .3s ease;position:relative}.Project-card>h3{font-size:24px}.Project-card>p{font-size:12px}.Project-card .progress-bar{background:#81a0e4;height:5px;width:100%;margin:4px 0}.Project-card .server-title{font-weight:800;margin:10px 0 0}.Project-card .tech-stack{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.Project-card .tech-stack>div{background:rgba(74,108,247,.1);padding:5px 10px;border-radius:20px;font-size:12px;color:#4a6cf7}#live-section .server-block,#dev-section .server-block{background-color:#35dc7b1a;border-left:3px #16a145 solid;margin:5px 0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.75rem;font-weight:500}#live-section .server-block>i,#dev-section .server-block>i{color:#16a145}#live-section .server-block>strong,#dev-section .server-block>strong{color:#16a145}#live-section .server-block>a,#dev-section .server-block>a{color:#3c39eb;text-decoration:none;font-weight:800}#live-section .server-block:hover{background-color:#218d4e33;box-shadow:0 2px 8px #124b2994}#live-section .server-block:hover>i{color:#107732}#live-section .server-block:hover>strong{color:#107732}#live-section .server-block:hover>a:hover{color:red}#dev-section .server-block{background-color:#ecc08571;box-shadow:0 2px 8px #f8c24f4d;border-left:3px #690000 solid}#dev-section .server-block>i{color:#6e4117}#dev-section .server-block>strong{color:#6e4117}#dev-section .server-block>a{color:#ec1414}#dev-section .server-block:hover{background-color:#e69f42a2;box-shadow:0 2px 8px #e4a723a6}#dev-section .server-block:hover>i{color:#6e4117}#dev-section .server-block:hover>strong{color:#6e4117}#dev-section .server-block:hover>a{color:#ec1414}#dev-section .server-block>a:hover{color:#01f}.modern-button{width:180px;margin:0 auto;padding:12px 8px;max-height:48px;font-size:18px;font-weight:600;color:#fff;background-color:#007bff;border:none;border-radius:8px;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.modern-button2{margin-left:10px;background-color:#ee6746}.modern-button:hover{background-color:#0056b3;transform:translateY(-2px)}.modern-button2:hover{background-color:#a8361f}.modern-button:active{transform:translateY(0);box-shadow:0 2px 6px #0003}.Project-card:hover .extraCard{display:flex}.extraCard{display:none;position:absolute;padding:10px 8px;top:-30px;right:-30px;justify-content:space-between;margin-top:10px;font-size:12px;color:#000;background:rgba(255,119,77,.678);border-radius:20px;font-weight:600}.extraCard>div{margin-left:4px;color:#000}.load-more-container{display:flex;justify-content:center;text-align:center;margin-top:20px}.ProjectPage select{margin-right:20px;margin-bottom:10px;appearance:none;border:0;outline:0;font:inherit;width:9rem;padding:.6rem;font-weight:700;background:var(--arrow-icon) no-repeat right .8em center/1.4em,linear-gradient(to left,var(--arrow-bg) 3em,var(--select-bg) 3em);background:linear-gradient(35deg,rgba(255,166,166,.486),rgba(170,3,170,.603));color:#161616;border-radius:.25em;box-shadow:0 0 1em #0003;cursor:pointer}.ProjectPage select::-ms-expand{display:none}.ProjectPage select:focus{outline:none}.ProjectPage select option{color:inherit;background-color:var(--option-bg)}@media screen and (max-width: 768px){.containerProjectsHeader>*{color:#fff;font-size:20px}.Project-card{width:46%;margin:0 2% 20px}}@media screen and (max-width: 480px){.containerProjectsHeader>*{color:#fff;font-size:30px}.Project-card{width:96%;margin:0 2% 20px}}:root{--primary-color: #007bff;--secondary-color: #28a745;--background-light: #f4f7f6;--card-background: #ffffff;--text-dark: #333;--text-light: #555;--border-color: #dee2e6;--shadow-light: 0 4px 12px rgba(0, 0, 0, .08)}.background-page{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-dark);background-color:var(--background-light);padding:40px 20px;max-width:1200px;margin:0 auto}.page-header{text-align:center;margin-bottom:60px;padding:20px;border-bottom:3px solid var(--primary-color)}.page-header h1{font-size:2.8rem;color:var(--primary-color)}.page-header p{font-size:1.2rem;color:var(--text-light)}.section{padding:40px 0;margin-bottom:20px}.section-header{font-size:2rem;margin-bottom:30px;text-align:center;display:flex;align-items:center;justify-content:center}.header-icon{font-size:1.5em;margin-right:15px;color:var(--secondary-color)}.timeline{position:relative;max-width:1000px;margin:0 auto}.timeline:after{content:"";position:absolute;width:4px;background-color:var(--primary-color);top:0;bottom:0;left:50%;margin-left:-2px}.timeline-item{padding:10px 40px;position:relative;width:50%;box-sizing:border-box}.timeline-item:nth-child(odd){left:0}.timeline-item:nth-child(even){left:50%}.timeline-dot{position:absolute;width:16px;height:16px;background-color:var(--secondary-color);border:3px solid var(--card-background);top:25px;border-radius:50%;z-index:1}.timeline-item:nth-child(odd) .timeline-dot{right:-8px}.timeline-item:nth-child(even) .timeline-dot{left:-8px}.timeline-content{padding:20px;background:var(--card-background);border-radius:8px;box-shadow:var(--shadow-light);position:relative}.timeline-content h3{color:var(--primary-color);margin-top:0}.timeline-content .subtitle{font-weight:600;color:var(--text-dark);margin:5px 0}.timeline-content .duration{color:var(--text-light);font-size:.9em;margin-bottom:10px;border-bottom:1px dashed var(--border-color);padding-bottom:5px}.skills-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:900px;margin:0 auto}.skill-card{background-color:var(--primary-color);color:#fff;padding:10px 20px;border-radius:20px;font-weight:600;letter-spacing:.5px;box-shadow:0 2px 4px #0000001a;transition:transform .2s}.skill-card:hover{transform:translateY(-2px);background-color:var(--secondary-color)}.learning-grid,.other-skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1000px;margin:0 auto}.learning-card,.other-skill-box{background:var(--card-background);padding:25px;border-radius:10px;box-shadow:var(--shadow-light);border-left:5px solid var(--secondary-color)}.learning-card h4,.other-skill-box h4{color:var(--primary-color);margin-top:0}.source-tag{display:inline-block;background-color:#f0f0f0;color:var(--text-light);padding:3px 8px;border-radius:5px;font-size:.8em;margin-bottom:10px}@media screen and (max-width: 600px){.timeline:after{left:20px}.timeline-item{width:100%;padding-left:60px;padding-right:20px}.timeline-item:nth-child(even),.timeline-item:nth-child(odd){left:0}.timeline-item:nth-child(odd) .timeline-dot{left:12px}.timeline-item:nth-child(even) .timeline-dot{left:12px}}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-color:#f5f8ff;color:#fff;font-family:Open Sans,sans-serif;font-size:16px}