body{font-family:Inter,sans-serif;font-size:18px;margin:0;padding:0;background:linear-gradient(to bottom,#eff4ff 5%,#fff 20%);color:#002936}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,p,ul{margin:0;padding:0;color:inherit;font-weight:lighter}h1{margin-top:60px;font-weight:700;color:#f1e6e6}h2{color:#ccb9b9;text-align:center}h3{font-size:2em;font-weight:bolder;color:#f1e6e6}h4,h5{color:#827373}ul{padding-left:15px;font-size:smaller}header{position:sticky;top:0;display:flex;z-index:1000;padding:4px 20px}header.scrolled{background:#fff;box-shadow:0 2px 10px #0000001a}.header-content{width:100%;display:flex;align-items:center;justify-content:space-between}.nav-links{display:flex;gap:15px;margin-left:auto}.button-28{background:none;border-radius:10px;color:#002936;cursor:pointer;font-size:16px;font-weight:600;padding:7px 10px;transition:color .3s;text-decoration:none;opacity:.6}.button-28:hover{box-shadow:0 0 10px #3b82f633,0 0 20px #3b82f61a}body.dark-mode .button-28:hover{text-decoration-color:#f1e6e6}.button-28.active{border-color:#ffffff1a;color:#002936;opacity:1}body.dark-mode .button-28.active{border-color:#ffffff4d;color:#f1e6e6}.intro{display:flex;flex-direction:column;gap:1.5rem;padding:6rem 2rem}.align-left{text-align:left}.align-center{text-align:center}.intro-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:700;color:#002936}.intro-subtitle{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:600;color:#444}.intro-skills{font-size:1.125rem;font-weight:500;color:#555}body.dark-mode .intro-title,body.dark-mode .intro-subtitle,body.dark-mode .intro-skills{color:#f1e6e6}.timeline-padding{margin-top:3rem}.dark-toggle-text{background:none;border:none;font-size:1.2rem;font-weight:600;color:#002936;cursor:pointer;padding:.5rem 1rem;transition:color .3s ease,transform .2s ease;text-transform:uppercase;position:relative}.dark-toggle-text:hover{color:#f1e6e6}.dark-toggle-text:after{background-color:currentColor;opacity:0;transition:opacity .2s ease}.dark-toggle-text:hover:after{opacity:1}body.dark-mode .dark-toggle-text{color:#f1e6e6}body.dark-mode .dark-toggle-text:hover{color:#111}.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out;will-change:opacity,transform}.reveal.visible{opacity:1;transform:translateY(0)}body.dark-mode{background:linear-gradient(to bottom,#18223f,#111 20%);color:#ccb9b9}body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode p{color:#f1e6e6}body.dark-mode header a{color:#f1e6e6}body.dark-mode header.scrolled{background:#111}footer{text-align:center;padding:2rem 0;font-size:.85rem;color:#888}.footer-style{color:inherit;text-decoration:underline;margin-left:.3rem}.contact-form{display:flex;flex-direction:column;gap:1.5rem;max-width:600px;margin:2rem auto;padding:2rem;border:1px solid rgba(139,141,152,.2);border-radius:12px;background-color:#ffffff05}.contact-form label{display:flex;flex-direction:column;font-weight:600;color:#002936}.contact-form input,.contact-form textarea{font:inherit;margin-top:.5rem;padding:.75rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;background-color:#002936;color:inherit;transition:border-color .2s ease,box-shadow .2s ease}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#002936;box-shadow:0 0 0 2px #3b82f64d}.contact-form button[type=submit]{align-self:flex-start;font-size:16px;font-weight:600;padding:7px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:none;color:#002936;cursor:pointer;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease}.contact-form button[type=submit]:hover{box-shadow:0 0 10px #3b82f626,0 0 20px #3b82f60d}body.dark-mode .contact-form button[type=submit]{color:#f1e6e6;border-color:#ffffff1a}body.dark-mode .contact-form button[type=submit]:hover{border-color:#ffffff1a}.success-message,.error-message{font-size:.9rem;font-weight:500}.success-message{color:#10b981;font-size:.9rem;font-weight:500;opacity:1;transition:opacity .5s ease-in-out}.success-message.fade-out{opacity:0}.error-message{color:#ef4444}body.dark-mode .contact-form{border-color:#ffffff1a;background-color:#ffffff05}body.dark-mode .contact-form label{color:#f1e6e6}body.dark-mode .contact-form input,body.dark-mode .contact-form textarea{border-color:#ffffff1a;color:#f1e6e6}@media (max-width: 768px){header{flex-direction:column;align-items:flex-start}.theme-toggle{margin-bottom:10px}nav{width:100%;justify-content:flex-end}}.timeline-section{padding:4rem 1rem;background:transparent}.timeline-wrapper{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:2rem 1rem}.timeline-column{flex:1 1 400px;display:flex;flex-direction:column;gap:2rem}.timeline-title{text-align:center;color:#f1e6e6;font-size:2.2rem;margin-bottom:2.5rem}.timeline-subtitle{text-align:center;font-size:1.4rem;margin:2.5rem 0 1rem;color:#f1e6e6;font-weight:600;padding-bottom:.3rem;width:fit-content;margin-left:auto;margin-right:auto}.timeline-grid{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.timeline-box{background:#111;color:#f0f0f0;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1.2rem 1.5rem;width:100%;max-width:650px;transition:box-shadow .3s ease,border-color .3s ease}.timeline-box:hover{transform:none;box-shadow:0 0 10px #3b82f633,0 0 20px #3b82f61a;border-color:#fff3}.timeline-period{font-size:.85rem;color:#999;display:block;margin-bottom:.4rem}.timeline-box-title{font-size:1.1rem;color:#fff;margin-bottom:.3rem}.timeline-box-sub{font-size:.95rem;color:#ccc;font-weight:400;margin-bottom:.5rem}.timeline-box ul{padding-left:1.2rem;font-size:.9rem;color:#ccc;margin:0}body:not(.dark-mode) .timeline-section{background:transparent}body:not(.dark-mode) .timeline-title,body:not(.dark-mode) .timeline-subtitle{color:#002936}body:not(.dark-mode) .timeline-box{background:#fff;color:#002936;border:1px solid rgba(139,141,152,.2)}body:not(.dark-mode) .timeline-box:hover{box-shadow:0 0 10px #8b8d9833,0 0 20px #8b8d980d;border-color:#8b8d9866}body:not(.dark-mode) .timeline-box-title{color:#002936}body:not(.dark-mode) .timeline-box-sub,body:not(.dark-mode) .timeline-box ul{color:#8b8d98}.projects-section{padding:4rem 1rem;background:transparent;text-align:center}.projects-title{font-size:2.2rem;margin-bottom:2rem;color:#f1e6e6}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.project-card{background:#111;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease}.project-card:hover{box-shadow:0 0 10px #3b82f633,0 0 20px #3b82f61a;transform:translateY(-5px)}.project-image{height:180px;background-size:cover;background-position:center}.project-content{padding:1rem 1.2rem;text-align:left}.project-title{font-size:1.3rem;color:#fff;margin-bottom:.4rem}.project-description{font-size:.95rem;color:#ccc;margin-bottom:.8rem}.project-techs{margin-bottom:.8rem}.tech-tag{display:inline-block;background:#3b82f6;color:#fff;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;margin-right:.5rem;margin-bottom:.3rem}.project-link{font-size:.9rem;color:#3b82f6;text-decoration:none}.project-link:hover{text-decoration:underline}body.dark-mode .projects-title{color:#f1e6e6}body.dark-mode .project-card{background:#111;border-color:#ffffff1a}body.dark-mode .project-title{color:#fff}body.dark-mode .project-description{color:#ccc}body.dark-mode .tech-tag{background:#3b82f6;color:#fff}body.dark-mode .project-link{color:#3b82f6}body:not(.dark-mode) .projects-title{color:#002936}body:not(.dark-mode) .project-card{background:#fff;border-color:#8b8d9833}body:not(.dark-mode) .project-title{color:#002936}body:not(.dark-mode) .project-description{color:#8b8d98}body:not(.dark-mode) .tech-tag{background:#3d63dd;color:#fff}body:not(.dark-mode) .project-link{color:#3d63dd}body.dark-mode .tech-tag[data-tech=React]{background-color:#61dafb;color:#000}body.dark-mode .tech-tag[data-tech=Symfony]{background-color:#000;color:#fff}body:not(.dark-mode) .tech-tag[data-tech=React]{background-color:#61dafb;color:#000}body:not(.dark-mode) .tech-tag[data-tech=Symfony]{background-color:#000;color:#fff}