body,html{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-image:url(https://images.unsplash.com/photo-1518770660439-4636190af475);background-size:cover;background-attachment:fixed;background-position:center;color:#fff}.App{min-height:100vh;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.dark{background-color:#121212;color:#e0e0e0}.topbar{display:flex;justify-content:flex-end;padding:10px 20px}.topbar button{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;background-color:#3b82f6;color:#fff;font-weight:700;transition:background-color .3s ease}.topbar button:hover{background-color:#2563eb}.container-app{max-width:1200px;margin:0 auto;padding:20px}section{background-color:#0009;padding:60px 20px;margin:20px 0;border-radius:12px;box-shadow:0 4px 12px #0006}.about-section{padding:50px 20px;background-color:#f9f9f9;color:#222;max-width:700px;margin:0 auto;text-align:center}.about-section h2{font-size:2.5rem;margin-bottom:20px}.about-section p{font-size:1.125rem;line-height:1.6;margin-bottom:15px}.email-link{color:#007bff;text-decoration:none;font-weight:600}.email-link:hover{text-decoration:underline}.contact-section{padding:60px 20px;background-color:#f7f7f7;text-align:center}.contact-title{font-size:28px;margin-bottom:30px;color:#333}.contact-text{font-size:18px;color:#555;margin:15px 0}.contact-link{color:#007bff;font-weight:600;text-decoration:none;transition:color .3s ease}.contact-link:hover{color:#0056b3;text-decoration:underline}.hero{display:flex;flex-direction:column-reverse;align-items:center;padding:60px 20px;background-color:#f0f4f8;text-align:center}.hero-content{max-width:600px}.hero h1{font-size:2.8rem;margin-bottom:10px;color:#222}.hero h1 span{color:#3b82f6;font-weight:700}.hero h2{font-size:1.8rem;margin-bottom:15px;color:#555}.hero p{font-size:1.1rem;margin-bottom:25px;color:#666}.hero button{padding:12px 30px;font-size:1.1rem;background-color:#3b82f6;color:#fff;border:none;border-radius:30px;cursor:pointer;transition:background-color .3s ease}.hero button:hover{background-color:#2563eb}.hero-image{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:30px}@media (min-width: 768px){.hero{flex-direction:row;justify-content:space-between;text-align:left;padding:80px 60px}.hero-content{max-width:50%}.hero-image{margin-bottom:0;width:200px;height:200px}}.projects-section{padding:60px 20px;background-color:#f7f7f7;text-align:center}.projects-title{font-size:32px;margin-bottom:40px;color:#222}.projects-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.project-card{background:#fff;border-radius:8px;width:300px;padding:20px;box-shadow:0 4px 8px #0000001a;transition:transform .2s ease}.project-card:hover{transform:translateY(-5px)}.project-image{width:100%;height:auto;border-radius:5px;margin-bottom:15px}.project-name{font-size:20px;margin-bottom:10px;color:#333}.project-desc{font-size:14px;color:#666;margin-bottom:15px}.project-links a{display:inline-block;margin:5px 10px;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;transition:background .3s ease}.project-links a:hover{background-color:#0056b3}.skills-section{padding:60px 20px;background-color:#f9f9f9;text-align:center}.skills-title{font-size:32px;color:#222;margin-bottom:30px}.skills-list{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;list-style:none;padding:0}.skill-item{background-color:#007bff;color:#fff;padding:10px 20px;border-radius:20px;font-size:16px;transition:background-color .3s ease}.skill-item:hover{background-color:#0056b3}