:root{--color-bg: #28498b;--color-accent: #2563eb;--color-accent-dark: #0e3975;--color-accent-light: #38bdf8;--color-white: #ffffff;--color-black: #000000;--color-light-grey: #cbd5e1;--gradient-start: #295cb3;--gradient-end: #1e293b}body{margin:0;padding:5vh 5vw 0vh 5vw;font-family:Segoe UI,sans-serif;background:var(--color-bg);color:#0f172a}.header{color:var(--color-black)}.app-layout{display:flex;background:var(--color-accent);height:90vh;width:90vw;border-radius:20px;overflow:hidden;box-shadow:0 0 40px #00000059}.main-content{flex:1;overflow-y:auto;padding:40px;background:var(--color-accent);color:var(--color-white);scroll-behavior:smooth}.icon-card{background:var(--color-white);border-radius:12px;box-shadow:0 2px 8px #0000001a;text-align:center;padding:20px;width:150px;transition:transform .2s}.icon-card:hover{transform:translateY(-5px)}.icon-card .icon{font-size:48px;margin-bottom:10px}.grid-container{padding:40px;background:#f1f5f9;flex:1;overflow-y:auto;border-radius:0 10px 10px 0}.grid-container h2{font-size:24px;color:#0f172a;margin-bottom:30px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px}.project-card{background:var(--color-white);border-radius:12px;padding:20px;box-shadow:0 4px 10px #0000001a;transition:transform .2s ease}.project-card h3{color:#0f172a;margin-bottom:8px}.project-card p{font-size:14px;color:#475569;margin-bottom:10px}.tech{font-size:12px;color:var(--color-accent);margin-bottom:8px}.project-card a{text-decoration:none;color:#1e40af;font-weight:700}.section{padding:40px;color:var(--color-white)}.section h2{color:var(--color-white);text-align:center;margin-bottom:40px}.section p{margin-bottom:12px;line-height:1.5}.section a{color:var(--color-white);text-decoration:none}.section a:hover{text-decoration:underline}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}small{color:#475569}.sidebar{width:250px;background:linear-gradient(180deg,var(--gradient-start),var(--gradient-end));color:var(--color-white);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:50px;border-radius:12px 0 0 12px;box-shadow:4px 0 12px #00000040}.logo{font-size:30px;font-weight:700;color:var(--color-accent-light);margin-bottom:6px}.subtitle{font-size:16px;color:var(--color-accent-light);margin-bottom:50px}.nav-icons{display:flex;flex-direction:column;align-items:center;gap:25px;width:100%}.sidebar-item{background:transparent;border:none;color:var(--color-white);cursor:pointer;width:85%;padding:15px 0;border-radius:10px;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;font-family:Segoe UI,sans-serif}.sidebar-item:hover{background:#38bdf833;box-shadow:inset 0 0 10px #38bdf866}.sidebar-item.active{background:var(--color-accent);box-shadow:0 0 10px #2563ebcc}.sidebar-item span{font-size:28px;display:block;margin-bottom:6px}.sidebar-item p{font-size:15px;margin:0;font-weight:500;color:var(--color-light-grey)}@media(max-width:1024px)and (min-width:769px){.sidebar{width:180px;padding-top:30px}.logo{font-size:24px}.subtitle{font-size:14px;margin-bottom:30px}.nav-icons{gap:18px}.sidebar-item{width:90%;padding:10px 0}.sidebar-item span{font-size:24px}.sidebar-item p{font-size:13px}}@media(max-width:768px){body{padding:0}.app-layout{flex-direction:column;width:100vw;height:100vh;border-radius:0}.sidebar{width:100%;height:auto;flex-direction:row;justify-content:center;align-items:center;padding:10px 2vw;border-radius:0;background:linear-gradient(180deg,var(--gradient-end),#0f172a);box-shadow:0 -3px 15px #00000040;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}.logo,.subtitle{display:none}.nav-icons{flex-direction:row;justify-content:space-between;align-items:center;width:calc(100% - 10vw);gap:2vw}.sidebar-item{width:auto;padding:8px 10px}.sidebar-item span{font-size:28px}.sidebar-item p{font-size:13px}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--gradient-end)}::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:10px;border:2px solid var(--gradient-end)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-light)}*{scrollbar-width:thin;scrollbar-color:var(--color-accent) var(--gradient-end)}.about-container{max-width:900px;margin:0 auto;padding:2rem}.about-image-wrapper{display:flex;justify-content:center;margin-top:2rem}.about-image-wrapper img{width:220px;height:auto;border-radius:12px;box-shadow:0 4px 10px #00000040}.about-link{color:var(--color-accent);font-weight:500;text-decoration:none}.about-link:hover{text-decoration:underline}.cv-download-wrapper{margin-top:30px;display:flex;justify-content:center;gap:20px}.cv-btn{padding:12px 20px;min-width:200px;text-align:center;background:var(--color-bg);color:#fff;border-radius:6px;text-decoration:none;font-weight:600;transition:.2s;display:inline-block}a.cv-btn:hover{background:var(--color-accent-dark);text-decoration:none}@media(max-width:768px){.cv-download-wrapper{flex-direction:column;align-items:center;gap:15px}.cv-btn{width:260px;white-space:nowrap;text-align:center}}.project-grid{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1rem;justify-content:flex-start}.project-card{width:300px;background:var(--color-bg);padding:1.2rem;border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1)}.project-card:hover{box-shadow:0 6px 18px #00000040}.project-card h4{margin-bottom:.4rem;color:var(--color-white);text-align:center}.project-card p{color:var(--color-white);margin-bottom:.6rem;opacity:.9}.project-card small{display:block;margin-bottom:.8rem;font-size:.85rem;opacity:.8;color:var(--color-white)}.project-link{display:inline-block;padding:.4rem .7rem;background:var(--color-accent);color:var(--color-white);border-radius:6px;font-size:.9rem;text-decoration:none;transition:transform .2s ease,background .2s ease}.project-link:hover{background:var(--color-accent-dark);text-decoration:none}a.project-link:hover{text-decoration:none}.mention-title{margin-top:3rem}.timeline{position:relative;margin-top:30px;padding-left:20px;border-left:3px solid var(--color-bg)}.timeline-item{position:relative;margin-bottom:25px}.timeline-dot{width:14px;height:14px;background:var(--color-bg);border-radius:50%;position:absolute;left:-28px;top:4px}.timeline-content h4{margin:0;color:var(--color-white)}.timeline-content p{margin:4px 0 0;color:var(--color-white);font-size:14px}.tech-list{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}.tech-chip{background:var(--color-bg);color:var(--color-white);padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;display:inline-block}
