:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{background-color:#201c1c;font-family:Montserrat,sans-serif;margin:0}.center{position:relative;display:flex;justify-content:center;flex-direction:column;height:100vh;text-align:center;overflow:hidden}.intro{position:relative;z-index:2;font-weight:400;animation:introFade .8s ease forwards}h1{font-size:clamp(2.5rem,6vw,4rem);line-height:1.1;margin:.3em 0;opacity:0;transform:translateY(10px);animation:fadeUp .8s ease forwards}h1:nth-child(2){animation-delay:.2s}.name{color:#ff4d5a;transition:text-shadow .3s ease}.name:hover{text-shadow:0 0 15px rgba(255,77,90,.7)}.tagline{margin-top:12px;font-size:1.2rem;opacity:0;animation:fadeUp .8s ease forwards;animation-delay:.4s}nav{display:flex;justify-content:center;gap:clamp(20px,5vw,60px);margin-top:30px;opacity:0;animation:fadeUp .8s ease forwards;animation-delay:.6s}button{font-size:1.2rem;width:150px;color:#ff4d5a;border:2px solid #ff4d5a;background-color:transparent;padding:10px 20px;cursor:pointer;outline:none;box-shadow:none;transition:background-color .3s ease,color .3s ease,transform .2s ease,box-shadow .2s ease}button:hover{background-color:#ff4d5a;color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px #ff4d5a59}button:active{transform:translateY(0);box-shadow:0 4px 12px #ff4d5a40}button:focus,button:focus-visible{outline:none;box-shadow:none}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.center{padding:0 20px}h1{font-size:clamp(1.8rem,8vw,2.5rem)}.tagline{font-size:1rem}nav{flex-direction:column;gap:15px;align-items:center}button{width:200px;font-size:1rem}}.about{position:relative;min-height:100vh;display:flex;flex-wrap:wrap;background:linear-gradient(#0000,#000c)}.about h1{position:relative;display:flex;justify-content:center;align-items:center;padding-top:50px;width:100%;height:100px;margin:0}.about-left{width:50%;display:flex;justify-content:flex-start;flex-direction:column;align-items:center;padding:0 150px;box-sizing:border-box}.about-left img{width:300px;height:300px;margin-bottom:20px}.about-left p{text-align:center;font-size:1.1rem;font-family:Arial,sans-serif}.about-right{width:50%;display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;box-sizing:border-box;padding:0 20px;gap:20px}.SkillCard{display:flex;justify-content:center;flex-direction:column;align-items:center;width:20%;border-radius:15px;padding:10px 0;border:2px solid transparent;transition-duration:.5s;background:linear-gradient(#000,#000) padding-box,linear-gradient(45deg,#fd3744,#2421fd) border-box}.SkillCard:nth-child(odd){transform:translateY(30px)}.SkillCard h2{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:1.2rem;margin:0;font-weight:400}.SkillCard img{width:75px;height:75px}.SkillCard:hover{cursor:pointer;background:linear-gradient(#0000003b,#0000003a) padding-box,linear-gradient(45deg,#fd3744,#2421fd) border-box}.SkillModalOverlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.SkillModalContent{background:#000;padding:30px;border-radius:15px;width:90%;max-width:500px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(45deg,#fd3744,#2421fd) border-box;animation:fadeIn .3s ease-out}.SkillModalContent h2{margin:0;font-family:Verdana,sans-serif;color:#fff}.SkillModalContent p{color:#ccc;line-height:1.6;margin-top:15px;font-family:Arial,sans-serif}.CloseBtn{cursor:pointer;padding:10px 25px;border-radius:8px;border:none;background:linear-gradient(45deg,#fd3744,#2421fd);color:#fff;font-weight:700;transition:transform .2s,opacity .2s}.CloseBtn:hover{opacity:.8;transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.about h1{padding-top:30px;height:80px}.about-left{width:100%;padding:20px 30px}.about-left img{width:200px;height:200px}.about-left p{font-size:1rem}.about-right{width:100%;padding:20px 30px;gap:15px}.SkillCard{width:calc(50% - 10px);padding:15px 0}.SkillCard:nth-child(odd){transform:translateY(0)}.SkillCard h2{font-size:1rem}.SkillCard img{width:60px;height:60px}.SkillModalContent{padding:25px;margin:20px}}.project{position:relative;min-height:100vh;display:flex;flex-direction:column;background:#000c}.project h1{text-align:center;padding:50px 0;width:100%;margin:0}.projectList{width:100%;display:flex;flex-direction:column;gap:100px;padding:50px 0}.ProjectItem{display:flex;width:100%;min-height:600px;align-items:center;justify-content:center;overflow:hidden;margin:10px 0}.project-img-box{width:60%;display:flex;justify-content:center;align-items:center;background-color:#2421fd;padding:60px;box-sizing:border-box}.project-img-box img{width:100%;max-width:850px;height:auto;box-shadow:0 15px 45px #0009;border-radius:5px}.project-text-box{width:40%;padding-left:80px;padding-right:120px;box-sizing:border-box}.project-text-box h2{font-size:3rem;margin-bottom:25px;color:#fff;font-family:Verdana,sans-serif;letter-spacing:1px}.project-text-box p{font-family:Arial,sans-serif;font-size:1.3rem;line-height:1.7;color:#ccc}.ProjectItem:nth-child(2n){flex-direction:row-reverse}.ProjectItem:nth-child(2n) .project-img-box{background-color:#fd3744}.ProjectItem:nth-child(2n) .project-text-box{padding-left:120px;padding-right:80px}@media (max-width: 768px){.project h1{padding:30px 20px}.projectList{gap:50px;padding:30px 0}.ProjectItem{flex-direction:column!important;min-height:auto;margin:0}.project-img-box{width:100%;padding:30px 20px}.project-text-box{width:100%;padding:30px 20px!important;text-align:center}.project-text-box h2{font-size:2rem;margin-bottom:15px}.project-text-box p{font-size:1rem}}.contact{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;background:#000c;padding-bottom:80px}.contact h1{text-align:center;padding:50px 0;width:100%;margin:0}.contact-content{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;gap:60px;padding:0 50px;box-sizing:border-box}.contact-text{text-align:center;max-width:700px}.contact-text h2{font-size:2.5rem;margin-bottom:20px;color:#fff;font-family:Verdana,sans-serif;letter-spacing:1px}.contact-text p{font-family:Arial,sans-serif;font-size:1.2rem;line-height:1.7;color:#ccc}.contact-links{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;width:100%;max-width:900px}.ContactLink{display:flex;align-items:center;gap:20px;padding:20px 30px;border-radius:15px;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(45deg,#fd3744,#2421fd) border-box;transition:all .3s ease;text-decoration:none;cursor:pointer}.ContactLink:hover{background:linear-gradient(#0000003b,#0000003a) padding-box,linear-gradient(45deg,#fd3744,#2421fd) border-box;transform:translateY(-5px);box-shadow:0 10px 30px #fd37444d}.contact-icon{width:50px;height:50px;object-fit:contain}.contact-info{flex:1}.contact-info h3{margin:0 0 5px;font-family:Verdana,sans-serif;font-size:1.2rem;color:#fff;font-weight:500}.contact-info p{margin:0;font-family:Arial,sans-serif;font-size:.95rem;color:#ccc;transition:color .2s}.ContactLink:hover .contact-info p{color:#fff}.resume-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 45px;font-size:1.2rem;font-family:Verdana,sans-serif;font-weight:700;color:#fff;border:none;border-radius:12px;background:linear-gradient(45deg,#fd3744,#2421fd);cursor:pointer;transition:all .3s ease;box-shadow:0 8px 25px #fd374466;margin-top:20px}.resume-btn:hover{transform:scale(1.05);box-shadow:0 12px 35px #fd374499}.resume-btn:active{transform:scale(.98)}@media (max-width: 768px){.contact{padding-bottom:50px}.contact h1{padding:30px 0}.contact-content{padding:0 20px;gap:40px}.contact-text h2{font-size:2rem}.contact-text p{font-size:1rem}.contact-links{grid-template-columns:1fr}.ContactLink{padding:18px 25px}.resume-btn{width:100%;padding:15px 30px;font-size:1rem}}